ตั้งค่า

ก่อนเพิ่มฟีเจอร์ลงชื่อเข้าใช้ด้วย Google, One Tap หรือการลงชื่อเข้าใช้อัตโนมัติลงในเว็บไซต์ ให้ตั้งค่าการกำหนดค่า OAuth และกำหนดค่านโยบายรักษาความปลอดภัยเนื้อหาของเว็บไซต์ (ไม่บังคับ)

รับรหัสไคลเอ็นต์ของ Google API

หากต้องการเปิดใช้ "ลงชื่อเข้าใช้ด้วย Google" ในเว็บไซต์ คุณต้องตั้งค่ารหัสไคลเอ็นต์ Google API ก่อน โดยทำตามขั้นตอนต่อไปนี้

  1. เปิดหน้าข้อมูลเข้าสู่ระบบของคอนโซล Google APIs
  2. สร้างหรือเลือกโปรเจ็กต์ Google APIs หากคุณมีโปรเจ็กต์สำหรับปุ่ม "ลงชื่อเข้าใช้ด้วย Google" หรือ Google One Tap อยู่แล้ว ให้ใช้โปรเจ็กต์และรหัสไคลเอ็นต์ของเว็บที่มีอยู่ เมื่อสร้างแอปพลิเคชันเวอร์ชันที่ใช้งานจริง อาจต้องใช้หลายโปรเจ็กต์ ให้ทำตามขั้นตอนที่เหลือของส่วนนี้สำหรับแต่ละโปรเจ็กต์ที่คุณจัดการ
  3. คลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth และสำหรับประเภทแอปพลิเคชัน ให้เลือกเว็บแอปพลิเคชันเพื่อสร้างรหัสไคลเอ็นต์ใหม่ หากต้องการใช้รหัสไคลเอ็นต์ที่มีอยู่ ให้เลือกเว็บแอปพลิเคชันประเภทใดประเภทหนึ่ง
  4. เพิ่ม URI ของเว็บไซต์ลงในต้นทาง JavaScript ที่ได้รับอนุญาต URI จะมีเฉพาะรูปแบบและชื่อโฮสต์ที่ตรงตามเกณฑ์ทั้งหมดเท่านั้น ตัวอย่างเช่น https://www.example.com

  5. (ไม่บังคับ) ระบบอาจส่งคืนข้อมูลเข้าสู่ระบบโดยใช้การเปลี่ยนเส้นทางไปยังปลายทางที่คุณโฮสต์แทนผ่านโค้ดเรียกกลับของ JavaScript ในกรณีนี้ ให้เพิ่ม URI การเปลี่ยนเส้นทางลงใน URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต URI การเปลี่ยนเส้นทางประกอบด้วยรูปแบบ ชื่อโฮสต์ที่ตรงตามเกณฑ์ทั้งหมด และเส้นทาง และต้องเป็นไปตามกฎการตรวจสอบ URI การเปลี่ยนเส้นทาง ตัวอย่างเช่น https://www.example.com/auth-receiver

ทั้งการตรวจสอบสิทธิ์ฟีเจอร์ลงชื่อเข้าใช้ด้วย Google และ One Tap จะมีหน้าจอขอความยินยอมที่แจ้งให้ผู้ใช้ทราบแอปพลิเคชันที่ขอเข้าถึงข้อมูล ประเภทของข้อมูลที่ผู้ใช้ขอ และข้อกำหนดที่เกี่ยวข้อง

  1. เปิดหน้าหน้าจอขอความยินยอม OAuth ของส่วน API และบริการของ Google Developer Console
  2. เมื่อได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์ที่คุณเพิ่งสร้าง
  3. ในหน้า "หน้าจอคำยินยอม OAuth" ให้กรอกแบบฟอร์มแล้วคลิกปุ่ม "บันทึก"

    1. ชื่อแอปพลิเคชัน: ชื่อแอปพลิเคชันที่ขอความยินยอม ชื่อควรสื่อถึงแอปพลิเคชันของคุณอย่างถูกต้องและสอดคล้องกับชื่อแอปพลิเคชันที่ผู้ใช้เห็นที่อื่น

    2. โลโก้แอปพลิเคชัน: รูปภาพนี้จะแสดงบนหน้าจอคำยินยอมเพื่อช่วยให้ผู้ใช้จดจำแอปของคุณได้ โลโก้จะแสดงในหน้าจอคำยินยอม "ลงชื่อเข้าใช้ด้วย Google" และในการตั้งค่าบัญชี แต่จะไม่แสดงในกล่องโต้ตอบ One Tap

    3. อีเมลสนับสนุน: แสดงในหน้าจอคำยินยอมสำหรับการสนับสนุนผู้ใช้และผู้ดูแลระบบ G Suite กำลังประเมินการเข้าถึงแอปพลิเคชันของผู้ใช้ ที่อยู่อีเมลนี้จะแสดงต่อผู้ใช้ในหน้าจอคำยินยอม "ลงชื่อเข้าใช้ด้วย Google" เมื่อผู้ใช้คลิกชื่อแอปพลิเคชัน

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

    5. โดเมนที่ได้รับอนุญาต: Google อนุญาตเฉพาะแอปพลิเคชันที่ตรวจสอบสิทธิ์โดยใช้ OAuth ให้ใช้โดเมนที่ได้รับอนุญาตเพื่อปกป้องคุณและผู้ใช้ ลิงก์ของแอปพลิเคชันต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต ดูข้อมูลเพิ่มเติม

    6. ลิงก์หน้าแรกของแอปพลิเคชัน: แสดงอยู่ในหน้าจอขอความยินยอม "ลงชื่อเข้าใช้ด้วย Google" และข้อมูลข้อจำกัดความรับผิดที่ปฏิบัติตามข้อกำหนด GDPR ด้วยการแตะเพียงครั้งเดียวใต้ปุ่ม "ดำเนินการต่อในชื่อ" ต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต

    7. ลิงก์นโยบายความเป็นส่วนตัวของแอปพลิเคชัน: แสดงในหน้าจอคำยินยอม "ลงชื่อเข้าใช้ด้วย Google" และข้อมูลข้อจำกัดความรับผิดที่ปฏิบัติตามข้อกำหนด GDPR แบบแตะครั้งเดียวใต้ปุ่ม "ดำเนินการต่อในชื่อ" ต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต

    8. ลิงก์ข้อกำหนดในการให้บริการของแอปพลิเคชัน (ไม่บังคับ): แสดงในการลงชื่อเข้าใช้ด้วยหน้าจอขอความยินยอมของ Google และข้อมูลข้อจำกัดความรับผิดที่เป็นไปตามข้อกำหนดของ GDPR ด้วยการแตะเพียงครั้งเดียวใต้ปุ่ม "ดำเนินการต่อในชื่อ" ต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต

  4. ตรวจสอบ "สถานะการยืนยัน" หากใบสมัครของคุณต้องมีการยืนยัน ให้คลิกปุ่ม "ส่งสำหรับการยืนยัน" เพื่อส่งใบสมัครของคุณเพื่อรับการยืนยัน โปรดดูรายละเอียดที่ข้อกำหนดการยืนยัน OAuth

แสดงการตั้งค่า OAuth ระหว่างการลงชื่อเข้าใช้

One Tap โดยใช้ FedCM

การตั้งค่าความยินยอม OAuth ที่แสดงโดย Chrome One Tap โดยใช้ FedCM

โดเมนที่ได้รับอนุญาตระดับบนสุดจะแสดงระหว่างที่ผู้ใช้ให้ความยินยอมใน Chrome

One Tap โดยไม่มี FedCM

การตั้งค่าความยินยอม OAuth ที่แสดงโดย One Tap

ชื่อแอปพลิเคชันจะแสดงระหว่างที่ผู้ใช้ให้ความยินยอม

รูปที่ 1 การตั้งค่าความยินยอม OAuth ที่แสดงโดย One Tap ใน Chrome

นโยบายรักษาความปลอดภัยเนื้อหา

แม้ว่าเราจะไม่บังคับ แต่ขอแนะนำนโยบายรักษาความปลอดภัยเนื้อหาเพื่อรักษาความปลอดภัยของแอปและป้องกันการโจมตีแบบ Cross-site Scripting (XSS) ดูข้อมูลเพิ่มเติมได้ในข้อมูลเบื้องต้นเกี่ยวกับ CSP และ CSP และ XSS

นโยบายรักษาความปลอดภัยเนื้อหาอาจมีคำสั่งอย่างน้อย 1 รายการ เช่น connect-src, frame-src, script-src, style-src หรือ default-src

หาก CSP มีข้อมูลต่อไปนี้

  • connect-src ให้เพิ่ม https://accounts.google.com/gsi/ เพื่ออนุญาตให้หน้าเว็บโหลด URL ระดับบนสุดสำหรับปลายทางฝั่งเซิร์ฟเวอร์ของบริการ Google Identity
  • frame-src ให้เพิ่ม https://accounts.google.com/gsi/ เพื่ออนุญาต URL หลักของ iframe ของปุ่มการแตะครั้งเดียวและลงชื่อเข้าใช้ด้วย Google
  • script-src ให้เพิ่ม https://accounts.google.com/gsi/client เพื่ออนุญาต URL ของไลบรารี JavaScript ของ Google Identity Services
  • คำสั่ง style-src ให้เพิ่ม https://accounts.google.com/gsi/style เพื่ออนุญาต URL ของสไตล์ชีตของบริการ Google Identity
  • หากใช้คำสั่ง default-src ให้แสดงคำสั่งสำรองหากไม่ได้ระบุคำสั่งก่อนหน้า (connect-src, frame-src, script-src หรือ style-src) ให้เพิ่ม https://accounts.google.com/gsi/ เพื่ออนุญาตให้หน้าโหลด URL ระดับบนสุดสำหรับปลายทางฝั่งเซิร์ฟเวอร์ของบริการ Google Identity

หลีกเลี่ยงการแสดง URL ของ GIS ทีละรายการเมื่อใช้ connect-src ซึ่งช่วยลดความล้มเหลวเมื่ออัปเดต GIS ตัวอย่างเช่น แทนที่จะเพิ่ม https://accounts.google.com/gsi/status ให้ใช้ URL หลักของ GIS https://accounts.google.com/gsi/

ตัวอย่างส่วนหัวการตอบกลับนี้ทำให้บริการ Google Identity โหลดและดำเนินการได้สำเร็จ

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

นโยบายเครื่องมือเปิดแบบข้ามต้นทาง

คุณอาจต้องเปลี่ยนแปลงปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และ Google One Tap ใน Cross-Origin-Opener-Policy (COOP) เพื่อสร้างป๊อปอัปให้สำเร็จ

เมื่อเปิดใช้ FedCM เบราว์เซอร์จะแสดงป๊อปอัปโดยตรงและไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ

อย่างไรก็ตาม เมื่อปิด FedCM ให้ตั้งค่าส่วนหัว COOP ดังนี้

  • ถึง same-origin และ
  • รวม same-origin-allow-popups

การไม่ตั้งค่าส่วนหัวที่เหมาะสมจะทำให้การสื่อสารระหว่างหน้าต่างหยุดชะงัก ส่งผลให้หน้าต่างป๊อปอัปเปล่าปรากฏขึ้นหรือข้อบกพร่องที่คล้ายกัน