เอกสารนี้จะอธิบายวิธีใช้การให้สิทธิ์ OAuth 2.0 เพื่อเข้าถึง Google APIs จากเว็บแอปพลิเคชัน JavaScript OAuth 2.0 ช่วยให้ผู้ใช้แชร์ข้อมูลบางอย่างกับแอปพลิเคชันได้ โดยที่ยังเก็บชื่อผู้ใช้ รหัสผ่าน และข้อมูลอื่นๆ ไว้เป็นส่วนตัว เช่น แอปพลิเคชันสามารถใช้ OAuth 2.0 เพื่อขอรับสิทธิ์จากผู้ใช้ให้จัดเก็บไฟล์ไว้ใน Google ไดรฟ์
ขั้นตอน OAuth 2.0 นี้เรียกว่าขั้นตอนการให้สิทธิ์โดยนัย โดยออกแบบมาสำหรับแอปพลิเคชันที่เข้าถึง API เฉพาะเมื่อผู้ใช้อยู่ในแอปพลิเคชันเท่านั้น โดยแอปพลิเคชันเหล่านี้จะเก็บข้อมูลที่เป็นความลับไม่ได้
ในขั้นตอนนี้ แอปจะเปิด URL ของ Google ที่ใช้พารามิเตอร์การค้นหาเพื่อระบุแอปและประเภทการเข้าถึง API ที่แอปต้องการ คุณจะเปิด URL ในหน้าต่างเบราว์เซอร์ปัจจุบันหรือในป๊อปอัปก็ได้ ผู้ใช้สามารถตรวจสอบสิทธิ์กับ Google และให้สิทธิ์ที่ขอได้ จากนั้น Google จะเปลี่ยนเส้นทางผู้ใช้กลับไปยังแอปของคุณ การเปลี่ยนเส้นทางจะมีโทเค็นเพื่อการเข้าถึง ซึ่งแอปจะยืนยันและใช้เพื่อสร้างคําขอ API
ไลบรารีของไคลเอ็นต์ Google APIs และบริการ Google Identity
หากใช้ไลบรารีของไคลเอ็นต์ Google APIs สำหรับ JavaScript เพื่อให้สิทธิ์เรียกใช้ Google ที่ได้รับอนุญาต คุณควรใช้ไลบรารี JavaScript ของ Google Identity Services เพื่อจัดการโฟลว์ OAuth 2.0 โปรดดูโมเดลโทเค็นของบริการข้อมูลประจำตัวของ Google ซึ่งอิงตามขั้นตอนการให้สิทธิ์โดยนัย OAuth 2.0
สิ่งที่ต้องดำเนินการก่อน
เปิดใช้ API สำหรับโปรเจ็กต์
แอปพลิเคชันที่เรียกใช้ Google API ต้องเปิดใช้ 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 นั้น
- เลือก API ที่คุณต้องการเปิดใช้ แล้วคลิกปุ่มเปิดใช้
- If prompted, enable billing.
- If prompted, read and accept the API's Terms of Service.
สร้างข้อมูลเข้าสู่ระบบการให้สิทธิ์
แอปพลิเคชันที่ใช้ OAuth 2.0 ในการเข้าถึง Google API ต้องมีข้อมูลเข้าสู่ระบบการให้สิทธิ์ที่ระบุแอปพลิเคชันกับเซิร์ฟเวอร์ 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 APIs
การรับโทเค็นเพื่อการเข้าถึง OAuth 2.0
ขั้นตอนต่อไปนี้แสดงวิธีที่แอปพลิเคชันของคุณโต้ตอบกับเซิร์ฟเวอร์ OAuth 2.0 ของ Google เพื่อขอความยินยอมจากผู้ใช้ในการส่งคำขอ API ในนามของผู้ใช้ แอปพลิเคชันต้องได้รับความยินยอมดังกล่าวก่อนจึงจะดำเนินการตามคำขอ Google API ที่ต้องมีการให้สิทธิ์ผู้ใช้ได้
ขั้นตอนที่ 1: เปลี่ยนเส้นทางไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google
หากต้องการขอสิทธิ์ในการเข้าถึงข้อมูลของผู้ใช้ ให้เปลี่ยนเส้นทางผู้ใช้ไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google
ปลายทาง OAuth 2.0
สร้าง URL เพื่อขอสิทธิ์เข้าถึงจากอุปกรณ์ปลายทาง OAuth 2.0 ของ Google ที่ https://accounts.google.com/o/oauth2/v2/auth
ปลายทางนี้เข้าถึงได้ผ่าน HTTPS และการเชื่อมต่อ HTTP แบบธรรมดาจะถูกปฏิเสธ
เซิร์ฟเวอร์การให้สิทธิ์ของ Google รองรับพารามิเตอร์สตริงการค้นหาต่อไปนี้สำหรับแอปพลิเคชันเว็บเซิร์ฟเวอร์
พารามิเตอร์ | |||||||
---|---|---|---|---|---|---|---|
client_id |
จำเป็น
รหัสไคลเอ็นต์สำหรับแอปพลิเคชันของคุณ โดยคุณจะดูค่านี้ได้ใน Credentials page API Console |
||||||
redirect_uri |
จำเป็น
กำหนดตำแหน่งที่เซิร์ฟเวอร์ API เปลี่ยนเส้นทางผู้ใช้หลังจากที่ผู้ใช้ดำเนินการตามขั้นตอนการให้สิทธิ์เรียบร้อยแล้ว ค่าต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับไคลเอ็นต์ OAuth 2.0 ซึ่งคุณกำหนดค่าไว้ใน API Console
Credentials pageของไคลเอ็นต์ทุกประการ หากค่านี้ไม่ตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับ โปรดทราบว่ารูปแบบ |
||||||
response_type |
จำเป็น
แอปพลิเคชัน JavaScript ต้องตั้งค่าของพารามิเตอร์เป็น |
||||||
scope |
จำเป็น
รายการขอบเขตที่คั่นด้วยช่องว่างซึ่งระบุทรัพยากรที่แอปพลิเคชันของคุณเข้าถึงได้ในนามของผู้ใช้ ค่าเหล่านี้จะแจ้งหน้าจอคำยินยอมที่ Google แสดงต่อผู้ใช้ ขอบเขตช่วยให้แอปพลิเคชันสามารถขอสิทธิ์เข้าถึงทรัพยากรที่จำเป็นเท่านั้น ขณะเดียวกันก็ช่วยให้ผู้ใช้ควบคุมจำนวนสิทธิ์เข้าถึงที่จะให้แอปพลิเคชันได้ ดังนั้นจึงมีความสัมพันธ์แบบผกผันระหว่างจำนวนขอบเขตที่ขอกับแนวโน้มที่จะได้รับความยินยอมจากผู้ใช้ เราขอแนะนำให้แอปพลิเคชันขอสิทธิ์เข้าถึงขอบเขตการให้สิทธิ์ตามบริบทหากเป็นไปได้ การขอสิทธิ์เข้าถึงข้อมูลผู้ใช้ในบริบทผ่านการให้สิทธิ์ที่เพิ่มขึ้นช่วยให้ผู้ใช้เข้าใจได้ง่ายขึ้นว่าเหตุใดแอปพลิเคชันจึงจำเป็นต้องขอสิทธิ์เข้าถึง |
||||||
state |
แนะนำ
ระบุค่าสตริงที่แอปพลิเคชันจะใช้เพื่อรักษาสถานะระหว่างคำขอการให้สิทธิ์และการตอบกลับของเซิร์ฟเวอร์การให้สิทธิ์
เซิร์ฟเวอร์จะแสดงผลค่าที่คุณส่งเป็นคู่ คุณใช้พารามิเตอร์นี้เพื่อวัตถุประสงค์หลายประการได้ เช่น การนำผู้ใช้ไปยังทรัพยากรที่ถูกต้องในแอปพลิเคชัน การส่ง nonces และการลดการปลอมแปลงคำขอข้ามเว็บไซต์ การใช้ค่า |
||||||
include_granted_scopes |
ไม่บังคับ
เปิดให้แอปพลิเคชันใช้การให้สิทธิ์ที่เพิ่มขึ้นเพื่อขอสิทธิ์เข้าถึงขอบเขตเพิ่มเติมในบริบท หากคุณตั้งค่าของพารามิเตอร์นี้เป็น |
||||||
enable_granular_consent |
ไม่บังคับ
ค่าเริ่มต้นคือ เมื่อ Google เปิดใช้สิทธิ์แบบละเอียดสำหรับแอปพลิเคชัน พารามิเตอร์นี้จะไม่มีผลอีกต่อไป |
||||||
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(); }
ขั้นตอนที่ 2: 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 หรือ AppAuth สำหรับ Android ของ OpenID Foundation
นักพัฒนาเว็บอาจพบข้อผิดพลาดนี้เมื่อแอป Android เปิดลิงก์เว็บทั่วไปใน User Agent แบบฝัง และผู้ใช้ไปยังปลายทางการให้สิทธิ์ OAuth 2.0 ของ Google จากเว็บไซต์ของคุณ นักพัฒนาแอปควรอนุญาตให้เปิดลิงก์ทั่วไปในเครื่องจัดการลิงก์เริ่มต้นของระบบปฏิบัติการ ซึ่งรวมถึงตัวแฮนเดิล Android App Link หรือแอปเบราว์เซอร์เริ่มต้น ไลบรารีแท็บที่กำหนดเองของ Android ก็เป็นตัวเลือกที่รองรับเช่นกัน
iOS
นักพัฒนาซอฟต์แวร์ iOS และ macOS อาจพบข้อผิดพลาดนี้เมื่อเปิดคำขอการให้สิทธิ์ใน WKWebView
นักพัฒนาซอฟต์แวร์ควรใช้ไลบรารี iOS แทน เช่น Google Sign-In สำหรับ iOS หรือ AppAuth สำหรับ iOS ของ OpenID Foundation
นักพัฒนาเว็บอาจพบข้อผิดพลาดนี้เมื่อแอป iOS หรือ macOS เปิดลิงก์เว็บทั่วไปใน User Agent แบบฝัง และผู้ใช้ไปยังปลายทางการให้สิทธิ์ OAuth 2.0 ของ Google จากเว็บไซต์ของคุณ นักพัฒนาซอฟต์แวร์ควรอนุญาตให้เปิดลิงก์ทั่วไปในเครื่องจัดการลิงก์เริ่มต้นของระบบปฏิบัติการ ซึ่งรวมถึงตัวแฮนเดิล Universal Link หรือแอปเบราว์เซอร์เริ่มต้น ก็ยังมีไลบรารี SFSafariViewController
เป็นตัวเลือกที่รองรับด้วย
org_internal
รหัสไคลเอ็นต์ OAuth ในคำขอเป็นส่วนหนึ่งของโปรเจ็กต์ที่จำกัดการเข้าถึงบัญชี Google ใน องค์กร Google Cloud ที่เจาะจง ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่านี้ได้ในส่วนประเภทผู้ใช้ในบทความช่วยเหลือเกี่ยวกับการตั้งค่าหน้าจอคำยินยอม OAuth
invalid_client
ต้นทางที่ส่งคำขอไม่ได้รับอนุญาตสำหรับไคลเอ็นต์นี้ โปรดดูorigin_mismatch
invalid_grant
เมื่อใช้การให้สิทธิ์ที่เพิ่มขึ้น โทเค็นอาจหมดอายุหรือใช้งานไม่ได้ ตรวจสอบสิทธิ์ผู้ใช้อีกครั้งและขอความยินยอมจากผู้ใช้เพื่อรับโทเค็นใหม่ หากคุณเห็นข้อผิดพลาดนี้ต่อไป โปรดตรวจสอบว่าแอปพลิเคชันได้รับการกำหนดค่าอย่างถูกต้อง และคุณใช้โทเค็นและพารามิเตอร์ที่ถูกต้องในคำขอ ไม่เช่นนั้น บัญชีผู้ใช้อาจถูกลบหรือปิดใช้ไปแล้ว
origin_mismatch
รูปแบบ โดเมน และ/หรือพอร์ตของ JavaScript ที่สร้างคำขอการให้สิทธิ์อาจไม่ตรงกับ URI ต้นทางของ JavaScript ที่ได้รับอนุญาตซึ่งลงทะเบียนไว้สำหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบต้นทาง JavaScript ที่ได้รับอนุญาตใน Google API Console Credentials page
redirect_uri_mismatch
redirect_uri
ที่ส่งผ่านในคำขอการให้สิทธิ์ไม่ตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตใน Google API Console Credentials page
รูปแบบ โดเมน และ/หรือพอร์ตของ JavaScript ที่สร้างคำขอการให้สิทธิ์อาจไม่ตรงกับ URI ต้นทางของ JavaScript ที่ได้รับอนุญาตซึ่งลงทะเบียนไว้สำหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบต้นทาง JavaScript ที่ได้รับอนุญาตใน Google API Console Credentials page
พารามิเตอร์ redirect_uri
อาจหมายถึงขั้นตอน OAuth นอกขอบเขต (OOB) ที่เลิกใช้งานไปแล้วและไม่รองรับอีกต่อไป โปรดดูคำแนะนำในการย้ายข้อมูลเพื่ออัปเดตการผสานรวม
invalid_request
เกิดข้อผิดพลาดบางอย่างกับคำขอที่คุณส่ง ซึ่งอาจเกิดจากสาเหตุหลายประการดังนี้
- คำขอมีรูปแบบไม่ถูกต้อง
- คำขอไม่มีพารามิเตอร์ที่จำเป็น
- คำขอใช้วิธีการให้สิทธิ์ที่ Google ไม่รองรับ ยืนยันว่าการผสานรวม OAuth ใช้วิธีการผสานรวมที่แนะนำ
ขั้นตอนที่ 3: จัดการการตอบสนองของเซิร์ฟเวอร์ OAuth 2.0
ปลายทาง OAuth 2.0
เซิร์ฟเวอร์ 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 API
ปลายทาง OAuth 2.0
หลังจากแอปพลิเคชันได้รับโทเค็นเพื่อการเข้าถึงแล้ว คุณจะใช้โทเค็นดังกล่าวเพื่อเรียก Google API ในนามของบัญชีผู้ใช้หนึ่งๆ ได้หาก API นั้นได้รับขอบเขตการเข้าถึงที่ API กำหนด ซึ่งทำได้โดยการรวมโทเค็นเพื่อการเข้าถึงไว้ในคำขอที่ส่งไปยัง API โดยใส่พารามิเตอร์การค้นหา access_token
หรือค่า Bearer
ของส่วนหัว HTTP ของ Authorization
ขอแนะนำให้ใช้ส่วนหัว 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);
ตัวอย่างที่สมบูรณ์
ปลายทาง OAuth 2.0
ตัวอย่างโค้ดนี้แสดงวิธีทำโฟลว์ 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'; // Parse query string to see if page request is coming from OAuth 2.0 server. var fragmentString = location.hash.substring(1); var params = {}; var regex = /([^&=]+)=([^&]*)/g, m; while (m = regex.exec(fragmentString)) { params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); } if (Object.keys(params).length > 0 && params['state']) { if (params['state'] == localStorage.getItem('state')) { localStorage.setItem('oauth2-test-params', JSON.stringify(params) ); trySampleRequest(); } else { console.log('State mismatch. Possible CSRF attack'); } } // Function to generate a random state value function generateCryptoRandomState() { const randomValues = new Uint32Array(2); window.crypto.getRandomValues(randomValues); // Encode as UTF-8 const utf8Encoder = new TextEncoder(); const utf8Array = utf8Encoder.encode( String.fromCharCode.apply(null, randomValues) ); // Base64 encode the UTF-8 data return btoa(String.fromCharCode.apply(null, utf8Array)) .replace(/\+/g, '-') .replace(/\//g, '_') .replace(/=+$/, ''); } // 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() { // create random state value and store in local storage var state = generateCryptoRandomState(); localStorage.setItem('state', state); // 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': state, '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 ต้องไม่มีคอมโพเนนต์ย่อยของข้อมูลผู้ใช้ |
เส้นทาง |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์เส้นทาง |
การค้นหา |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์การค้นหา |
ส่วนย่อย |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์ Fragment |
อักขระ |
ต้นทางของ JavaScript ต้องไม่มีอักขระบางตัว รวมถึง
|
การให้สิทธิ์ที่เพิ่มขึ้น
ในโปรโตคอล OAuth 2.0 แอปของคุณจะขอสิทธิ์เข้าถึงทรัพยากร ซึ่งระบุโดยขอบเขต ซึ่งถือเป็นแนวทางปฏิบัติแนะนำสำหรับประสบการณ์ของผู้ใช้ในการขอสิทธิ์สำหรับทรัพยากรในเวลาที่คุณต้องการ หากต้องการเปิดใช้การดำเนินการนี้ เซิร์ฟเวอร์การให้สิทธิ์ของ Google จะรองรับการให้สิทธิ์ที่เพิ่มขึ้น ฟีเจอร์นี้ช่วยให้คุณขอขอบเขตได้ตามต้องการ และหากผู้ใช้ให้สิทธิ์สำหรับขอบเขตใหม่ ระบบจะแสดงรหัสการให้สิทธิ์ที่อาจแลกเปลี่ยนเป็นโทเค็นที่มีขอบเขตทั้งหมดซึ่งผู้ใช้ได้ให้สิทธิ์โปรเจ็กต์ไว้
ตัวอย่างเช่น แอปที่ให้ผู้ใช้ลองใช้แทร็กเพลงและสร้างมิกซ์ได้อาจต้องใช้ทรัพยากรเพียงเล็กน้อยในเวลาที่ลงชื่อเข้าใช้ หรืออาจไม่มีมากกว่าแค่ชื่อของบุคคลที่ลงชื่อเข้าใช้ อย่างไรก็ตาม การบันทึกมิกซ์ที่เสร็จสมบูรณ์จะต้องมีสิทธิ์เข้าถึง Google ไดรฟ์ของผู้ใช้ คนส่วนใหญ่มักคิดว่าเป็นธรรมชาติหากขอสิทธิ์การเข้าถึง Google ไดรฟ์ในเวลาที่ระบบต้องการแอปจริงๆ เท่านั้น
ในกรณีนี้ เมื่อลงชื่อเข้าใช้ แอปอาจขอขอบเขต openid
และ profile
เพื่อลงชื่อเข้าใช้แบบพื้นฐาน จากนั้นจะขอขอบเขต https://www.googleapis.com/auth/drive.file
ในภายหลังเมื่อระบบขอบันทึกมิกซ์
กฎต่อไปนี้ใช้กับโทเค็นเพื่อการเข้าถึงที่ได้รับจากการให้สิทธิ์ที่เพิ่มขึ้น
- โทเค็นนี้อาจใช้เพื่อเข้าถึงทรัพยากรที่สอดคล้องกับขอบเขตทั้งหมดที่รวมเป็นการให้สิทธิ์แบบรวมใหม่
- เมื่อใช้โทเค็นการรีเฟรชสำหรับการให้สิทธิ์แบบรวมเพื่อรับโทเค็นเพื่อการเข้าถึง โทเค็นเพื่อการเข้าถึงจะแทนการให้สิทธิ์แบบรวม และนำไปใช้กับค่า
scope
ใดก็ได้ที่รวมอยู่ในการตอบกลับ - การให้สิทธิ์แบบรวมจะมีขอบเขตทั้งหมดที่ผู้ใช้มอบให้กับโปรเจ็กต์ API แม้ว่าจะขอการให้สิทธิ์จากไคลเอ็นต์ที่แตกต่างกันก็ตาม เช่น หากผู้ใช้ได้ให้สิทธิ์เข้าถึงขอบเขตหนึ่งโดยใช้ไคลเอ็นต์เดสก์ท็อปของแอปพลิเคชัน จากนั้นได้ให้สิทธิ์อีกขอบเขตหนึ่งแก่แอปพลิเคชันเดียวกันผ่านไคลเอ็นต์อุปกรณ์เคลื่อนที่ การให้สิทธิ์แบบรวมจะมีทั้ง 2 ขอบเขต
- หากคุณเพิกถอนโทเค็นที่แสดงถึงการให้สิทธิ์แบบรวม ระบบจะเพิกถอนการเข้าถึงขอบเขตของการให้สิทธิ์นั้นทั้งหมดในนามของผู้ใช้ที่เกี่ยวข้องพร้อมกัน
ตัวอย่างโค้ดด้านล่างแสดงวิธีเพิ่มขอบเขตไปยังโทเค็นเพื่อการเข้าถึงที่มีอยู่ วิธีนี้ช่วยให้แอปไม่ต้องจัดการโทเค็นเพื่อการเข้าถึงหลายรายการ
ปลายทาง OAuth 2.0
หากต้องการเพิ่มขอบเขตในโทเค็นเพื่อการเข้าถึงที่มีอยู่ ให้ใส่พารามิเตอร์ 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 ไว้ด้วยเพื่อให้แน่ใจว่าสิทธิ์ที่มอบให้แอปพลิเคชันก่อนหน้านี้ได้ถูกนำออกแล้ว
ปลายทาง OAuth 2.0
หากต้องการเพิกถอนโทเค็นแบบเป็นโปรแกรม แอปพลิเคชันจะส่งคำขอไปยัง 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(); }