ตั้งค่า

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

หมายเหตุ: คุณต้องมีรหัสไคลเอ็นต์เพื่อกำหนดค่าฟีเจอร์ลงชื่อเข้าใช้ด้วย Google และเพื่อยืนยันโทเค็นระบุตัวตนในแบ็กเอนด์ รหัสไคลเอ็นต์มีลักษณะดังนี้ ตัวอย่าง: 1234567890-abc123def456.apps.googleusercontent.com

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

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

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

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

   ประเด็นสำคัญ: สำหรับการทดสอบหรือการพัฒนาในเครื่อง ให้เพิ่มทั้ง http://localhost และ http://localhost:<port_number>
   ประเด็นสำคัญ: Google One Tap จะแสดงในโดเมน HTTPS เท่านั้น

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

ประเด็นสำคัญ: เมื่อทดสอบโดยใช้ http และ localhost ให้ตั้งค่าส่วนหัว Referrer-Policy ในเว็บแอปเป็น Referrer-Policy: no-referrer-when-downgrade

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

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

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

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

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

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

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

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

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

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

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

4. ไปที่ เพื่อกําหนดค่าขอบเขตสําหรับแอป

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

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

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

One Tap โดยใช้ FedCM

โดเมนที่ได้รับอนุญาตระดับบนสุดจะแสดงขึ้นระหว่างที่ผู้ใช้ให้ความยินยอมใน Chrome เฉพาะการใช้ One Tap ใน iframe แบบข้ามต้นทางแต่ในเว็บไซต์เดียวกันเท่านั้นที่เป็นวิธีที่รองรับ

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 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 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

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