เอกสารนี้จะอธิบายวิธีใช้การให้สิทธิ์ OAuth 2.0 เพื่อเข้าถึง Google APIs จากเว็บแอปพลิเคชัน JavaScript OAuth 2.0 ช่วยให้ผู้ใช้แชร์ข้อมูลที่เจาะจงกับแอปพลิเคชันขณะที่เก็บชื่อผู้ใช้ รหัสผ่าน และข้อมูลอื่นๆ ไว้เป็นส่วนตัวได้ ตัวอย่างเช่น แอปพลิเคชันสามารถใช้ OAuth 2.0 เพื่อรับสิทธิ์จากผู้ใช้ในการจัดเก็บไฟล์ใน Google ไดรฟ์
กระบวนการ OAuth 2.0 นี้เรียกว่าขั้นตอนการให้สิทธิ์โดยนัย โดยออกแบบมาสําหรับแอปพลิเคชันที่เข้าถึง API เฉพาะเมื่อมีผู้ใช้อยู่ในแอปพลิเคชันเท่านั้น แอปพลิเคชันเหล่านี้จัดเก็บข้อมูลที่เป็นความลับไม่ได้
ในขั้นตอนนี้ แอปจะเปิด URL ของ Google ที่ใช้พารามิเตอร์การค้นหาเพื่อระบุแอป และประเภทของการเข้าถึง API ที่แอปต้องการ คุณจะเปิด URL ในหน้าต่างเบราว์เซอร์ปัจจุบันหรือป๊อปอัปได้ ผู้ใช้จะตรวจสอบสิทธิ์กับ Google และให้สิทธิ์ที่ขอได้ จากนั้น Google จะเปลี่ยนเส้นทางผู้ใช้กลับไปยังแอปของคุณ การเปลี่ยนเส้นทางจะรวมถึงโทเค็นเพื่อการเข้าถึงที่แอปของคุณใช้ตรวจสอบเพื่อส่งคําขอ API
สิ่งที่ต้องมีก่อน
เปิดใช้ API สําหรับโปรเจ็กต์
แอปพลิเคชันใดก็ตามที่เรียกใช้ Google APIs จะต้องเปิดใช้ API เหล่านั้นใน API Console
วิธีเปิดใช้ API สําหรับโปรเจ็กต์
- Open the API Library ใน Google API Console
- If prompted, select a project, or create a new one.
- API Library จะแสดงรายการ API ที่ใช้ได้ทั้งหมดซึ่งจัดกลุ่มตามตระกูลผลิตภัณฑ์และความนิยม หาก API ที่ต้องการเปิดใช้ไม่แสดงในรายการ ให้ใช้การค้นหาเพื่อค้นหาหรือคลิก ดูทั้งหมด ในตระกูลผลิตภัณฑ์ที่เป็นเจ้าของ
- เลือก API ที่ต้องการเปิดใช้ แล้วคลิกปุ่มเปิดใช้
- If prompted, enable billing.
- If prompted, read and accept the API's Terms of Service.
สร้างข้อมูลรับรองการให้สิทธิ์
แอปพลิเคชันที่ใช้ OAuth 2.0 เพื่อเข้าถึง Google APIs ต้องมีข้อมูลเข้าสู่ระบบการให้สิทธิ์ที่ระบุแอปพลิเคชันไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google ขั้นตอนต่อไปนี้อธิบายวิธีสร้างข้อมูลเข้าสู่ระบบสําหรับโปรเจ็กต์ของคุณ จากนั้นแอปพลิเคชันจะใช้ข้อมูลเข้าสู่ระบบเพื่อเข้าถึง API ที่คุณเปิดใช้สําหรับโปรเจ็กต์นั้นได้
- Go to the Credentials page.
- คลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth
- เลือกประเภทแอปพลิเคชันเว็บแอปพลิเคชัน
- กรอกข้อมูลในแบบฟอร์มให้ครบถ้วน แอปพลิเคชันที่ใช้ JavaScript เพื่อส่งคําขอ Google API ที่ได้รับอนุญาตต้องระบุต้นทางของ JavaScript ที่ได้รับอนุญาต ต้นทางจะระบุโดเมนที่แอปพลิเคชันสามารถส่งคําขอไปยังเซิร์ฟเวอร์ OAuth 2.0 ได้ ต้นทางเหล่านี้ต้องเป็นไปตามกฎการตรวจสอบของ Google
ระบุขอบเขตการเข้าถึง
ขอบเขตจะช่วยให้แอปพลิเคชันของคุณขอเข้าถึงเฉพาะทรัพยากรที่จําเป็นเท่านั้น ขณะเดียวกันก็ช่วยให้ผู้ใช้ควบคุมจํานวนสิทธิ์เข้าถึงที่ตนให้กับแอปพลิเคชันของคุณได้ ดังนั้น อาจมีความสัมพันธ์แบบผกผันระหว่างจํานวนขอบเขตที่ขอและความเป็นไปได้ที่จะได้รับคํายินยอมจากผู้ใช้
ก่อนที่จะเริ่มใช้การให้สิทธิ์ OAuth 2.0 เราขอแนะนําให้คุณระบุขอบเขตที่แอปจําเป็นต้องมีสิทธิ์เข้าถึง
เอกสารขอบเขต API ของ OAuth 2.0 จะมีรายการขอบเขตทั้งหมดที่คุณอาจเข้าถึงได้เพื่อเข้าถึง Google API
การรับโทเค็นเพื่อการเข้าถึง OAuth 2.0
ขั้นตอนต่อไปนี้จะแสดงวิธีที่แอปพลิเคชันของคุณโต้ตอบกับเซิร์ฟเวอร์ OAuth 2.0 ของ Google เพื่อขอคํายินยอมในการส่งคําขอ API ในนามของผู้ใช้ แอปพลิเคชันของคุณต้องได้รับความยินยอมก่อน จึงจะดําเนินการคําขอ Google API ที่ต้องมีการให้สิทธิ์ผู้ใช้ได้
ขั้นตอนที่ 1: กําหนดค่าออบเจ็กต์ไคลเอ็นต์
หากคุณใช้ไลบรารีของไคลเอ็นต์ Google APIs สําหรับ JavaScript เพื่อจัดการโฟลว์ OAuth 2.0 ขั้นตอนแรกคือกําหนดค่าออบเจ็กต์ gapi.auth2
และ gapi.client
ออบเจ็กต์เหล่านี้จะทําให้แอปพลิเคชันของคุณได้รับสิทธิ์จากผู้ใช้และส่งคําขอ API ที่ได้รับอนุญาตได้
ออบเจ็กต์ไคลเอ็นต์จะระบุขอบเขตที่แอปพลิเคชันกําลังขอสิทธิ์เข้าถึง ค่าเหล่านี้จะบอกให้หน้าจอคํายินยอมที่ Google แสดงต่อผู้ใช้
ไลบรารีของไคลเอ็นต์ JS
ไลบรารีของไคลเอ็นต์ JavaScript ช่วยให้ขั้นตอนการให้สิทธิ์ง่ายขึ้นหลายด้าน ดังนี้
- สร้าง URL เปลี่ยนเส้นทางสําหรับเซิร์ฟเวอร์การให้สิทธิ์ของ Google และให้วิธีการนําผู้ใช้ไปยัง URL ดังกล่าว
- และจะจัดการการเปลี่ยนเส้นทางจากเซิร์ฟเวอร์นั้นกลับไปยังแอปพลิเคชันของคุณ
- โดยจะตรวจสอบโทเค็นเพื่อการเข้าถึงที่เซิร์ฟเวอร์การให้สิทธิ์แสดงผล
- โดยจะจัดเก็บโทเค็นเพื่อการเข้าถึงที่เซิร์ฟเวอร์การให้สิทธิ์ส่งไปยังแอปพลิเคชันของคุณ และเรียกขึ้นมาเมื่อแอปเรียก API ที่ได้รับอนุญาตในภายหลัง
ข้อมูลโค้ดด้านล่างเป็นข้อความที่ตัดตอนมาจากตัวอย่างที่สมบูรณ์ซึ่งปรากฏภายหลังในเอกสารนี้ โค้ดนี้จะเริ่มต้นออบเจ็กต์ gapi.client
ซึ่งแอปพลิเคชันของคุณจะใช้เรียก API ในภายหลัง เมื่อสร้างออบเจ็กต์นั้นแล้ว ออบเจ็กต์ gapi.auth2
ที่แอปพลิเคชันจะใช้เพื่อตรวจสอบและตรวจสอบสถานะการให้สิทธิ์ของผู้ใช้จะมีการเริ่มต้นด้วยเช่นกัน
การเรียกไปยัง gapi.client.init
จะระบุช่องต่อไปนี้
- ค่า
apiKey
และclientId
จะระบุข้อมูลเข้าสู่ระบบสําหรับการให้สิทธิ์แอปพลิเคชันของคุณ ตามที่อธิบายไว้ในส่วนการสร้างข้อมูลเข้าสู่ระบบการให้สิทธิ์ คุณจะรับค่าเหล่านี้ได้ใน API Consoleโปรดทราบว่าต้องมีclientId
หากแอปพลิเคชันส่งคําขอ API ที่ได้รับอนุญาต แอปพลิเคชันที่สร้างคําขอที่ไม่ได้รับอนุญาตจะระบุคีย์ API ได้เท่านั้น -
ช่อง
scope
ระบุรายการขอบเขตการเข้าถึงที่คั่นด้วยช่องว่างซึ่งตรงกับทรัพยากรที่แอปพลิเคชันเข้าถึงได้ในนามของผู้ใช้ ค่าเหล่านี้จะบอกให้หน้าจอคํายินยอมที่ Google แสดงต่อผู้ใช้เราขอแนะนําให้แอปพลิเคชันขอสิทธิ์เข้าถึงขอบเขตการให้สิทธิ์ในบริบทเมื่อเป็นไปได้ การขอสิทธิ์เข้าถึงข้อมูลผู้ใช้ในบริบทผ่านการให้สิทธิ์ที่เพิ่มขึ้นจะช่วยให้ผู้ใช้เข้าใจได้ง่ายขึ้นว่าแอปพลิเคชันของคุณต้องการสิทธิ์เข้าถึงตามที่ขอได้อย่างไร
- ช่อง
discoveryDocs
จะแสดงรายการเอกสารการค้นพบ API ที่แอปพลิเคชันใช้ เอกสาร Discovery จะอธิบายแพลตฟอร์มของ API รวมถึงสคีมาทรัพยากรและไลบรารีของไคลเอ็นต์ JavaScript จะใช้ข้อมูลดังกล่าวเพื่อสร้างวิธีที่แอปพลิเคชันใช้ได้ ในตัวอย่างนี้ โค้ดจะเรียกเอกสารการค้นพบสําหรับ Google Drive API เวอร์ชัน 3
หลังจากที่เรียก gapi.client.init
เสร็จแล้ว โค้ดจะตั้งค่าตัวแปร GoogleAuth
เพื่อระบุออบเจ็กต์ Google Auth สุดท้าย โค้ดจะกําหนด Listener ที่เรียกใช้ฟังก์ชันเมื่อสถานะการลงชื่อเข้าใช้ของผู้ใช้เปลี่ยนไป (ฟังก์ชันดังกล่าวไม่ได้กําหนดไว้ในข้อมูลโค้ด)
var GoogleAuth; // Google Auth object. function initClient() { gapi.client.init({ 'apiKey': 'YOUR_API_KEY', 'clientId': 'YOUR_CLIENT_ID', 'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly', 'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'] }).then(function () { GoogleAuth = gapi.auth2.getAuthInstance(); // Listen for sign-in state changes. GoogleAuth.isSignedIn.listen(updateSigninStatus); }); }
ปลายทาง 2.0 ของ OAuth
หากเข้าถึงปลายทาง OAuth 2.0 โดยตรง คุณจะไปยังขั้นตอนถัดไปได้
ขั้นตอนที่ 2: เปลี่ยนเส้นทางไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google
หากต้องการขอสิทธิ์เข้าถึงข้อมูลผู้ใช้ โปรดเปลี่ยนเส้นทางผู้ใช้ไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google
ไลบรารีของไคลเอ็นต์ JS
เรียกเมธอด GoogleAuth.signIn()
เพื่อนําผู้ใช้ไปยังเซิร์ฟเวอร์การให้สิทธิ์ของ Google
GoogleAuth.signIn();
ในทางปฏิบัติ แอปพลิเคชันของคุณอาจตั้งค่าบูลีนเพื่อพิจารณาว่าจะเรียกเมธอด signIn()
หรือไม่ก่อนที่จะพยายามเรียก API
ข้อมูลโค้ดด้านล่างจะแสดงวิธีเริ่มต้นขั้นตอนการให้สิทธิ์ผู้ใช้ สังเกตประเด็นต่อไปนี้เกี่ยวกับข้อมูลโค้ด
-
ออบเจ็กต์
GoogleAuth
ที่อ้างอิงในโค้ดจะเหมือนกับตัวแปรร่วมที่กําหนดไว้ในข้อมูลโค้ดในขั้นตอนที่ 1 - ฟังก์ชัน
updateSigninStatus
คือ Listener ที่จะฟังการเปลี่ยนแปลงของ สถานะการให้สิทธิ์ของผู้ใช้ บทบาทในฐานะผู้ฟังได้รับการกําหนดค่าไว้ในข้อมูลโค้ดในขั้นตอนที่ 1 ดังต่อไปนี้GoogleAuth.isSignedIn.listen(updateSigninStatus);
ข้อมูลโค้ดจะกําหนดตัวแปรร่วมเพิ่มเติม 2 รายการดังนี้
isAuthorized
เป็นตัวแปรบูลีนที่ระบุว่าผู้ใช้ลงชื่อเข้าใช้อยู่แล้วหรือไม่ คุณตั้งค่านี้ได้เมื่อแอปโหลดและอัปเดตเมื่อผู้ใช้ลงชื่อเข้าใช้หรือออกจากระบบแอปในข้อมูลโค้ดนี้ ฟังก์ชัน
sendAuthorizedApiRequest
จะตรวจสอบค่าตัวแปร' เพื่อดูว่าแอปควรพยายามส่งคําขอ API ที่ต้องมีการให้สิทธิ์หรือแจ้งให้ผู้ใช้ให้สิทธิ์แอปcurrentApiRequest
เป็นออบเจ็กต์ที่จัดเก็บรายละเอียดเกี่ยวกับคําขอ API ล่าสุดที่ผู้ใช้พยายามส่ง ระบบจะตั้งค่าของออบเจ็กต์เมื่อแอปเรียกใช้ฟังก์ชันsendAuthorizedApiRequest
หากผู้ใช้ให้สิทธิ์แอป ระบบจะดําเนินการคําขอทันที มิเช่นนั้น ฟังก์ชันนี้จะเปลี่ยนเส้นทางผู้ใช้เพื่อลงชื่อเข้าใช้ หลังจากผู้ใช้ลงชื่อเข้าใช้ ฟังก์ชัน
updateSignInStatus
จะเรียกใช้sendAuthorizedApiRequest
โดยส่งคําขอเดียวกันที่พยายามก่อนที่ขั้นตอนการให้สิทธิ์จะเริ่มต้น
var isAuthorized; var currentApiRequest; /** * Store the request details. Then check to determine whether the user * has authorized the application. * - If the user has granted access, make the API request. * - If the user has not granted access, initiate the sign-in flow. */ function sendAuthorizedApiRequest(requestDetails) { currentApiRequest = requestDetails; if (isAuthorized) { // Make API request // gapi.client.request(requestDetails) // Reset currentApiRequest variable. currentApiRequest = {}; } else { GoogleAuth.signIn(); } } /** * Listener called when user completes auth flow. If the currentApiRequest * variable is set, then the user was prompted to authorize the application * before the request executed. In that case, proceed with that API request. */ function updateSigninStatus(isSignedIn) { if (isSignedIn) { isAuthorized = true; if (currentApiRequest) { sendAuthorizedApiRequest(currentApiRequest); } } else { isAuthorized = false; } }
ปลายทาง 2.0 ของ OAuth
สร้าง URL เพื่อขอสิทธิ์เข้าถึงปลายทาง OAuth 2.0 ของ Google ที่ https://accounts.google.com/o/oauth2/v2/auth
ปลายทางนี้เข้าถึงได้ผ่าน HTTPS และจะปฏิเสธการเชื่อมต่อ HTTP ธรรมดา
เซิร์ฟเวอร์การให้สิทธิ์ของ Google รองรับพารามิเตอร์สตริงการค้นหาต่อไปนี้สําหรับแอปพลิเคชันเว็บเซิร์ฟเวอร์
พารามิเตอร์ | |||||||
---|---|---|---|---|---|---|---|
client_id |
จำเป็น
รหัสไคลเอ็นต์สําหรับแอปพลิเคชัน คุณดูค่านี้ได้ใน API ConsoleCredentials page |
||||||
redirect_uri |
จำเป็น
ระบุตําแหน่งที่เซิร์ฟเวอร์ API เปลี่ยนเส้นทางผู้ใช้หลังจากที่ผู้ใช้ดําเนินการขั้นตอนการให้สิทธิ์เสร็จสิ้นแล้ว ค่าต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตรายการใดรายการหนึ่งสําหรับไคลเอ็นต์ OAuth 2.0 ซึ่งคุณกําหนดค่าใน API Consoleของ Credentials pageไคลเอ็นต์ หากค่านี้ไม่ตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสําหรับ โปรดทราบว่ารูปแบบ |
||||||
response_type |
จำเป็น
แอปพลิเคชัน JavaScript ต้องตั้งค่าพารามิเตอร์เป็น |
||||||
scope |
จำเป็น
รายการขอบเขตที่คั่นด้วยช่องว่างซึ่งระบุทรัพยากรที่แอปพลิเคชันเข้าถึงได้ในนามของผู้ใช้ ค่าเหล่านี้จะบอกให้หน้าจอคํายินยอมที่ Google แสดงต่อผู้ใช้ ขอบเขตจะช่วยให้แอปพลิเคชันของคุณขอเข้าถึงเฉพาะทรัพยากรที่จําเป็นเท่านั้น ขณะเดียวกันก็ช่วยให้ผู้ใช้ควบคุมจํานวนสิทธิ์เข้าถึงที่ตนให้กับแอปพลิเคชันของคุณได้ ดังนั้น ความสัมพันธ์ระหว่างขอบเขตที่ขอกับความเป็นไปได้ที่จะได้รับความยินยอมจากผู้ใช้จึงมีความสัมพันธ์กัน เราขอแนะนําให้แอปพลิเคชันขอสิทธิ์เข้าถึงขอบเขตการให้สิทธิ์ในบริบทเมื่อเป็นไปได้ การขอสิทธิ์เข้าถึงข้อมูลผู้ใช้ในบริบทผ่านการให้สิทธิ์ที่เพิ่มขึ้นจะช่วยให้ผู้ใช้เข้าใจได้ง่ายขึ้นว่าทําไมแอปพลิเคชันของคุณจึงต้องใช้การเข้าถึงที่ขอ |
||||||
state |
แนะนำ
ระบุค่าสตริงที่แอปพลิเคชันจะใช้เพื่อรักษาสถานะระหว่างคําขอการให้สิทธิ์กับการตอบกลับของเซิร์ฟเวอร์การให้สิทธิ์
เซิร์ฟเวอร์จะส่งคืนค่าที่แน่นอนที่คุณส่งเป็นคู่ของ คุณใช้พารามิเตอร์นี้เพื่อวัตถุประสงค์ต่างๆ ได้ เช่น การนําผู้ใช้ไปยังทรัพยากรที่ถูกต้องในแอปพลิเคชัน การส่ง nonces และการบรรเทาการปลอมแปลงคําขอแบบข้ามเว็บไซต์ เนื่องจาก |
||||||
include_granted_scopes |
ไม่บังคับ
อนุญาตให้แอปพลิเคชันใช้การให้สิทธิ์เพิ่มเติมเพื่อขอสิทธิ์เข้าถึงขอบเขตเพิ่มเติมในบริบท หากคุณตั้งค่าพารามิเตอร์นี้เป็น |
||||||
login_hint |
ไม่บังคับ
หากแอปพลิเคชันทราบว่าผู้ใช้รายใดพยายามตรวจสอบสิทธิ์ แอปก็จะใช้พารามิเตอร์นี้เพื่อให้คําแนะนําแก่เซิร์ฟเวอร์การตรวจสอบสิทธิ์ของ Google เซิร์ฟเวอร์จะใช้คําแนะนําที่ช่วยให้ขั้นตอนการเข้าสู่ระบบง่ายขึ้น โดยกรอกข้อมูลในช่องอีเมลในแบบฟอร์มการลงชื่อเข้าใช้หรือเลือกเซสชันการลงชื่อเข้าสู่ระบบที่เหมาะสม ตั้งค่าพารามิเตอร์เป็นอีเมลหรือตัวระบุ |
||||||
prompt |
ไม่บังคับ
รายการข้อความแจ้งที่คํานึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่เพื่อนําเสนอผู้ใช้ หากไม่ระบุพารามิเตอร์นี้ ระบบจะแจ้งให้ผู้ใช้ทราบเฉพาะครั้งแรกที่โปรเจ็กต์ขอสิทธิ์เข้าถึง ดูข้อมูลเพิ่มเติมได้ที่ข้อความแจ้งคํายินยอมซ้ํา ค่าที่เป็นไปได้มีดังนี้
|
ตัวอย่างการเปลี่ยนเส้นทางไปยังเซิร์ฟเวอร์การให้สิทธิ์ของ Google
URL ตัวอย่างจะแสดงด้านล่างโดยมีตัวแบ่งบรรทัดและการเว้นวรรคเพื่อให้อ่านได้ง่าย
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly& include_granted_scopes=true& response_type=token& state=state_parameter_passthrough_value& redirect_uri=https%3A//oauth2.example.com/code& client_id=client_id
หลังจากที่สร้าง URL คําขอแล้ว ให้เปลี่ยนเส้นทางผู้ใช้ไปยัง URL นั้น
โค้ดตัวอย่าง JavaScript
ข้อมูลโค้ด JavaScript ต่อไปนี้แสดงวิธีเริ่มต้นขั้นตอนการให้สิทธิ์ใน JavaScript โดยไม่ใช้ไลบรารีของไคลเอ็นต์ Google APIs สําหรับ JavaScript จุดสิ้นสุด OAuth 2.0 จะไม่รองรับการแชร์ทรัพยากรแบบข้ามต้นทาง (CORS) ข้อมูลโค้ดจึงสร้างแบบฟอร์มที่จะเปิดคําขอไปยังปลายทางนั้น
/* * Create form to request access token from Google's OAuth 2.0 server. */ function oauthSignIn() { // Google's OAuth 2.0 endpoint for requesting an access token var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth'; // Create <form> element to submit parameters to OAuth 2.0 endpoint. var form = document.createElement('form'); form.setAttribute('method', 'GET'); // Send as a GET request. form.setAttribute('action', oauth2Endpoint); // Parameters to pass to OAuth 2.0 endpoint. var params = {'client_id': 'YOUR_CLIENT_ID', 'redirect_uri': 'YOUR_REDIRECT_URI', 'response_type': 'token', 'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly', 'include_granted_scopes': 'true', 'state': 'pass-through value'}; // Add form parameters as hidden input values. for (var p in params) { var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', p); input.setAttribute('value', params[p]); form.appendChild(input); } // Add form to page and submit it to open the OAuth 2.0 endpoint. document.body.appendChild(form); form.submit(); }
ขั้นตอนที่ 3: Google แสดงข้อความแจ้งขอคํายินยอมจากผู้ใช้
ในขั้นตอนนี้ ผู้ใช้เลือกได้ว่าจะให้สิทธิ์แอปพลิเคชันเข้าถึงแอปพลิเคชันของคุณหรือไม่ ในขั้นตอนนี้ Google จะแสดงหน้าต่างคํายินยอมซึ่งแสดงชื่อแอปพลิเคชันของคุณและบริการ Google API ที่ขอสิทธิ์เข้าถึงด้วยข้อมูลเข้าสู่ระบบการให้สิทธิ์ของผู้ใช้และสรุปขอบเขตสิทธิ์เข้าถึง จากนั้นผู้ใช้จะยินยอมให้สิทธิ์การเข้าถึงอย่างน้อย 1 ขอบเขตที่แอปพลิเคชันขอหรือปฏิเสธคําขอได้
แอปพลิเคชันของคุณไม่จําเป็นต้องดําเนินการใดๆ ในขั้นตอนนี้ เนื่องจากกําลังรอการตอบกลับจากเซิร์ฟเวอร์ OAuth 2.0 ของ Google ซึ่งระบุว่ามีสิทธิ์เข้าถึงใดๆ หรือไม่ เราจะอธิบายคําตอบนั้นในขั้นตอนถัดไป
ข้อผิดพลาด
คําขอปลายทางการให้สิทธิ์ OAuth 2.0 ของ Google อาจแสดงข้อความแสดงข้อผิดพลาดที่ผู้ใช้เห็นแทนขั้นตอนการตรวจสอบสิทธิ์และขั้นตอนการให้สิทธิ์ที่คาดไว้ รหัสข้อผิดพลาดทั่วไปและวิธีแก้ไขที่แนะนําแสดงอยู่ด้านล่าง
admin_policy_enforced
บัญชี Google ให้สิทธิ์ขอบเขตอย่างน้อย 1 รายการที่ขอไม่ได้เนื่องจากนโยบายของผู้ดูแลระบบ Google Workspace โปรดดูบทความช่วยเหลือของผู้ดูแลระบบ Google Workspace เพื่อควบคุมว่าจะให้แอปของบุคคลที่สามและแอปภายในรายการใดเข้าถึงข้อมูล Google Workspace ได้บ้างเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ผู้ดูแลระบบอาจจํากัดการเข้าถึงขอบเขตทั้งหมดหรือขอบเขตที่มีความละเอียดอ่อนและถูกจํากัด จนกว่าจะได้รับสิทธิ์เข้าถึงรหัสไคลเอ็นต์ OAuth อย่างชัดแจ้ง
disallowed_useragent
ปลายทางการให้สิทธิ์จะแสดงใน User Agent แบบฝังที่นโยบาย OAuth 2.0 ของ Google ไม่อนุญาต
Android
นักพัฒนาแอป Android อาจพบข้อความแสดงข้อผิดพลาดนี้เมื่อเปิดคําขอการให้สิทธิ์ใน android.webkit.WebView
นักพัฒนาซอฟต์แวร์ควรใช้ไลบรารี Android เช่น Google Sign-In สําหรับ Android หรือ OpenID Foundation'AppAuth สําหรับ Android แทน
นักพัฒนาเว็บอาจพบข้อผิดพลาดนี้เมื่อแอป Android เปิดลิงก์เว็บทั่วไปใน User Agent ที่ฝังอยู่ และผู้ใช้ไปที่ปลายทางการให้สิทธิ์ OAuth 2.0 ของ Google จากเว็บไซต์ของคุณ นักพัฒนาซอฟต์แวร์ควรอนุญาตให้ลิงก์ทั่วไปเปิดในเครื่องจัดการลิงก์เริ่มต้นของระบบปฏิบัติการ ซึ่งรวมทั้งเครื่องจัดการ Android App Link หรือแอปเบราว์เซอร์เริ่มต้น นอกจากนี้ไลบรารีแท็บที่กําหนดเองของ Android ก็เป็นตัวเลือกที่รองรับด้วย
iOS
นักพัฒนา iOS และ macOS อาจพบข้อผิดพลาดนี้เมื่อเปิดคําขอการให้สิทธิ์ใน WKWebView
นักพัฒนาซอฟต์แวร์ควรใช้ไลบรารี iOS เช่น Google Sign-In สําหรับ iOS หรือ OpenID Foundation'AppAuth สําหรับ iOS แทน
นักพัฒนาเว็บอาจพบข้อผิดพลาดนี้เมื่อแอป iOS หรือ macOS เปิดลิงก์เว็บทั่วไปใน User Agent ที่ฝังอยู่และผู้ใช้ไปยังปลายทางการให้สิทธิ์ OAuth 2.0 ของ Google จากเว็บไซต์ของคุณ นักพัฒนาซอฟต์แวร์ควรอนุญาตให้ลิงก์ทั่วไปเปิดในเครื่องจัดการลิงก์เริ่มต้นของระบบปฏิบัติการ ซึ่งรวมทั้งเครื่องจัดการ Universal Link หรือแอปเบราว์เซอร์เริ่มต้น นอกจากนี้ไลบรารี SFSafariViewController
ก็เป็นตัวเลือกที่รองรับด้วย
org_internal
รหัสไคลเอ็นต์ OAuth ในคําขอเป็นส่วนหนึ่งของโปรเจ็กต์ที่จํากัดการเข้าถึงบัญชี Google ในองค์กร Google Cloud ที่เจาะจง ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกําหนดค่านี้ได้ในส่วนประเภทผู้ใช้ในบทความช่วยเหลือการตั้งค่าการตั้งค่าความยินยอมของ OAuth
origin_mismatch
รูปแบบ โดเมน และ/หรือพอร์ตของ JavaScript ที่มาจากคําขอการให้สิทธิ์อาจไม่ตรงกับ URI ต้นทางของ JavaScript ที่ได้รับอนุญาตซึ่งลงทะเบียนไว้สําหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบต้นทางของ JavaScript ที่ได้รับอนุญาตใน Google API ConsoleCredentials page
redirect_uri_mismatch
redirect_uri
ที่ส่งผ่านในคําขอการให้สิทธิ์ไม่ตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสําหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตใน Google API Console Credentials page
รูปแบบ โดเมน และ/หรือพอร์ตของ JavaScript ที่มาจากคําขอการให้สิทธิ์อาจไม่ตรงกับ URI ต้นทางของ JavaScript ที่ได้รับอนุญาตซึ่งลงทะเบียนไว้สําหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบต้นทาง JavaScript ที่ได้รับอนุญาตใน Google API Console Credentials page
ขั้นตอนที่ 4: จัดการการตอบสนองของเซิร์ฟเวอร์ OAuth 2.0
ไลบรารีของไคลเอ็นต์ JS
ไลบรารีของไคลเอ็นต์ JavaScript จะจัดการการตอบสนองจากเซิร์ฟเวอร์การให้สิทธิ์ของ Google หากคุณตั้งค่า Listener ให้ตรวจสอบการเปลี่ยนแปลงสถานะลงชื่อเข้าใช้ปัจจุบันของผู้ใช้ ระบบจะเรียกใช้ฟังก์ชันดังกล่าวเมื่อผู้ใช้ให้สิทธิ์การเข้าถึงแอปพลิเคชันที่ขอ
ปลายทาง 2.0 ของ OAuth
เซิร์ฟเวอร์ OAuth 2.0 จะส่งการตอบกลับไปยัง redirect_uri
ที่ระบุไว้ในคําขอโทเค็นเพื่อการเข้าถึง
หากผู้ใช้อนุมัติคําขอ การตอบกลับจะมีโทเค็นเพื่อการเข้าถึง หากผู้ใช้ไม่ได้อนุมัติคําขอ การตอบกลับจะมีข้อความแสดงข้อผิดพลาด ระบบจะแสดงโทเค็นเพื่อการเข้าถึงหรือข้อความแสดงข้อผิดพลาดในส่วนแฮชของ URI การเปลี่ยนเส้นทาง ดังที่แสดงด้านล่าง
การตอบสนองของโทเค็นเพื่อการเข้าถึงมีดังนี้
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
นอกเหนือจากพารามิเตอร์
access_token
แล้ว สตริงส่วนย่อยยังมีพารามิเตอร์token_type
ซึ่งตั้งค่าเป็นBearer
เสมอ และพารามิเตอร์expires_in
ซึ่งระบุอายุการใช้งานของโทเค็นเป็นวินาที หากระบุพารามิเตอร์state
ในคําขอโทเค็นเพื่อการเข้าถึง ระบบจะรวมค่าของพารามิเตอร์ดังกล่าวไว้ในการตอบกลับด้วย- การตอบสนองข้อผิดพลาด:
https://oauth2.example.com/callback#error=access_denied
ตัวอย่างการตอบสนองของเซิร์ฟเวอร์ OAuth 2.0
คุณสามารถทดสอบขั้นตอนนี้ได้โดยคลิกที่ URL ตัวอย่างต่อไปนี้ ซึ่งจะขอสิทธิ์เข้าถึงแบบอ่านอย่างเดียวเพื่อดูข้อมูลเมตาสําหรับไฟล์ใน Google ไดรฟ์ของคุณ
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly& include_granted_scopes=true& response_type=token& state=state_parameter_passthrough_value& redirect_uri=https%3A//oauth2.example.com/code& client_id=client_id
หลังจากเสร็จสิ้นขั้นตอน OAuth 2.0 ระบบจะเปลี่ยนเส้นทางคุณไปที่ http://localhost/oauth2callback
URL ดังกล่าวจะทําให้เกิดข้อผิดพลาด 404 NOT FOUND
เว้นแต่ว่าเครื่องคอมพิวเตอร์ของคุณจะทํางานในไฟล์ตามที่อยู่นั้น ขั้นตอนต่อไปจะอธิบายรายละเอียดเพิ่มเติมเกี่ยวกับข้อมูลที่แสดงใน URI เมื่อผู้ใช้ถูกเปลี่ยนเส้นทางกลับไปที่แอปพลิเคชันของคุณ
การเรียก Google APIs
ไลบรารีของไคลเอ็นต์ JS
หลังจากที่แอปพลิเคชันได้รับโทเค็นเพื่อการเข้าถึงแล้ว คุณจะใช้ไลบรารีของไคลเอ็นต์ JavaScript เพื่อส่งคําขอ API ในนามของผู้ใช้ได้ ไลบรารีของไคลเอ็นต์จะจัดการโทเค็นเพื่อการเข้าถึงให้คุณ และคุณไม่จําเป็นต้องดําเนินการใดๆ เป็นพิเศษเพื่อส่งโทเค็นในคําขอ
ไลบรารีของไคลเอ็นต์รองรับการเรียกใช้เมธอด API 2 วิธี หากโหลดเอกสารการค้นพบแล้ว API จะกําหนดฟังก์ชันเฉพาะเมธอดให้คุณ คุณยังใช้ฟังก์ชัน gapi.client.request
เพื่อเรียกเมธอด API ได้ด้วย
ข้อมูลโค้ด 2 รายการต่อไปนี้สาธิตตัวเลือกเหล่านี้สําหรับเมธอด Drive API ของ about.get
// Example 1: Use method-specific function var request = gapi.client.drive.about.get({'fields': 'user'}); // Execute the API request. request.execute(function(response) { console.log(response); }); // Example 2: Use gapi.client.request(args) function var request = gapi.client.request({ 'method': 'GET', 'path': '/drive/v3/about', 'params': {'fields': 'user'} }); // Execute the API request. request.execute(function(response) { console.log(response); });
ปลายทาง 2.0 ของ OAuth
หลังจากที่แอปพลิเคชันได้รับโทเค็นเพื่อการเข้าถึงแล้ว คุณจะใช้โทเค็นเพื่อเรียก API ของ Google ในนามของบัญชีผู้ใช้หนึ่งๆ ได้ หากได้รับสิทธิ์การเข้าถึงที่ API ต้องการ โดยให้รวมโทเค็นเพื่อการเข้าถึงในคําขอไปยัง API โดยรวมพารามิเตอร์การค้นหา access_token
หรือค่า Authorization
ของส่วนหัว HTTP Bearer
หากเป็นไปได้ คุณควรใช้ส่วนหัว HTTP เนื่องจากสตริงการค้นหามีแนวโน้มที่จะแสดงในบันทึกของเซิร์ฟเวอร์ ในกรณีส่วนใหญ่ คุณจะใช้ไลบรารีของไคลเอ็นต์เพื่อตั้งค่าการเรียกไปยัง Google API ได้ (เช่น เมื่อเรียกใช้ Drive Files API)
คุณจะลองใช้ Google API ทั้งหมดและดูขอบเขตได้ที่ OAuth 2.0 Playground
ตัวอย่าง HTTP GET
การเรียกปลายทาง drive.files
(Drive Files API) โดยใช้ส่วนหัว HTTP ของ Authorization: Bearer
อาจมีลักษณะดังต่อไปนี้ โปรดทราบว่าคุณต้องระบุโทเค็นเพื่อการเข้าถึงของคุณเองดังนี้
GET /drive/v2/files HTTP/1.1 Host: www.googleapis.com Authorization: Bearer access_token
การเรียก API เดียวกันสําหรับผู้ใช้ที่ตรวจสอบสิทธิ์แล้วโดยใช้พารามิเตอร์สตริงการค้นหา access_token
มีดังนี้
GET https://www.googleapis.com/drive/v2/files?access_token=access_token
ตัวอย่างของ curl
คุณทดสอบคําสั่งเหล่านี้ได้ด้วยแอปพลิเคชันบรรทัดคําสั่ง curl
ด้านล่างนี้เป็นตัวอย่างที่ใช้ตัวเลือกส่วนหัว HTTP (แนะนํา)
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files
หรือเลือกตัวเลือกพารามิเตอร์สตริงการค้นหาดังนี้
curl https://www.googleapis.com/drive/v2/files?access_token=access_token
โค้ดตัวอย่าง JavaScript
ข้อมูลโค้ดด้านล่างจะแสดงวิธีใช้ CORS (การแชร์ทรัพยากรแบบข้ามต้นทาง) เพื่อส่งคําขอไปยัง Google API ตัวอย่างนี้ไม่ได้ใช้ไลบรารีของไคลเอ็นต์ Google APIs สําหรับ JavaScript อย่างไรก็ตาม แม้จะไม่ได้ใช้ไลบรารีของไคลเอ็นต์ แต่คู่มือการสนับสนุน CORS ในเอกสารประกอบดังกล่าวก็น่าจะช่วยให้คุณเข้าใจคําขอเหล่านี้ได้ดียิ่งขึ้น
ในข้อมูลโค้ดนี้ ตัวแปร access_token
จะแสดงโทเค็นที่คุณได้รับเพื่อส่งคําขอ API ในนามของผู้ใช้ที่ได้รับอนุญาต ตัวอย่างที่สมบูรณ์แสดงวิธีจัดเก็บโทเค็นนั้นในพื้นที่เก็บข้อมูลของเบราว์เซอร์และเรียกข้อมูลเมื่อส่งคําขอ API
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/drive/v3/about?fields=user&' + 'access_token=' + params['access_token']); xhr.onreadystatechange = function (e) { console.log(xhr.response); }; xhr.send(null);
ตัวอย่างที่สมบูรณ์
ไลบรารีของไคลเอ็นต์ JS
การสาธิตโค้ดตัวอย่าง
ส่วนนี้ประกอบด้วยการสาธิตการทํางานของตัวอย่างโค้ดที่ทําตามเพื่อสาธิตลักษณะการทํางานของโค้ดในแอปจริง หลังจากที่คุณให้สิทธิ์แอปแล้ว ตัวอย่างจะแสดงอยู่ในแอปที่เชื่อมต่อกับบัญชี Google ของคุณ แอปนี้ชื่อการสาธิต OAuth 2.0 สําหรับ Google API เอกสาร ในทํานองเดียวกัน หากคุณเพิกถอนสิทธิ์เข้าถึงและรีเฟรชหน้าดังกล่าว แอปนั้นจะไม่ปรากฏในรายการอีกต่อไป
โปรดทราบว่าแอปนี้ส่งคําขอเข้าถึงขอบเขต https://www.googleapis.com/auth/drive.metadata.readonly
การเข้าถึงจะขอเพื่อสาธิตวิธีการเริ่มต้นขั้นตอน OAuth 2.0 ในแอปพลิเคชัน JavaScript เท่านั้น
แอปนี้ไม่ได้ส่งคําขอ API
โค้ดตัวอย่าง JavaScript
ดังที่แสดงด้านบน ตัวอย่างโค้ดนี้มีไว้สําหรับหน้าเว็บ (แอป) ที่โหลดไลบรารีของไคลเอ็นต์ Google API สําหรับ JavaScript และเริ่มขั้นตอน OAuth 2.0 หน้าเว็บจะแสดงข้อมูลอย่างใดอย่างหนึ่งต่อไปนี้
- ปุ่มหนึ่งที่อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอป หากผู้ใช้ไม่ได้ให้สิทธิ์แอปไว้ก่อนหน้านี้ แอปจะเรียกใช้ขั้นตอน OAuth 2.0
- ปุ่ม 2 ปุ่มที่อนุญาตให้ผู้ใช้ออกจากระบบแอปหรือเพิกถอนสิทธิ์เข้าถึงของแอปซึ่งเคยให้ไว้ หากออกจากระบบ คุณไม่ได้เพิกถอนสิทธิ์การเข้าถึงที่แอปให้ไว้ คุณจะต้องลงชื่อเข้าใช้อีกครั้งก่อนที่แอปจะส่งคําขออื่นๆ ให้อนุญาตในนามของคุณได้ แต่จะต้องให้สิทธิ์อีกครั้งเมื่อใช้แอปดังกล่าว แต่หากเพิกถอนก็ต้องให้สิทธิ์อีกครั้ง
และยังเพิกถอนสิทธิ์เข้าถึงแอปผ่านหน้าสิทธิ์ของบัญชี Google ได้ด้วย แอปจะแสดงเป็นการสาธิต OAuth 2.0 สําหรับ Google API เอกสาร
<script> var GoogleAuth; var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly'; function handleClientLoad() { // Load the API's client and auth2 modules. // Call the initClient function after the modules load. gapi.load('client:auth2', initClient); } function initClient() { // In practice, your app can retrieve one or more discovery documents. var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'; // Initialize the gapi.client object, which app uses to make API requests. // Get API key and client ID from API Console. // 'scope' field specifies space-delimited list of access scopes. gapi.client.init({ 'apiKey': 'YOUR_API_KEY', 'clientId': 'YOUR_CLIENT_ID', 'discoveryDocs': [discoveryUrl], 'scope': SCOPE }).then(function () { GoogleAuth = gapi.auth2.getAuthInstance(); // Listen for sign-in state changes. GoogleAuth.isSignedIn.listen(updateSigninStatus); // Handle initial sign-in state. (Determine if user is already signed in.) var user = GoogleAuth.currentUser.get(); setSigninStatus(); // Call handleAuthClick function when user clicks on // "Sign In/Authorize" button. $('#sign-in-or-out-button').click(function() { handleAuthClick(); }); $('#revoke-access-button').click(function() { revokeAccess(); }); }); } function handleAuthClick() { if (GoogleAuth.isSignedIn.get()) { // User is authorized and has clicked "Sign out" button. GoogleAuth.signOut(); } else { // User is not signed in. Start Google auth flow. GoogleAuth.signIn(); } } function revokeAccess() { GoogleAuth.disconnect(); } function setSigninStatus() { var user = GoogleAuth.currentUser.get(); var isAuthorized = user.hasGrantedScopes(SCOPE); if (isAuthorized) { $('#sign-in-or-out-button').html('Sign out'); $('#revoke-access-button').css('display', 'inline-block'); $('#auth-status').html('You are currently signed in and have granted ' + 'access to this app.'); } else { $('#sign-in-or-out-button').html('Sign In/Authorize'); $('#revoke-access-button').css('display', 'none'); $('#auth-status').html('You have not authorized this app or you are ' + 'signed out.'); } } function updateSigninStatus() { setSigninStatus(); } </script> <button id="sign-in-or-out-button" style="margin-left: 25px">Sign In/Authorize</button> <button id="revoke-access-button" style="display: none; margin-left: 25px">Revoke access</button> <div id="auth-status" style="display: inline; padding-left: 25px"></div><hr> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"> </script>
ปลายทาง 2.0 ของ OAuth
ตัวอย่างโค้ดนี้แสดงวิธีเติมขั้นตอน OAuth 2.0 ใน JavaScript โดยไม่ใช้ไลบรารีของไคลเอ็นต์ Google APIs สําหรับ JavaScript โค้ดนี้มีไว้สําหรับหน้า HTML ที่แสดงปุ่มเพื่อลองคําขอ API หากคลิกปุ่ม โค้ดจะตรวจสอบเพื่อดูว่าหน้าเว็บได้จัดเก็บโทเค็นเพื่อการเข้าถึง API ในพื้นที่เก็บข้อมูลของเบราว์เซอร์หรือไม่ หากเป็นเช่นนั้น ระบบจะดําเนินการกับคําขอ API มิเช่นนั้น จะเป็นการเริ่มขั้นตอน OAuth 2.0
สําหรับขั้นตอน OAuth 2.0 หน้าเว็บให้ทําตามขั้นตอนต่อไปนี้
- ซึ่งจะนําผู้ใช้ไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google ซึ่งขอสิทธิ์เข้าถึงขอบเขต
https://www.googleapis.com/auth/drive.metadata.readonly
- หลังจากให้ (หรือปฏิเสธ) เข้าถึงขอบเขตที่ขออย่างน้อย 1 รายการ ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเดิม ซึ่งจะแยกวิเคราะห์โทเค็นเพื่อการเข้าถึงจากสตริงตัวระบุส่วนย่อย
หน้านี้ใช้โทเค็นเพื่อการเข้าถึงเพื่อสร้างคําขอ API ตัวอย่าง
คําขอ API จะเรียกใช้เมธอด
about.get
ของ Drive API เพื่อดึงข้อมูลเกี่ยวกับบัญชี Google ไดรฟ์ของผู้ใช้ที่ได้รับอนุญาต- หากคําขอดําเนินการสําเร็จ ระบบจะบันทึกคําตอบของ API ในคอนโซลการแก้ไขข้อบกพร่องของเบราว์เซอร์
คุณเพิกถอนสิทธิ์เข้าถึงของแอปผ่านหน้าสิทธิ์ของบัญชี Google ได้ แอปจะแสดงเป็นการสาธิต OAuth 2.0 สําหรับ Google API เอกสาร
หากต้องการเรียกใช้โค้ดนี้ในเครื่อง คุณต้องตั้งค่าสําหรับตัวแปร YOUR_CLIENT_ID
และ YOUR_REDIRECT_URI
ที่สอดคล้องกับข้อมูลเข้าสู่ระบบการให้สิทธิ์ ควรตั้งค่าตัวแปร YOUR_REDIRECT_URI
เป็น URL เดียวกันกับที่กําลังแสดงหน้า ค่านี้ต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสําหรับไคลเอ็นต์ OAuth 2.0 ซึ่งคุณกําหนดค่าไว้ใน API Console Credentials page. หากค่านี้ไม่ตรงกับ URI ที่ได้รับอนุญาต คุณจะได้รับข้อผิดพลาด redirect_uri_mismatch
โปรเจ็กต์ของคุณต้องเปิดใช้ API ที่เหมาะสมสําหรับคําขอนี้
<html><head></head><body> <script> var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE'; var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE'; var fragmentString = location.hash.substring(1); // Parse query string to see if page request is coming from OAuth 2.0 server. var params = {}; var regex = /([^&=]+)=([^&]*)/g, m; while (m = regex.exec(fragmentString)) { params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); } if (Object.keys(params).length > 0) { localStorage.setItem('oauth2-test-params', JSON.stringify(params) ); if (params['state'] && params['state'] == 'try_sample_request') { trySampleRequest(); } } // If there's an access token, try an API request. // Otherwise, start OAuth 2.0 flow. function trySampleRequest() { var params = JSON.parse(localStorage.getItem('oauth2-test-params')); if (params && params['access_token']) { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/drive/v3/about?fields=user&' + 'access_token=' + params['access_token']); xhr.onreadystatechange = function (e) { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.response); } else if (xhr.readyState === 4 && xhr.status === 401) { // Token invalid, so prompt for user permission. oauth2SignIn(); } }; xhr.send(null); } else { oauth2SignIn(); } } /* * Create form to request access token from Google's OAuth 2.0 server. */ function oauth2SignIn() { // Google's OAuth 2.0 endpoint for requesting an access token var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth'; // Create element to open OAuth 2.0 endpoint in new window. var form = document.createElement('form'); form.setAttribute('method', 'GET'); // Send as a GET request. form.setAttribute('action', oauth2Endpoint); // Parameters to pass to OAuth 2.0 endpoint. var params = {'client_id': YOUR_CLIENT_ID, 'redirect_uri': YOUR_REDIRECT_URI, 'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly', 'state': 'try_sample_request', 'include_granted_scopes': 'true', 'response_type': 'token'}; // Add form parameters as hidden input values. for (var p in params) { var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', p); input.setAttribute('value', params[p]); form.appendChild(input); } // Add form to page and submit it to open the OAuth 2.0 endpoint. document.body.appendChild(form); form.submit(); } </script> <button onclick="trySampleRequest();">Try sample request</button> </body></html>
กฎการตรวจสอบต้นทางของ JavaScript
Google ใช้กฎการตรวจสอบต่อไปนี้กับต้นทางของ JavaScript เพื่อช่วยให้นักพัฒนาแอปรักษาความปลอดภัยของแอปพลิเคชัน ต้นทางของ JavaScript ต้องเป็นไปตามกฎเหล่านี้ โปรดดูคําจํากัดความของโดเมน โฮสต์ และสกีมที่RFC 3986 ส่วนที่ 3 ตามที่ระบุไว้ด้านล่าง
กฎการตรวจสอบความถูกต้อง | |
---|---|
รูปแบบ |
ต้นทางของ JavaScript ต้องใช้รูปแบบ HTTPS ไม่ใช่ HTTP ธรรมดา URI ของ localhost (รวมถึง URI ของที่อยู่ IP ของ localhost) จะได้รับการยกเว้นจากกฎนี้ |
โฮสต์ |
โฮสต์จะเป็นที่อยู่ IP ดิบไม่ได้ ที่อยู่ IP ของ localhost จะได้รับการยกเว้นจากกฎนี้ |
โดเมน |
“googleusercontent.com” goo.gl ) เว้นแต่แอปจะเป็นเจ้าของโดเมน |
ข้อมูลผู้ใช้ |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์ย่อยของ userinfo |
เส้นทาง |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์เส้นทาง |
การค้นหา |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์การค้นหา |
ส่วนย่อย |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์ส่วนย่อย |
อักขระ |
ต้นทางของ JavaScript ต้องไม่มีอักขระบางตัว ได้แก่
|
การให้สิทธิ์ที่เพิ่มขึ้น
ในโปรโตคอล OAuth 2.0 แอปของคุณจะขอสิทธิ์เข้าถึงทรัพยากร ซึ่งระบุโดยขอบเขต การดําเนินการนี้ถือเป็นแนวทางปฏิบัติแนะนําสําหรับประสบการณ์ของผู้ใช้ที่ขอการให้สิทธิ์ทรัพยากรในเวลาที่คุณต้องการ ในการเปิดใช้แนวทางปฏิบัติดังกล่าว เซิร์ฟเวอร์การให้สิทธิ์ของ Google รองรับการให้สิทธิ์แบบเพิ่มขึ้นเรื่อยๆ ฟีเจอร์นี้ช่วยให้คุณส่งคําขอขอบเขตได้ตามความจําเป็น และหากผู้ใช้ให้สิทธิ์ในขอบเขตใหม่ ให้แสดงรหัสการให้สิทธิ์ที่อาจแลกเปลี่ยนกับโทเค็นที่มีขอบเขตทั้งหมดที่ผู้ใช้ให้โปรเจ็กต์ได้
ตัวอย่างเช่น แอปที่ให้ผู้ใช้สุ่มตัวอย่างแทร็กเพลงและสร้างมิกซ์อาจต้องใช้ทรัพยากรน้อยมากเมื่อลงชื่อเข้าใช้ ซึ่งอาจไม่มีอะไรมากไปกว่าชื่อของผู้ที่ลงชื่อเข้าใช้ แต่การบันทึกมิกซ์ที่เสร็จสมบูรณ์ต้องมีสิทธิ์เข้าถึง Google ไดรฟ์ ผู้คนส่วนใหญ่มักพบว่านี่เป็นเรื่องธรรมชาติ หากมีการขอสิทธิ์การเข้าถึง Google ไดรฟ์ในขณะที่แอปต้องการจริงๆ เท่านั้น
ในกรณีนี้ แอปอาจขอขอบเขต openid
และ profile
ในการลงชื่อเข้าใช้ขั้นพื้นฐาน ในขณะที่ลงชื่อเข้าใช้ และจะขอขอบเขตของ https://www.googleapis.com/auth/drive.file
ตอนที่มีคําขอแรกในการบันทึกมิกซ์
กฎต่อไปนี้จะมีผลกับโทเค็นเพื่อการเข้าถึงที่ได้รับจากการให้สิทธิ์ที่เพิ่มขึ้น
- คุณจะใช้โทเค็นเพื่อเข้าถึงทรัพยากรที่สอดคล้องกับขอบเขตใดๆ ที่รวมไว้ในการให้สิทธิ์แบบรวมแบบใหม่ได้
- เมื่อคุณใช้โทเค็นการรีเฟรชสําหรับการให้สิทธิ์แบบรวมเพื่อรับโทเค็นเพื่อการเข้าถึง โทเค็นเพื่อการเข้าถึงแสดงถึงการให้สิทธิ์แบบรวม และสามารถใช้กับค่า
scope
ที่รวมอยู่ในการตอบกลับได้ - การให้สิทธิ์แบบรวมนี้รวมขอบเขตทั้งหมดที่ผู้ใช้มอบให้กับโปรเจ็กต์ API แม้ว่าจะมีการส่งคําขอสิทธิ์จากไคลเอ็นต์ต่างๆ ก็ตาม ตัวอย่างเช่น หากผู้ใช้ให้สิทธิ์เข้าถึงขอบเขตหนึ่งโดยใช้ไคลเอ็นต์เดสก์ท็อปของแอปพลิเคชัน แล้วให้สิทธิ์อีก 1 ขอบเขตไปยังแอปพลิเคชันเดียวกันผ่านไคลเอ็นต์ในอุปกรณ์เคลื่อนที่ การให้สิทธิ์แบบรวมจะมีทั้ง 2 ขอบเขต
- หากคุณเพิกถอนโทเค็นที่แสดงถึงการให้สิทธิ์แบบรวม สิทธิ์เข้าถึงขอบเขตการให้สิทธิ์ทั้งหมดในนามของผู้ใช้ที่เกี่ยวข้องจะถูกเพิกถอนพร้อมกัน
ตัวอย่างโค้ดด้านล่างแสดงวิธีเพิ่มขอบเขตในโทเค็นเพื่อการเข้าถึงที่มีอยู่ วิธีนี้จะช่วยให้แอปไม่ต้องจัดการโทเค็นเพื่อการเข้าถึงหลายรายการ
ไลบรารีของไคลเอ็นต์ JS
หากต้องการเพิ่มขอบเขตลงในโทเค็นเพื่อการเข้าถึงที่มีอยู่ ให้เรียกเมธอด GoogleUser.grant(options)
ออบเจ็กต์ options
ระบุขอบเขตเพิ่มเติมที่คุณต้องการให้สิทธิ์เข้าถึง
// Space-separated list of additional scope(s) you are requesting access to. // This code adds read-only access to the user's calendars via the Calendar API. var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly'; // Retrieve the GoogleUser object for the current user. var GoogleUser = GoogleAuth.currentUser.get(); GoogleUser.grant({'scope': NEW_SCOPES});
ปลายทาง 2.0 ของ OAuth
หากต้องการเพิ่มขอบเขตลงในโทเค็นเพื่อการเข้าถึงที่มีอยู่ ให้ใส่พารามิเตอร์ include_granted_scopes
ในคําขอไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google
โดยข้อมูลโค้ดต่อไปนี้จะแสดงวิธีดําเนินการดังกล่าว ข้อมูลโค้ดจะสมมติว่าคุณได้จัดเก็บขอบเขตที่โทเค็นเพื่อการเข้าถึงถูกต้องในพื้นที่เก็บข้อมูลภายในของเบราว์เซอร์ (โค้ดตัวอย่างที่สมบูรณ์จะจัดเก็บรายการขอบเขตที่โทเค็นเพื่อการเข้าถึงถูกต้องด้วยการตั้งค่าพร็อพเพอร์ตี้ oauth2-test-params.scope
ในพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์)
ข้อมูลโค้ดจะเปรียบเทียบขอบเขตที่โทเค็นเพื่อการเข้าถึงใช้ได้กับขอบเขตที่คุณต้องการใช้สําหรับการค้นหาหนึ่งๆ หากโทเค็นเพื่อการเข้าถึงไม่ครอบคลุมขอบเขตดังกล่าว กระบวนการของ OAuth 2.0 จะเริ่มต้นขึ้น
ที่นี่ ฟังก์ชัน oauth2SignIn
จะเหมือนกับฟังก์ชันที่ให้ไว้ในขั้นตอนที่ 2 (และระบุไว้ภายหลังในตัวอย่างที่สมบูรณ์)
var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly'; var params = JSON.parse(localStorage.getItem('oauth2-test-params')); var current_scope_granted = false; if (params.hasOwnProperty('scope')) { var scopes = params['scope'].split(' '); for (var s = 0; s < scopes.length; s++) { if (SCOPE == scopes[s]) { current_scope_granted = true; } } } if (!current_scope_granted) { oauth2SignIn(); // This function is defined elsewhere in this document. } else { // Since you already have access, you can proceed with the API request. }
กําลังเพิกถอนโทเค็น
ในบางกรณีผู้ใช้อาจต้องการเพิกถอนสิทธิ์เข้าถึงแอปพลิเคชัน ผู้ใช้จะเพิกถอนสิทธิ์เข้าถึงได้โดยไปที่การตั้งค่าบัญชี ดูข้อมูลเพิ่มเติมได้จากเอกสารสนับสนุนในหัวข้อนําเว็บไซต์หรือแอปออกของเว็บไซต์ของบุคคลที่สามและแอปที่มีสิทธิ์เข้าถึงบัญชีของคุณ
นอกจากนี้ แอปพลิเคชันอาจเพิกถอนการเข้าถึงแบบเป็นโปรแกรมด้วยโปรแกรมได้ การเพิกถอนแบบเป็นโปรแกรมมีความสําคัญในกรณีที่ผู้ใช้ยกเลิกการสมัคร นําแอปพลิเคชันออก หรือทรัพยากร API ที่แอปต้องใช้มีการเปลี่ยนแปลงอย่างมาก กล่าวคือ กระบวนการนําออกส่วนหนึ่งอาจรวมถึงคําขอ API เพื่อให้มีการนําสิทธิ์ที่มอบให้กับแอปพลิเคชันไปก่อนหน้านี้ออก
ไลบรารีของไคลเอ็นต์ JS
หากต้องการเพิกถอนโทเค็นแบบเป็นโปรแกรม ให้เรียกใช้ GoogleAuth.disconnect()
ดังนี้
GoogleAuth.disconnect();
ปลายทาง 2.0 ของ OAuth
หากต้องการเพิกถอนโทเค็นแบบเป็นโปรแกรม แอปพลิเคชันจะส่งคําขอไปยัง https://oauth2.googleapis.com/revoke
และมีโทเค็นเป็นพารามิเตอร์ดังนี้
curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \ https://oauth2.googleapis.com/revoke?token={token}
โดยอาจเป็นโทเค็นเพื่อการเข้าถึงหรือโทเค็นการรีเฟรช หากโทเค็นเป็นโทเค็นเพื่อการเข้าถึงและมีโทเค็นการรีเฟรชที่สอดคล้องกัน ระบบจะเพิกถอนโทเค็นการรีเฟรชด้วย
หากการเพิกถอนประมวลผลสําเร็จแล้ว รหัสสถานะ HTTP ของการตอบกลับจะเป็น 200
สําหรับเงื่อนไขข้อผิดพลาด จะมีการแสดงรหัสสถานะ HTTP 400
พร้อมกับรหัสข้อผิดพลาด
ข้อมูลโค้ด JavaScript ต่อไปนี้แสดงวิธีเพิกถอนโทเค็นใน JavaScript โดยไม่ใช้ไลบรารีของไคลเอ็นต์ Google APIs สําหรับ JavaScript เนื่องจากปลายทาง OAuth 2.0 ของ Google สําหรับการเพิกถอนโทเค็นไม่รองรับการแชร์ทรัพยากรแบบข้ามต้นทาง (CORS) โค้ดจึงสร้างแบบฟอร์มและส่งแบบฟอร์มไปยังปลายทางแทนการใช้เมธอด XMLHttpRequest()
เพื่อโพสต์คําขอ
function revokeAccess(accessToken) { // Google's OAuth 2.0 endpoint for revoking access tokens. var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke'; // Create <form> element to use to POST data to the OAuth 2.0 endpoint. var form = document.createElement('form'); form.setAttribute('method', 'post'); form.setAttribute('action', revokeTokenEndpoint); // Add access token to the form so it is set as value of 'token' parameter. // This corresponds to the sample curl request, where the URL is: // https://oauth2.googleapis.com/revoke?token={token} var tokenField = document.createElement('input'); tokenField.setAttribute('type', 'hidden'); tokenField.setAttribute('name', 'token'); tokenField.setAttribute('value', accessToken); form.appendChild(tokenField); // Add form to page and submit it to actually revoke the token. document.body.appendChild(form); form.submit(); }