ตั้งค่า

ก่อนที่จะเพิ่มฟีเจอร์ลงชื่อเข้าใช้ด้วย 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

กำหนดค่าหน้าจอขอความยินยอม OAuth

การตรวจสอบสิทธิ์ทั้งสำหรับฟีเจอร์ลงชื่อเข้าใช้ด้วย 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 ให้ใช้ Authorized Domains เพื่อปกป้องคุณและผู้ใช้ ลิงก์ของแอปพลิเคชันต้องโฮสต์บนโดเมนที่ได้รับอนุญาต ดูข้อมูลเพิ่มเติม

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

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

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

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

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

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

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

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

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

หลีกเลี่ยงการแสดง 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

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