ตั้งค่า

หากต้องการให้สิทธิ์เข้าถึง Google APIs ในเว็บแอปโดยใช้ไลบรารี JavaScript ของ Google Identity Services (google.accounts.oauth2) คุณต้องทำดังนี้ก่อน

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

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

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

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

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

5. หากคุณใช้รูปแบบรหัสการให้สิทธิ์กับ ux_mode: 'redirect' (หรือแลกเปลี่ยนรหัสการให้สิทธิ์ที่ปลายทางแบ็กเอนด์) ให้เพิ่ม URI การเปลี่ยนเส้นทางลงใน URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต URI การเปลี่ยนเส้นทางประกอบด้วยรูปแบบ ชื่อโฮสต์ที่สมบูรณ์ในตัวเอง และเส้นทาง และต้องเป็นไปตามกฎการตรวจสอบ URI การเปลี่ยนเส้นทาง เช่น https://www.example.com/oauth2callback

หลังจากกำหนดค่าเสร็จแล้ว ให้จดรหัสไคลเอ็นต์ที่สร้างขึ้นไว้ คุณจะส่งค่านี้ในพร็อพเพอร์ตี้ client_id เมื่อเริ่มต้น initCodeClient() หรือ initTokenClient() (ระบบจะสร้างรหัสลับไคลเอ็นต์ด้วย ซึ่งคุณต้องเก็บเป็นความลับและใช้สำหรับการดำเนินการแลกเปลี่ยนโทเค็นฝั่งเซิร์ฟเวอร์เท่านั้น)

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

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

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

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

หากเว็บแอปพลิเคชันของคุณบังคับใช้นโยบายรักษาความปลอดภัยเนื้อหา (CSP) ให้อนุญาตต้นทางของ Google Identity Services ต่อไปนี้

• script-src: https://accounts.google.com/gsi/client
• frame-src: https://accounts.google.com/gsi/
• connect-src: https://accounts.google.com/gsi/

สำหรับขั้นตอนการให้สิทธิ์แบบป๊อปอัป (initTokenClient หรือ initCodeClient ที่มี ux_mode: 'popup') ให้กำหนดค่าส่วนหัวการตอบกลับ HTTP Cross-Origin-Opener-Policy (COOP) เป็น same-origin-allow-popups เพื่อให้หน้าต่างกล่องโต้ตอบสามารถสื่อสารการตอบกลับการให้สิทธิ์กลับไปยังหน้าเว็บของคุณได้

ขั้นตอนถัดไป

จากนั้นโหลดไลบรารีของไคลเอ็นต์ในหน้าเว็บเพื่อเริ่มเริ่มต้นไคลเอ็นต์การให้สิทธิ์