ตั้งค่า

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

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

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

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

3. ในหน้า "หน้าจอขอความยินยอม OAuth" ให้กรอกแบบฟอร์มแล้วคลิกปุ่ม "บันทึก"

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

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

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

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

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

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

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

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

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

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

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

หลีกเลี่ยงการระบุ 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

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