ไลบรารี Google Identity Services ช่วยให้ผู้ใช้ขอรหัสการให้สิทธิ์จาก Google โดยใช้กระบวนการป๊อปอัปตามเบราว์เซอร์หรือเปลี่ยนเส้นทาง UX ซึ่งจะเป็นการเริ่มขั้นตอน OAuth 2.0 ที่ปลอดภัยและทำให้เกิดโทเค็นเพื่อการเข้าถึงที่ใช้เรียก Google API ในนามของผู้ใช้
สรุปขั้นตอนรหัสการให้สิทธิ์ OAuth 2.0:
- จากเบราว์เซอร์ที่แสดงท่าทางสัมผัส เช่น การคลิกปุ่ม เจ้าของบัญชี Google จะขอรหัสการให้สิทธิ์จาก Google
- Google จะตอบสนองด้วยการส่งรหัสการให้สิทธิ์ที่ไม่ซ้ำกันไปยังโค้ดเรียกกลับในเว็บแอป JavaScript ที่ทำงานในเบราว์เซอร์ของผู้ใช้ หรือเรียกใช้ปลายทางของรหัสการให้สิทธิ์โดยตรงด้วยการเปลี่ยนเส้นทางเบราว์เซอร์
- แพลตฟอร์มแบ็กเอนด์จะโฮสต์ปลายทางของรหัสการให้สิทธิ์และรับรหัส หลังจากการตรวจสอบแล้ว ระบบจะแลกเปลี่ยนโค้ดนี้ตามสิทธิ์เข้าถึงของผู้ใช้ และรีเฟรชโทเค็นโดยใช้คำขอที่ส่งไปยังปลายทางโทเค็นของ Google
- Google จะตรวจสอบรหัสการให้สิทธิ์ ยืนยันคำขอที่มาจากแพลตฟอร์มที่ปลอดภัยของคุณ ออกโทเค็นเพื่อการเข้าถึงและรีเฟรช และแสดงผลโทเค็นโดยเรียกใช้ปลายทางการเข้าสู่ระบบที่แพลตฟอร์มของคุณโฮสต์
- ปลายทางการเข้าสู่ระบบจะได้รับโทเค็นเพื่อการเข้าถึงและรีเฟรช ซึ่งจะจัดเก็บโทเค็นการรีเฟรชไว้อย่างปลอดภัยเพื่อใช้ในภายหลัง
เริ่มต้นไคลเอ็นต์โค้ด
เมธอด google.accounts.oauth2.initCodeClient()
จะเริ่มต้นไคลเอ็นต์โค้ด
โหมดป๊อปอัปหรือโหมดเปลี่ยนเส้นทาง
คุณสามารถเลือกแชร์รหัสการให้สิทธิ์โดยใช้โฟลว์ผู้ใช้ในโหมดเปลี่ยนเส้นทางหรือป๊อปอัป เมื่อใช้โหมดเปลี่ยนเส้นทาง คุณจะโฮสต์ปลายทางการให้สิทธิ์ OAuth2 บนเซิร์ฟเวอร์และ Google จะเปลี่ยนเส้นทาง User Agent ไปยังปลายทางนี้ โดยแชร์รหัสการให้สิทธิ์เป็นพารามิเตอร์ของ URL สำหรับโหมดป๊อปอัป คุณจะกำหนดเครื่องจัดการโค้ดเรียกกลับ JavaScript ซึ่งจะส่งรหัสการให้สิทธิ์ไปยังเซิร์ฟเวอร์ของคุณ คุณสามารถใช้โหมดป๊อปอัปเพื่อมอบประสบการณ์ของผู้ใช้ที่ราบรื่นโดยที่ผู้เข้าชมไม่ต้องออกจากเว็บไซต์ของคุณ
ในการเริ่มต้นไคลเอ็นต์สำหรับ
เปลี่ยนเส้นทางขั้นตอน UX โดยตั้งค่า
ux_mode
เป็นredirect
และค่าredirect_uri
ไปยังจุดสิ้นสุดรหัสการให้สิทธิ์ของแพลตฟอร์ม ค่าต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับไคลเอ็นต์ OAuth 2.0 ที่คุณกำหนดค่าไว้ในคอนโซล API ทุกประการ และต้องเป็นไปตามกฎการตรวจสอบ URI การเปลี่ยนเส้นทางด้วยขั้นตอน UX แบบป๊อปอัป ตั้งค่า
ux_mode
เป็นpopup
และค่าcallback
เป็นชื่อของฟังก์ชันที่คุณจะใช้ส่งรหัสการให้สิทธิ์ไปยังแพลตฟอร์มของคุณ
การป้องกันการโจมตี CSRF
เพื่อช่วยป้องกันการโจมตีแบบ Cross-Site-Request-Forgery (CSRF) จะใช้เทคนิคที่แตกต่างกันเล็กน้อยสำหรับโฟลว์ UX ของโหมดเปลี่ยนเส้นทางและโหมดป๊อปอัป สำหรับโหมดการเปลี่ยนเส้นทาง ระบบจะใช้พารามิเตอร์state OAuth 2.0 ดูส่วน RFC6749 10.12 การปลอมแปลงคำขอข้ามเว็บไซต์ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างและตรวจสอบพารามิเตอร์ state เมื่อใช้โหมดป๊อปอัป คุณจะเพิ่มส่วนหัว HTTP ที่กำหนดเองในคำขอ และบนเซิร์ฟเวอร์ให้ยืนยันว่าตรงกับค่าและต้นทางที่คาดไว้
เลือกโหมด UX เพื่อดูข้อมูลโค้ดที่แสดงรหัสการให้สิทธิ์และการจัดการ CSRF ดังนี้
โหมดเปลี่ยนเส้นทาง
เริ่มต้นไคลเอ็นต์ที่ Google เปลี่ยนเส้นทางเบราว์เซอร์ของผู้ใช้ไปยังปลายทางการตรวจสอบสิทธิ์และแชร์รหัสการให้สิทธิ์เป็นพารามิเตอร์ของ URL
const client = google.accounts.oauth2.initCodeClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
ux_mode: 'redirect',
redirect_uri: "https://your.domain/code_callback_endpoint",
state: "YOUR_BINDING_VALUE"
});
โหมดป๊อปอัป
เริ่มต้นไคลเอ็นต์ที่เบราว์เซอร์ของผู้ใช้ได้รับรหัสการให้สิทธิ์จาก Google และส่งไปยังเซิร์ฟเวอร์ของคุณ
const client = google.accounts.oauth2.initCodeClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
ux_mode: 'popup',
callback: (response) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', code_receiver_uri, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Set custom header for CRSF
xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
xhr.onload = function() {
console.log('Auth code response: ' + xhr.responseText);
};
xhr.send('code=' + response.code);
},
});
ทริกเกอร์โฟลว์รหัส OAuth 2.0
เรียกเมธอด requestCode()
ของไคลเอ็นต์โค้ดเพื่อทริกเกอร์โฟลว์ผู้ใช้
<button onclick="client.requestCode();">Authorize with Google</button>
ซึ่งกำหนดให้ผู้ใช้ลงชื่อเข้าใช้บัญชี Google และยินยอมให้แชร์ขอบเขตแต่ละรายการ ก่อนที่จะแสดงรหัสการให้สิทธิ์ไปยังปลายทางการเปลี่ยนเส้นทางหรือเครื่องจัดการเรียกกลับ
การจัดการรหัสการตรวจสอบสิทธิ์
Google จะสร้างรหัสการให้สิทธิ์ที่ไม่ซ้ำกันต่อผู้ใช้ 1 ราย ซึ่งคุณจะได้รับและยืนยันในเซิร์ฟเวอร์แบ็กเอนด์ของคุณ
สำหรับโหมดป๊อปอัป เครื่องจัดการที่ระบุโดย callback
ซึ่งทำงานในเบราว์เซอร์ของผู้ใช้จะส่งรหัสการให้สิทธิ์ไปยังปลายทางที่แพลตฟอร์มของคุณโฮสต์
สำหรับโหมดเปลี่ยนเส้นทาง ระบบจะส่งคำขอ GET
ไปยังปลายทางที่ระบุโดย redirect_url
เพื่อแชร์รหัสการให้สิทธิ์ในพารามิเตอร์ code ของ URL วิธีรับรหัสการให้สิทธิ์
สร้างปลายทางการให้สิทธิ์ใหม่หากคุณยังไม่มีการติดตั้งใช้งานอยู่ หรือ
อัปเดตปลายทางที่มีอยู่เพื่อยอมรับคำขอ
GET
และพารามิเตอร์ของ URL ก่อนหน้านี้มีการใช้คำขอPUT
ที่มีค่ารหัสการให้สิทธิ์ในเพย์โหลด
ปลายทางการให้สิทธิ์
ปลายทางของรหัสการให้สิทธิ์ต้องจัดการคำขอ GET
ที่มีพารามิเตอร์สตริงคำค้นหา URL ต่อไปนี้
ชื่อ | ค่า |
---|---|
ผู้ใช้ตรวจสอบสิทธิ์ | คำขอการตรวจสอบสิทธิ์การลงชื่อเข้าใช้ของผู้ใช้ |
รหัส | รหัสการให้สิทธิ์ OAuth2 ที่สร้างโดย Google |
HD | โดเมนที่ฝากบริการของบัญชีผู้ใช้ |
ข้อความแจ้ง | กล่องโต้ตอบความยินยอมของผู้ใช้ |
ขอบเขต | รายการขอบเขต OAuth2 อย่างน้อย 1 รายการที่จะได้รับอนุญาตโดยคั่นด้วยการเว้นวรรค |
state | ตัวแปรสถานะ CRSF |
ตัวอย่างคำขอ GET
ที่มีพารามิเตอร์ของ URL ไปยังปลายทางชื่อ auth-code และโฮสต์โดย example.com
Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent
เมื่อกระบวนการรหัสการให้สิทธิ์เริ่มต้นโดยไลบรารี JavaScript รุ่นก่อนหน้าหรือโดยการเรียกโดยตรงไปยังปลายทาง Google OAuth 2.0 ระบบจะใช้คำขอ POST
ตัวอย่างคำขอ POST
ที่มีรหัสการให้สิทธิ์เป็นเปย์โหลดในเนื้อหาคำขอ HTTP
Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw
ตรวจสอบคำขอ
ดำเนินการดังต่อไปนี้ในเซิร์ฟเวอร์เพื่อหลีกเลี่ยงการโจมตี CSRF
ตรวจสอบค่าของพารามิเตอร์ state สําหรับโหมดการเปลี่ยนเส้นทาง
ยืนยันว่ามีการตั้งค่าส่วนหัว X-Requested-With: XmlHttpRequest
สำหรับโหมดป๊อปอัป
จากนั้นคุณควรรับโทเค็นการรีเฟรชและการเข้าถึงจาก Google ต่อเมื่อคุณได้ยืนยันคำขอรหัสการให้สิทธิ์สำเร็จแล้วเท่านั้น
รับสิทธิ์เข้าถึงและรีเฟรชโทเค็น
หลังจากที่แพลตฟอร์มแบ็กเอนด์ได้รับรหัสการให้สิทธิ์จาก Google และยืนยันคำขอแล้ว ให้ใช้รหัสการให้สิทธิ์เพื่อขอสิทธิ์เข้าถึงและรีเฟรชโทเค็นจาก Google เพื่อเรียก API
ทำตามคำแนะนำ โดยเริ่มจากขั้นตอนที่ 5: รหัสการให้สิทธิ์ Exchange สำหรับโทเค็นการรีเฟรชและเข้าถึงของคู่มือการใช้ OAuth 2.0 สำหรับแอปพลิเคชันเว็บเซิร์ฟเวอร์
การจัดการโทเค็น
แพลตฟอร์มของคุณจัดเก็บโทเค็นการรีเฟรชไว้อย่างปลอดภัย ลบโทเค็นการรีเฟรชที่จัดเก็บไว้เมื่อนำบัญชีผู้ใช้ออก หรือเพิกถอนคำยินยอมของผู้ใช้โดย google.accounts.oauth2.revoke
หรือจาก https://myaccount.google.com/permissions โดยตรง
หรือคุณอาจพิจารณาใช้ RISC เพื่อปกป้องบัญชีผู้ใช้ด้วยการป้องกันแบบครอบคลุมหลายบริการ
โดยทั่วไปแพลตฟอร์มแบ็กเอนด์จะเรียกใช้ Google API โดยใช้โทเค็นเพื่อการเข้าถึง หากเว็บแอปจะเรียก Google API จากเบราว์เซอร์ของผู้ใช้โดยตรงด้วย คุณต้องใช้วิธีแชร์โทเค็นเพื่อการเข้าถึงกับเว็บแอปพลิเคชัน ซึ่งการทำเช่นนี้ไม่อยู่ในขอบเขตของคู่มือนี้ เมื่อทำตามวิธีนี้และใช้ไลบรารีของไคลเอ็นต์ Google API สำหรับ JavaScript ให้ใช้ gapi.client.SetToken()
เพื่อจัดเก็บโทเค็นเพื่อการเข้าถึงในหน่วยความจำของเบราว์เซอร์ชั่วคราว แล้วเปิดให้ไลบรารีเรียกใช้ Google API