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

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

สรุปขั้นตอนรหัสการให้สิทธิ์ OAuth 2.0:

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

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

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

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

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

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

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

การป้องกันการโจมตี 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"
});

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

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 และยินยอมให้แชร์ขอบเขตแต่ละรายการ ก่อนที่จะแสดงรหัสการให้สิทธิ์ไปยังปลายทางการเปลี่ยนเส้นทางหรือเครื่องจัดการเรียกกลับ

การจัดการรหัสการตรวจสอบสิทธิ์

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

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

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

  • สร้างปลายทางการให้สิทธิ์ใหม่หากคุณยังไม่มีการติดตั้งใช้งานอยู่ หรือ

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

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

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

ชื่อ ค่า
ผู้ใช้ตรวจสอบสิทธิ์ คำขอการตรวจสอบสิทธิ์การลงชื่อเข้าใช้ของผู้ใช้
รหัส รหัสการให้สิทธิ์ OAuth2 ที่สร้างโดย Google
HD โดเมนที่ฝากบริการของบัญชีผู้ใช้
ข้อความแจ้ง กล่องโต้ตอบความยินยอมของผู้ใช้
ขอบเขต รายการขอบเขต OAuth2 อย่างน้อย 1 รายการที่จะได้รับอนุญาตโดยคั่นด้วยการเว้นวรรค
state ตัวแปรสถานะ 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

ตรวจสอบคำขอ

ดำเนินการดังต่อไปนี้ในเซิร์ฟเวอร์เพื่อหลีกเลี่ยงการโจมตี CSRF

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

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

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

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

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

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

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

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

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

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