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

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

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

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

ข้อกำหนดเบื้องต้น

ทําตามขั้นตอนที่อธิบายไว้ในการตั้งค่าเพื่อกําหนดค่าหน้าจอขอความยินยอม OAuth รับรหัสไคลเอ็นต์ และโหลดไลบรารีไคลเอ็นต์

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

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

ป้องกัน CSRF

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

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

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

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

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

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

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

ชื่อ ค่า
authuser คำขอการตรวจสอบสิทธิ์การลงชื่อเข้าใช้ของผู้ใช้
รหัส รหัสการให้สิทธิ์ 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 เวอร์ชันเก่าหรือการเรียกใช้ปลายทาง OAuth 2.0 ของ Google โดยตรงเริ่มต้นขั้นตอนการขอรหัสการให้สิทธิ์ ระบบจะใช้คำขอ 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: เปลี่ยนรหัสการให้สิทธิ์เป็นโทเค็นรีเฟรชและโทเค็นการเข้าถึงของคู่มือการใช้ OAuth 2.0 สําหรับแอปพลิเคชันเว็บเซิร์ฟเวอร์

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

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

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

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