ก่อนเพิ่มฟีเจอร์ลงชื่อเข้าใช้ด้วย Google, One Tap หรือการลงชื่อเข้าใช้อัตโนมัติลงในเว็บไซต์ ให้ตั้งค่าการกำหนดค่า OAuth และกำหนดค่านโยบายรักษาความปลอดภัยเนื้อหาของเว็บไซต์ (ไม่บังคับ)
รับรหัสไคลเอ็นต์ของ Google API
หากต้องการเปิดใช้ "ลงชื่อเข้าใช้ด้วย Google" ในเว็บไซต์ คุณต้องตั้งค่ารหัสไคลเอ็นต์ Google API ก่อน โดยทำตามขั้นตอนต่อไปนี้
- เปิดหน้าข้อมูลเข้าสู่ระบบของคอนโซล Google APIs
- สร้างหรือเลือกโปรเจ็กต์ Google APIs หากคุณมีโปรเจ็กต์สำหรับปุ่ม "ลงชื่อเข้าใช้ด้วย Google" หรือ Google One Tap อยู่แล้ว ให้ใช้โปรเจ็กต์และรหัสไคลเอ็นต์ของเว็บที่มีอยู่ เมื่อสร้างแอปพลิเคชันเวอร์ชันที่ใช้งานจริง อาจต้องใช้หลายโปรเจ็กต์ ให้ทำตามขั้นตอนที่เหลือของส่วนนี้สำหรับแต่ละโปรเจ็กต์ที่คุณจัดการ
- คลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth และสำหรับประเภทแอปพลิเคชัน ให้เลือกเว็บแอปพลิเคชันเพื่อสร้างรหัสไคลเอ็นต์ใหม่ หากต้องการใช้รหัสไคลเอ็นต์ที่มีอยู่ ให้เลือกเว็บแอปพลิเคชันประเภทใดประเภทหนึ่ง
เพิ่ม URI ของเว็บไซต์ลงในต้นทาง JavaScript ที่ได้รับอนุญาต URI จะมีเฉพาะรูปแบบและชื่อโฮสต์ที่ตรงตามเกณฑ์ทั้งหมดเท่านั้น ตัวอย่างเช่น
https://www.example.com
(ไม่บังคับ) ระบบอาจส่งคืนข้อมูลเข้าสู่ระบบโดยใช้การเปลี่ยนเส้นทางไปยังปลายทางที่คุณโฮสต์แทนผ่านโค้ดเรียกกลับของ JavaScript ในกรณีนี้ ให้เพิ่ม URI การเปลี่ยนเส้นทางลงใน URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต URI การเปลี่ยนเส้นทางประกอบด้วยรูปแบบ ชื่อโฮสต์ที่ตรงตามเกณฑ์ทั้งหมด และเส้นทาง และต้องเป็นไปตามกฎการตรวจสอบ URI การเปลี่ยนเส้นทาง ตัวอย่างเช่น
https://www.example.com/auth-receiver
กำหนดค่าหน้าจอคำยินยอม OAuth
ทั้งการตรวจสอบสิทธิ์ฟีเจอร์ลงชื่อเข้าใช้ด้วย Google และ One Tap จะมีหน้าจอขอความยินยอมที่แจ้งให้ผู้ใช้ทราบแอปพลิเคชันที่ขอเข้าถึงข้อมูล ประเภทของข้อมูลที่ผู้ใช้ขอ และข้อกำหนดที่เกี่ยวข้อง
- เปิดหน้าหน้าจอขอความยินยอม OAuth ของส่วน API และบริการของ Google Developer Console
- เมื่อได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์ที่คุณเพิ่งสร้าง
ในหน้า "หน้าจอคำยินยอม OAuth" ให้กรอกแบบฟอร์มแล้วคลิกปุ่ม "บันทึก"
ชื่อแอปพลิเคชัน: ชื่อแอปพลิเคชันที่ขอความยินยอม ชื่อควรสื่อถึงแอปพลิเคชันของคุณอย่างถูกต้องและสอดคล้องกับชื่อแอปพลิเคชันที่ผู้ใช้เห็นที่อื่น
โลโก้แอปพลิเคชัน: รูปภาพนี้จะแสดงบนหน้าจอคำยินยอมเพื่อช่วยให้ผู้ใช้จดจำแอปของคุณได้ โลโก้จะแสดงในหน้าจอคำยินยอม "ลงชื่อเข้าใช้ด้วย Google" และในการตั้งค่าบัญชี แต่จะไม่แสดงในกล่องโต้ตอบ One Tap
อีเมลสนับสนุน: แสดงในหน้าจอคำยินยอมสำหรับการสนับสนุนผู้ใช้และผู้ดูแลระบบ G Suite กำลังประเมินการเข้าถึงแอปพลิเคชันของผู้ใช้ ที่อยู่อีเมลนี้จะแสดงต่อผู้ใช้ในหน้าจอคำยินยอม "ลงชื่อเข้าใช้ด้วย Google" เมื่อผู้ใช้คลิกชื่อแอปพลิเคชัน
ขอบเขตสำหรับ Google APIs: ขอบเขตช่วยให้แอปพลิเคชันเข้าถึงข้อมูลส่วนตัวของผู้ใช้ได้ สำหรับการตรวจสอบสิทธิ์ ขอบเขตเริ่มต้น (อีเมล, โปรไฟล์, openid) ก็เพียงพอแล้ว คุณไม่จำเป็นต้องเพิ่มขอบเขตที่ละเอียดอ่อนใดๆ โดยทั่วไปแล้ว แนวทางปฏิบัติแนะนำคือให้ขอขอบเขตเพิ่มขึ้นเรื่อยๆ เมื่อจำเป็นต้องเข้าถึงเวลาแทนที่จะขอตั้งแต่แรก ดูข้อมูลเพิ่มเติม
โดเมนที่ได้รับอนุญาต: Google อนุญาตเฉพาะแอปพลิเคชันที่ตรวจสอบสิทธิ์โดยใช้ OAuth ให้ใช้โดเมนที่ได้รับอนุญาตเพื่อปกป้องคุณและผู้ใช้ ลิงก์ของแอปพลิเคชันต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต ดูข้อมูลเพิ่มเติม
ลิงก์หน้าแรกของแอปพลิเคชัน: แสดงอยู่ในหน้าจอขอความยินยอม "ลงชื่อเข้าใช้ด้วย Google" และข้อมูลข้อจำกัดความรับผิดที่ปฏิบัติตามข้อกำหนด GDPR ด้วยการแตะเพียงครั้งเดียวใต้ปุ่ม "ดำเนินการต่อในชื่อ" ต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต
ลิงก์นโยบายความเป็นส่วนตัวของแอปพลิเคชัน: แสดงในหน้าจอคำยินยอม "ลงชื่อเข้าใช้ด้วย Google" และข้อมูลข้อจำกัดความรับผิดที่ปฏิบัติตามข้อกำหนด GDPR แบบแตะครั้งเดียวใต้ปุ่ม "ดำเนินการต่อในชื่อ" ต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต
ลิงก์ข้อกำหนดในการให้บริการของแอปพลิเคชัน (ไม่บังคับ): แสดงในการลงชื่อเข้าใช้ด้วยหน้าจอขอความยินยอมของ Google และข้อมูลข้อจำกัดความรับผิดที่เป็นไปตามข้อกำหนดของ GDPR ด้วยการแตะเพียงครั้งเดียวใต้ปุ่ม "ดำเนินการต่อในชื่อ" ต้องโฮสต์อยู่ในโดเมนที่ได้รับอนุญาต
ตรวจสอบ "สถานะการยืนยัน" หากใบสมัครของคุณต้องมีการยืนยัน ให้คลิกปุ่ม "ส่งสำหรับการยืนยัน" เพื่อส่งใบสมัครของคุณเพื่อรับการยืนยัน โปรดดูรายละเอียดที่ข้อกำหนดการยืนยัน OAuth
แสดงการตั้งค่า OAuth ระหว่างการลงชื่อเข้าใช้
One Tap โดยใช้ FedCM
โดเมนที่ได้รับอนุญาตระดับบนสุดจะแสดงระหว่างที่ผู้ใช้ให้ความยินยอมใน Chrome
One Tap โดยไม่มี FedCM
ชื่อแอปพลิเคชันจะแสดงระหว่างที่ผู้ใช้ให้ความยินยอม
รูปที่ 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 Identityframe-src
ให้เพิ่มhttps://accounts.google.com/gsi/
เพื่ออนุญาต URL หลักของ iframe ของปุ่มการแตะครั้งเดียวและลงชื่อเข้าใช้ด้วย Googlescript-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
การไม่ตั้งค่าส่วนหัวที่เหมาะสมจะทำให้การสื่อสารระหว่างหน้าต่างหยุดชะงัก ส่งผลให้หน้าต่างป๊อปอัปเปล่าปรากฏขึ้นหรือข้อบกพร่องที่คล้ายกัน