ตั้งค่า

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

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

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

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

  1. เปิด ของ
  2. สร้างหรือเลือก โปรเจ็กต์ หากคุณมีโปรเจ็กต์สำหรับปุ่มลงชื่อเข้าใช้ด้วย 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

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

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

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

One Tap ที่ไม่มี FedCM

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

ชื่อแอปพลิเคชันจะแสดงขึ้นในระหว่างความยินยอมของผู้ใช้

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

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

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

<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
  • คำสั่ง 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

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