ตั้งค่า

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

1. รับรหัสไคลเอ็นต์ OAuth 2.0
2. กำหนดค่าการสร้างแบรนด์และการตั้งค่า OAuth
3. โหลดไลบรารีของไคลเอ็นต์ Google Identity Services และ
4. ตั้งค่านโยบายรักษาความปลอดภัยเนื้อหา (ไม่บังคับ) และ
5. อัปเดตนโยบายเครื่องมือเปิดแบบข้ามต้นทาง

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

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

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

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

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

ใส่รหัสไคลเอ็นต์ในเว็บแอปโดยใช้ช่อง data-client_id หรือ client_id

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

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

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

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

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

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

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

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

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

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

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

4. ไปที่หน้าการเข้าถึงข้อมูลเพื่อกำหนดค่า ขอบเขตสำหรับแอป

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

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

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

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

โหลดไลบรารีของไคลเอ็นต์

อย่าลืมโหลดไลบรารีของไคลเอ็นต์ของ Google Identity Services ในหน้าเว็บที่ผู้ใช้อาจลงชื่อเข้าใช้ ใช้ข้อมูลโค้ดต่อไปนี้

<script src="https://accounts.google.com/gsi/client" async></script>

คุณเพิ่มประสิทธิภาพความเร็วในการโหลดหน้าเว็บได้หากโหลดสคริปต์ด้วยแอตทริบิวต์ async

ดูรายการเมธอดและพร็อพเพอร์ตี้ที่ไลบรารีรองรับได้ในข้อมูลอ้างอิง API ของ HTML และ JavaScript

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

แม้ว่านโยบายรักษาความปลอดภัยเนื้อหาจะไม่บังคับ แต่เราขอแนะนำให้ใช้เพื่อรักษาความปลอดภัยของแอปและป้องกันการโจมตี 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 Identity Services
• หากใช้คําสั่ง 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 Identity Services โหลดและดำเนินการได้สำเร็จ

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

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