ใช้โมเดลโค้ด

ไลบรารีของ Google Identity Services ช่วยให้ผู้ใช้ส่งคำขอการให้สิทธิ์ได้ จาก Google โดยใช้ป๊อปอัปตามเบราว์เซอร์หรือการเปลี่ยนเส้นทาง UX ช่วงเวลานี้ เริ่มขั้นตอน OAuth 2.0 ที่ปลอดภัยและส่งผลให้มีการใช้โทเค็นเพื่อการเข้าถึงเพื่อเรียกใช้ Google APIs ในนามของผู้ใช้

สรุปโฟลว์รหัสการให้สิทธิ์ OAuth 2.0

• จากเบราว์เซอร์ที่มีท่าทางสัมผัส เช่น การคลิกปุ่ม บัญชี Google เจ้าของ ขอรหัสการให้สิทธิ์จาก Google
• Google จะตอบกลับโดยส่งรหัสการให้สิทธิ์ที่ไม่ซ้ำไปยัง Callback ใน เว็บแอปพลิเคชัน JavaScript ของคุณที่ทำงานอยู่ในเบราว์เซอร์ของผู้ใช้ หรือเรียกใช้ ปลายทางของรหัสการให้สิทธิ์โดยใช้การเปลี่ยนเส้นทางเบราว์เซอร์
• แพลตฟอร์มแบ็กเอนด์ของคุณจะโฮสต์ปลายทางรหัสการให้สิทธิ์และรับ โค้ด หลังจากตรวจสอบความถูกต้องแล้ว โค้ดนี้จะแลกเปลี่ยนเป็นการเข้าถึงต่อผู้ใช้และ รีเฟรชโทเค็นโดยใช้คำขอไปยังปลายทางโทเค็นของ Google
• Google ตรวจสอบรหัสการให้สิทธิ์ และยืนยันว่าคำขอสร้างแหล่งที่มา จากแพลตฟอร์มที่ปลอดภัยของคุณ ออกการเข้าถึงและรีเฟรชโทเค็น และส่งคืน โดยการเรียกใช้ปลายทางการเข้าสู่ระบบที่โฮสต์โดยแพลตฟอร์มของคุณ
• ปลายทางการเข้าสู่ระบบของคุณจะได้รับโทเค็นเพื่อการเข้าถึงและรีเฟรช เพื่อจัดเก็บอย่างปลอดภัย โทเค็นการรีเฟรชสำหรับใช้ในภายหลัง

ประเด็นหลัก: ในเซิร์ฟเวอร์แบ็กเอนด์ คุณจะแลกเปลี่ยนรหัสการให้สิทธิ์กับ รีเฟรชโทเค็นและเข้าถึงโทเค็นโดยเรียกใช้ปลายทางโทเค็นของ Google

เริ่มต้นไคลเอ็นต์โค้ด

เมธอด google.accounts.oauth2.initCodeClient() จะเริ่มต้นไคลเอ็นต์โค้ด

โหมดป๊อปอัปหรือโหมดเปลี่ยนเส้นทาง

คุณจะเลือกแชร์รหัสการให้สิทธิ์ได้โดยใช้การเปลี่ยนเส้นทางหรือ โฟลว์ผู้ใช้ในโหมดป๊อปอัป เมื่อใช้โหมดเปลี่ยนเส้นทาง คุณจะโฮสต์การให้สิทธิ์ OAuth2 ปลายทางในเซิร์ฟเวอร์ของคุณและ Google จะเปลี่ยนเส้นทาง User Agent ไปยังปลายทางนี้ กำลังแชร์รหัสการตรวจสอบสิทธิ์เป็นพารามิเตอร์ของ URL สำหรับโหมดป๊อปอัป คุณจะต้องกำหนด JavaScript Callback Handler ซึ่งจะส่งรหัสการให้สิทธิ์ไปยังเซิร์ฟเวอร์ของคุณ โหมดป๊อปอัป สามารถใช้เพื่อมอบประสบการณ์ของผู้ใช้ที่ราบรื่นโดยที่ผู้เข้าชมไม่ต้อง ออกจากเว็บไซต์ของคุณ

ในการเริ่มต้นไคลเอ็นต์สำหรับ

• เปลี่ยนเส้นทางขั้นตอน UX โดยตั้งค่า ux_mode เป็น redirect และค่าของ redirect_uri ไปยังปลายทางรหัสการให้สิทธิ์ของแพลตฟอร์ม ค่า ต้องตรงกันทุกประการกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตรายการใดรายการหนึ่งสำหรับ OAuth 2.0 ที่คุณกำหนดค่าในคอนโซล API และต้องเป็นไปตาม เปลี่ยนเส้นทางกฎการตรวจสอบ URI

• ขั้นตอน UX แบบป๊อปอัปตั้งค่า ux_mode เป็น popup และค่าของ callback เป็น ชื่อของฟังก์ชันที่คุณจะใช้เพื่อส่งรหัสการให้สิทธิ์ไปยัง ที่มีการจัดการครบวงจรได้เลย

ประเด็นสำคัญ: ใช้โหมดป๊อปอัปเพื่อความสมดุลของความสามารถในการใช้งานและความปลอดภัยที่ดีที่สุด ขอแนะนำให้ใช้ขั้นตอน UX ที่มีโมเดลรหัสการให้สิทธิ์

การป้องกันการโจมตี CSRF

การช่วยป้องกันการโจมตีแบบ Cross-Site-Request-Forgery (CSRF) จะแตกต่างออกไปเล็กน้อย ซึ่งใช้สำหรับขั้นตอน UX ของโหมดการเปลี่ยนเส้นทางและป๊อปอัป สำหรับการเปลี่ยนเส้นทาง ระบบจะใช้พารามิเตอร์ state ของ OAuth 2.0 โปรดดู RFC6749 ส่วน 10.12 การปลอมแปลงคำขอข้ามเว็บไซต์ เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างและตรวจสอบพารามิเตอร์ state เมื่อใช้โหมดป๊อปอัป คุณเพิ่มส่วนหัว HTTP ที่กำหนดเองในคำขอ จากนั้นยืนยันบนเซิร์ฟเวอร์ จะตรงกับค่าและต้นทางที่คาดไว้

เลือกโหมด UX เพื่อดูข้อมูลโค้ดที่แสดงรหัสการตรวจสอบสิทธิ์และการจัดการ CSRF ดังนี้

โหมดเปลี่ยนเส้นทาง

เริ่มต้นไคลเอ็นต์ที่ Google จะเปลี่ยนเส้นทางเบราว์เซอร์ของผู้ใช้ไปยัง ปลายทางการตรวจสอบสิทธิ์ แชร์รหัสการตรวจสอบสิทธิ์เป็นพารามิเตอร์ของ URL

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

โหมดป๊อปอัป

เริ่มต้นไคลเอ็นต์ที่เบราว์เซอร์ของผู้ใช้ได้รับรหัสการให้สิทธิ์ แล้วส่งไปยังเซิร์ฟเวอร์ของคุณ

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

ทริกเกอร์โฟลว์ของรหัส OAuth 2.0

เรียกใช้เมธอด requestCode() ของไคลเอ็นต์โค้ดเพื่อทริกเกอร์โฟลว์ผู้ใช้

<button onclick="client.requestCode();">Authorize with Google</button>

โดยผู้ใช้ต้องลงชื่อเข้าใช้บัญชี Google และยินยอมให้แชร์ ก่อนที่จะส่งคืนรหัสการให้สิทธิ์ให้กับ ปลายทางเปลี่ยนเส้นทางหรือเครื่องจัดการ Callback

การจัดการรหัสการให้สิทธิ์

Google จะสร้างรหัสการให้สิทธิ์ที่ไม่ซ้ำกันสำหรับผู้ใช้แต่ละคน ซึ่งคุณจะได้รับและ ยืนยันในเซิร์ฟเวอร์แบ็กเอนด์

สำหรับโหมดป๊อปอัป เครื่องจัดการที่ระบุโดย callback และกำลังทำงานใน จะส่งต่อรหัสการให้สิทธิ์ไปยังปลายทางที่โฮสต์โดยแพลตฟอร์มของคุณ

สำหรับโหมดเปลี่ยนเส้นทาง คำขอ GET จะส่งไปยังปลายทางที่ระบุโดย redirect_url กำลังแชร์รหัสการให้สิทธิ์ในพารามิเตอร์ code ของ URL ถึง รับรหัสการให้สิทธิ์

• สร้างปลายทางการให้สิทธิ์ใหม่หากยังไม่มี หรือ

• อัปเดตปลายทางที่มีอยู่เพื่อยอมรับคำขอและ URL ของ GET พารามิเตอร์ ก่อนหน้านี้คำขอ PUT ที่มีค่ารหัสการให้สิทธิ์ใน มีการใช้เพย์โหลด

ปลายทางการให้สิทธิ์

ปลายทางของรหัสการให้สิทธิ์ต้องจัดการคำขอ GET ที่มีการค้นหา URL เหล่านี้ พารามิเตอร์สตริง:

ชื่อ	ค่า
ผู้ใช้การตรวจสอบสิทธิ์	คำขอการตรวจสอบสิทธิ์การลงชื่อเข้าใช้ของผู้ใช้
รหัส	รหัสการให้สิทธิ์ OAuth2 ที่ Google สร้างขึ้น
HD	โดเมนที่โฮสต์ของบัญชีผู้ใช้
ข้อความแจ้ง	กล่องโต้ตอบความยินยอมของผู้ใช้
ขอบเขต	รายการขอบเขต OAuth2 อย่างน้อย 1 รายการที่คั่นด้วยช่องว่างที่จะให้สิทธิ์
รัฐ	ตัวแปรสถานะ CRSF

ตัวอย่างคำขอ GET ที่มีพารามิเตอร์ของ URL ไปยังปลายทางชื่อ auth-code และ โฮสต์โดย example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

เมื่อขั้นตอนรหัสการให้สิทธิ์เริ่มทำงานโดยไลบรารี JavaScript ก่อนหน้านี้ หรือการโทรโดยตรงไปยังปลายทาง Google OAuth 2.0 จะใช้คำขอ POST

ตัวอย่างคำขอ POST ที่มีรหัสการให้สิทธิ์เป็นเพย์โหลดใน เนื้อหาคำขอ HTTP:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

สำคัญ: ก่อนหน้านี้ใช้ POST สำหรับคำขอ อัปเดตเครื่องจัดการเป็น ยอมรับทั้งคำขอ GET และ POST หรือลองโฮสต์คำขอ 2 รายการที่ต่างกัน ปลายทางหากคุณวางแผนที่จะใช้ไลบรารี JS รุ่นเก่าต่อไปหรือเรียกใช้โดยตรง อุปกรณ์ปลายทาง Google OAuth 2.0 ขณะใช้ไลบรารี Google Identity Services

ตรวจสอบคำขอ

ในเซิร์ฟเวอร์ของคุณ ให้ทำดังนี้เพื่อช่วยหลีกเลี่ยงการโจมตีแบบ CSRF

ตรวจสอบค่าของพารามิเตอร์ state สําหรับโหมดการเปลี่ยนเส้นทาง

ตรวจสอบการตั้งค่าส่วนหัว X-Requested-With: XmlHttpRequest สำหรับโหมดป๊อปอัป

จากนั้นคุณควรขอรับโทเค็นการรีเฟรชและเข้าถึงจาก Google ต่อเมื่อคุณยืนยันคำขอรหัสการให้สิทธิ์แล้วเท่านั้น

รับสิทธิ์เข้าถึงและรีเฟรชโทเค็น

หลังจากแพลตฟอร์มแบ็กเอนด์ได้รับรหัสการให้สิทธิ์จาก Google และ ยืนยันคำขอ ให้ใช้รหัสการตรวจสอบสิทธิ์เพื่อรับสิทธิ์เข้าถึงและรีเฟรชโทเค็นจาก Google เพื่อเรียก API

ทำตามคำแนะนำโดยเริ่มต้นที่ขั้นตอนที่ 5: แลกเปลี่ยนรหัสการให้สิทธิ์สำหรับ รีเฟรชและเข้าถึงโทเค็นของการใช้ OAuth 2.0 สำหรับเว็บเซิร์ฟเวอร์ คู่มือการสมัคร

การจัดการโทเค็น

แพลตฟอร์มของคุณจะจัดเก็บโทเค็นการรีเฟรชไว้อย่างปลอดภัย ลบโทเค็นการรีเฟรชที่เก็บไว้เมื่อ บัญชีผู้ใช้ถูกลบ หรือความยินยอมของผู้ใช้ถูกเพิกถอนโดย google.accounts.oauth2.revoke หรือจาก https://myaccount.google.com/permissions.

หรือคุณอาจพิจารณาใช้ RISC เพื่อปกป้องบัญชีผู้ใช้ด้วยการรวมข้ามบัญชี การปกป้อง

โดยปกติแล้ว แพลตฟอร์มแบ็กเอนด์จะเรียกใช้ Google APIs โดยใช้โทเค็นเพื่อการเข้าถึง ถ้า เว็บแอปของคุณจะเรียก Google API โดยตรงจากเบราว์เซอร์ของผู้ใช้ที่คุณ ต้องหาวิธีแชร์โทเค็นเพื่อการเข้าถึงกับเว็บแอปพลิเคชัน ดังนั้น จึงอยู่นอกขอบเขตของคู่มือนี้ เมื่อทำตามแนวทางนี้และใช้ ไลบรารีของไคลเอ็นต์ Google API สำหรับ JavaScript ใช้ gapi.client.SetToken() เพื่อจัดเก็บโทเค็นเพื่อการเข้าถึงในเบราว์เซอร์ชั่วคราว หน่วยความจำ และทำให้ไลบรารีสามารถเรียกใช้ Google APIs