ตั้งค่า

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

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

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

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

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

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

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

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

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

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

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

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

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

One Tap

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

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

แตะครั้งเดียวโดยใช้ FedCM

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

โดเมนที่ได้รับสิทธิ์ระดับบนสุดจะแสดงระหว่างที่ผู้ใช้ให้ความยินยอมใน Chrome

รูปที่ 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 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

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