ตั้งค่า

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

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

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

  1. เปิดหน้าข้อมูลเข้าสู่ระบบของคอนโซล Google API
  2. สร้างหรือเลือกโปรเจ็กต์ Google APIs หากคุณมีโปรเจ็กต์สำหรับปุ่มลงชื่อเข้าใช้ด้วย Google หรือ Google One Tap อยู่แล้ว ให้ใช้โปรเจ็กต์ที่มีอยู่และรหัสไคลเอ็นต์เว็บ เมื่อสร้างแอปพลิเคชันเวอร์ชันที่ใช้งานจริง คุณอาจต้องใช้โปรเจ็กต์หลายรายการ ให้ทำตามขั้นตอนที่เหลือในส่วนนี้ซ้ำสำหรับแต่ละโปรเจ็กต์ที่คุณจัดการ
  3. คลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth และเลือกเว็บแอปพลิเคชันสำหรับประเภทแอปพลิเคชันเพื่อสร้างรหัสไคลเอ็นต์ใหม่ หากต้องการใช้รหัสไคลเอ็นต์ที่มีอยู่ ให้เลือกประเภทเว็บแอปพลิเคชัน

  4. เพิ่ม URI ของเว็บไซต์ไปยังต้นทาง JavaScript ที่ได้รับอนุญาต URI รวมเฉพาะรูปแบบและชื่อโฮสต์ที่ตรงตามเกณฑ์ทั้งหมดเท่านั้น เช่น https://www.example.com

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

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

  1. เปิดหน้าหน้าจอขอความยินยอม OAuth ของส่วน API และบริการใน Google Developers 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 ระหว่างการลงชื่อเข้าใช้

แตะครั้งเดียวโดยใช้ FedCM

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

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

แตะครั้งเดียวโดยไม่มี FedCM

การตั้งค่าความยินยอม OAuth ตามที่แสดงด้วยการแตะเพียงครั้งเดียว

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

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

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

แม้ว่าการดำเนินการนี้ไม่บังคับ แต่นโยบายรักษาความปลอดภัยเนื้อหา แนะนำให้ใช้เพื่อรักษาความปลอดภัยของแอปและป้องกันการเขียนสคริปต์ข้ามเว็บไซต์ (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 ของปุ่ม One Tap และปุ่มลงชื่อเข้าใช้ด้วย Google
  • คำสั่ง script-src เพิ่ม https://accounts.google.com/gsi/client ไปยัง อนุญาต URL ของไลบรารี JavaScript ของบริการ Google Identity
  • คำสั่ง style-src ให้เพิ่ม https://accounts.google.com/gsi/style เพื่ออนุญาต URL ของสไตล์ชีตบริการระบุตัวตนของ Google
  • คำสั่ง 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 โหลดและดำเนินการได้สําเร็จ

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

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