เอกสารนี้อธิบายวิธีใช้การให้สิทธิ์ OAuth 2.0 เพื่อเข้าถึง YouTube Analytics API หรือ YouTube Reporting API จากเว็บแอปพลิเคชัน JavaScript OAuth 2.0 อนุญาตให้ผู้ใช้แชร์ข้อมูลบางอย่างกับแอปพลิเคชันโดยที่ยังเก็บชื่อผู้ใช้ รหัสผ่าน และข้อมูลอื่นๆ ไว้เป็นส่วนตัว เช่น แอปพลิเคชันสามารถใช้ OAuth 2.0 เพื่อขอสิทธิ์ดึงข้อมูล YouTube Analytics ของช่อง
ขั้นตอน OAuth 2.0 นี้เรียกว่าขั้นตอนการให้สิทธิ์แบบโดยนัย นโยบายนี้ออกแบบมาสำหรับแอปพลิเคชันที่เข้าถึง API เฉพาะในขณะที่ผู้ใช้อยู่ในแอปพลิเคชันเท่านั้น แอปพลิเคชันเหล่านี้ไม่สามารถจัดเก็บข้อมูลที่เป็นความลับ
ในขั้นตอนนี้ แอปจะเปิด URL ของ Google ที่ใช้พารามิเตอร์การค้นหาเพื่อระบุแอปของคุณและประเภทการเข้าถึง API ที่แอปต้องการ คุณสามารถเปิด URL ในหน้าต่างเบราว์เซอร์ปัจจุบันหรือป๊อปอัป ผู้ใช้สามารถตรวจสอบสิทธิ์กับ Google และให้สิทธิ์ที่ขอได้ จากนั้น Google จะเปลี่ยนเส้นทางผู้ใช้กลับไปยังแอปของคุณ โดยการเปลี่ยนเส้นทางจะมีโทเค็นการเข้าถึง ซึ่งแอปของคุณจะยืนยันแล้วนำไปใช้ส่งคำขอ API
ไลบรารีของไคลเอ็นต์ Google API และบริการระบุตัวตนของ Google
หากคุณใช้ไลบรารีของไคลเอ็นต์ Google API สําหรับ 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.
- ใช้หน้าไลบรารีเพื่อค้นหาและเปิดใช้ YouTube Analytics API และ YouTube Reporting API แอปพลิเคชันจำนวนมากที่ดึงข้อมูล YouTube Analytics ยังทำงานร่วมกับ YouTube Data API ด้วย ค้นหา API อื่นๆ ที่แอปพลิเคชันของคุณจะใช้และเปิดใช้ API เหล่านั้นด้วย
สร้างข้อมูลเข้าสู่ระบบการให้สิทธิ์
แอปพลิเคชันที่ใช้ 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 ของข้อมูลวิเคราะห์ YouTube ใช้ขอบเขตต่อไปนี้
| ขอบเขต | |
|---|---|
| https://www.googleapis.com/auth/youtube | จัดการบัญชี YouTube ของคุณ |
| https://www.googleapis.com/auth/youtube.readonly | ดูบัญชี YouTube ของคุณ |
| https://www.googleapis.com/auth/youtubepartner | ดูและจัดการพื้นที่ของคุณและเนื้อหาที่เกี่ยวข้องใน YouTube |
| https://www.googleapis.com/auth/yt-analytics-monetary.readonly | ดูรายงาน YouTube Analytics ด้านการเงินและไม่ใช่ด้านการเงินสำหรับเนื้อหา YouTube ของคุณ |
| https://www.googleapis.com/auth/yt-analytics.readonly | ดูรายงาน YouTube Analytics สำหรับเนื้อหา YouTube ของคุณ |
YouTube Reporting API ใช้ขอบเขตต่อไปนี้
| ขอบเขต | |
|---|---|
| https://www.googleapis.com/auth/yt-analytics-monetary.readonly | ดูรายงาน YouTube Analytics ด้านการเงินและไม่ใช่ด้านการเงินสำหรับเนื้อหา YouTube ของคุณ |
| https://www.googleapis.com/auth/yt-analytics.readonly | ดูรายงาน YouTube Analytics สำหรับเนื้อหา YouTube ของคุณ |
เอกสารขอบเขต OAuth 2.0 API มีรายการขอบเขตทั้งหมดที่คุณอาจใช้เพื่อเข้าถึง Google API
การรับโทเค็นการเข้าถึง 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 |
จำเป็น
รหัสไคลเอ็นต์สําหรับแอปพลิเคชัน คุณดูค่านี้ได้ในส่วน API Console Credentials page |
||||||||||||||||||
redirect_uri |
จำเป็น
กำหนดตำแหน่งที่เซิร์ฟเวอร์ API จะเปลี่ยนเส้นทางผู้ใช้หลังจากที่ผู้ใช้ทำตามขั้นตอนการให้สิทธิ์จนเสร็จสมบูรณ์ ค่าต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตรายการใดรายการหนึ่งสำหรับไคลเอ็นต์ OAuth 2.0 ที่คุณกำหนดค่าไว้ใน API Console
Credentials pageของลูกค้า หากค่านี้ไม่ตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสําหรับ โปรดทราบว่ารูปแบบ |
||||||||||||||||||
response_type |
จำเป็น
แอปพลิเคชัน JavaScript ต้องตั้งค่าพารามิเตอร์เป็น |
||||||||||||||||||
scope |
จำเป็น
รายการขอบเขตที่คั่นด้วยเว้นวรรคซึ่งระบุทรัพยากรที่แอปพลิเคชันของคุณเข้าถึงในนามของผู้ใช้ได้ ค่าเหล่านี้จะระบุหน้าจอความยินยอมที่ Google แสดงต่อผู้ใช้ ขอบเขตช่วยให้แอปพลิเคชันขอสิทธิ์เข้าถึงเฉพาะทรัพยากรที่จําเป็นเท่านั้น และช่วยให้ผู้ใช้ควบคุมระดับการเข้าถึงที่มอบให้กับแอปพลิเคชันได้ด้วย ดังนั้น จำนวนขอบเขตที่ขอจึงมีความสัมพันธ์แบบผกผันกับแนวโน้มที่จะได้รับความยินยอมจากผู้ใช้ API ของข้อมูลวิเคราะห์ YouTube ใช้ขอบเขตต่อไปนี้
YouTube Reporting API ใช้ขอบเขตต่อไปนี้
เอกสารขอบเขต OAuth 2.0 API มีรายการขอบเขตทั้งหมดที่คุณอาจใช้เพื่อเข้าถึง Google API เราขอแนะนำให้แอปพลิเคชันขอสิทธิ์เข้าถึงขอบเขตการให้สิทธิ์ในบริบทเมื่อใดก็ตามที่เป็นไปได้ การขอสิทธิ์เข้าถึงข้อมูลผู้ใช้ตามบริบทผ่านการตรวจสอบสิทธิ์ทีละส่วนจะช่วยให้ผู้ใช้เข้าใจได้ง่ายขึ้นว่าเหตุใดแอปพลิเคชันจึงต้องการสิทธิ์เข้าถึงที่ขอ |
||||||||||||||||||
state |
แนะนำ
ระบุค่าสตริงที่แอปพลิเคชันใช้เพื่อรักษาสถานะระหว่างคำขอการให้สิทธิ์กับการตอบกลับของเซิร์ฟเวอร์การให้สิทธิ์
เซิร์ฟเวอร์จะแสดงผลค่าที่คุณส่งเป็นคู่ คุณสามารถใช้พารามิเตอร์นี้เพื่อวัตถุประสงค์หลายอย่าง เช่น การนำผู้ใช้ไปยังแหล่งข้อมูลที่ถูกต้องในแอปพลิเคชัน การส่ง Nonce และการลดการปลอมแปลงคำขอข้ามเว็บไซต์ เนื่องจาก |
||||||||||||||||||
include_granted_scopes |
ไม่บังคับ
ช่วยให้แอปพลิเคชันใช้การให้สิทธิ์แบบเพิ่มทีละส่วนเพื่อขอสิทธิ์เข้าถึงขอบเขตเพิ่มเติมในบริบทได้ หากคุณตั้งค่าพารามิเตอร์นี้เป็น |
||||||||||||||||||
enable_granular_consent |
ไม่บังคับ
ค่าเริ่มต้นคือ เมื่อ Google เปิดใช้สิทธิ์แบบละเอียดสําหรับแอปพลิเคชัน พารามิเตอร์นี้จะไม่มีผลอีกต่อไป |
||||||||||||||||||
login_hint |
ไม่บังคับ
หากแอปพลิเคชันทราบว่าผู้ใช้รายใดพยายามตรวจสอบสิทธิ์ แอปพลิเคชันจะใช้พารามิเตอร์นี้เพื่อแสดงคำแนะนำแก่เซิร์ฟเวอร์การตรวจสอบสิทธิ์ของ Google ได้ เซิร์ฟเวอร์จะใช้คำแนะนำเพื่อลดความซับซ้อนของขั้นตอนการเข้าสู่ระบบด้วยการป้อนข้อมูลช่องอีเมลในแบบฟอร์มการลงชื่อเข้าใช้ล่วงหน้า หรือเลือกเซสชันการเข้าสู่ระบบหลายรายการที่เหมาะสม ตั้งค่าพารามิเตอร์เป็นอีเมลหรือตัวระบุ |
||||||||||||||||||
prompt |
ไม่บังคับ
รายการพรอมต์ที่แยกด้วยเว้นวรรคและคำนึงถึงตัวพิมพ์เล็กและใหญ่เพื่อแสดงต่อผู้ใช้ หากคุณไม่ได้ระบุพารามิเตอร์นี้ ระบบจะแสดงข้อความแจ้งให้ผู้ใช้ทราบเฉพาะเมื่อโปรเจ็กต์ขอสิทธิ์เข้าถึงเป็นครั้งแรกเท่านั้น ดูข้อมูลเพิ่มเติมได้ใน ข้อความแจ้งให้ขอความยินยอมอีกครั้ง ค่าที่เป็นไปได้มีดังนี้
|
||||||||||||||||||
ตัวอย่างการเปลี่ยนเส้นทางไปยังเซิร์ฟเวอร์การให้สิทธิ์ของ Google
URL ตัวอย่างด้านล่างขอสิทธิ์เข้าถึงแบบออฟไลน์ (access_type=offline) ในสโคปที่อนุญาตให้เข้าถึงเพื่อดึงข้อมูลรายงาน YouTube Analytics ของผู้ใช้ โดยจะใช้การให้สิทธิ์แบบเพิ่มเพื่อให้มั่นใจว่าโทเค็นการเข้าถึงใหม่จะครอบคลุมขอบเขตทั้งหมดที่ผู้ใช้เคยให้สิทธิ์เข้าถึงแอปพลิเคชันไว้ก่อนหน้านี้ นอกจากนี้ URL ยังตั้งค่าสําหรับพารามิเตอร์ redirect_uri, response_type และ client_id ที่จําเป็น รวมถึงพารามิเตอร์ state ด้วย URL มีการเว้นบรรทัดและการเว้นวรรคเพื่อให้อ่านได้ง่าย
https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
include_granted_scopes=true&
state=state_parameter_passthrough_value&
redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
response_type=token&
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/yt-analytics.readonly https://www.googleapis.com/auth/calendar.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 โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ผู้ดูแลระบบอาจจํากัดการเข้าถึงขอบเขตทั้งหมดหรือขอบเขตที่มีความละเอียดอ่อนและถูกจํากัดจนกว่าจะมีการให้สิทธิ์เข้าถึงรหัสไคลเอ็นต์ OAuth ของคุณอย่างชัดเจนในบทความความช่วยเหลือสําหรับผู้ดูแลระบบ Google Workspace ที่หัวข้อ ควบคุมว่าจะให้แอปของบุคคลที่สามและแอปภายในรายการใดเข้าถึงข้อมูล Google Workspace ได้บ้าง
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 จากเว็บไซต์ของคุณ นักพัฒนาแอปควรอนุญาตให้ลิงก์ทั่วไปเปิดในตัวแฮนเดิลลิงก์เริ่มต้นของระบบปฏิบัติการ ซึ่งรวมถึงตัวแฮนเดิล App Link ของ Android หรือแอปเบราว์เซอร์เริ่มต้น นอกจากนี้ ระบบยังรองรับตัวเลือกไลบรารี Android Custom Tabs ด้วย
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 อาจหมายถึงขั้นตอนการส่งผ่านข้อมูลนอกแบนด์ (OOB) ของ OAuth ซึ่งเลิกใช้งานแล้วและไม่รองรับอีกต่อไป โปรดดูคู่มือการย้ายข้อมูลเพื่ออัปเดตการผสานรวม
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 ไดรฟ์และสิทธิ์เข้าถึงระดับอ่านอย่างเดียวเพื่อดูกิจกรรมใน Google ปฏิทิน
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly& include_granted_scopes=true& state=state_parameter_passthrough_value& redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback& response_type=token& client_id=client_id
หลังจากทำตามขั้นตอน OAuth 2.0 จนเสร็จสมบูรณ์แล้ว ระบบจะเปลี่ยนเส้นทางคุณไปที่ http://localhost/oauth2callback URL ดังกล่าวจะแสดงข้อผิดพลาด 404 NOT FOUND เว้นแต่ว่าเครื่องของคุณจะแสดงไฟล์ที่อยู่ที่ดังกล่าว ขั้นตอนถัดไปจะแสดงรายละเอียดเพิ่มเติมเกี่ยวกับข้อมูลที่แสดงใน URI เมื่อระบบเปลี่ยนเส้นทางผู้ใช้กลับไปที่แอปพลิเคชัน
ขั้นตอนที่ 4: ตรวจสอบขอบเขตที่ผู้ใช้ให้สิทธิ์
เมื่อขอขอบเขตหลายรายการพร้อมกัน ผู้ใช้อาจไม่ให้สิทธิ์ขอบเขตทั้งหมดที่แอปขอ แอปของคุณควรตรวจสอบขอบเขตที่ผู้ใช้ให้สิทธิ์ไว้เสมอ และจัดการกับการปฏิเสธขอบเขตด้วยการปิดใช้ฟีเจอร์ที่เกี่ยวข้อง ดูข้อมูลเพิ่มเติมที่วิธีจัดการสิทธิ์แบบละเอียด
ปลายทาง OAuth 2.0
หากต้องการตรวจสอบว่าผู้ใช้ได้ให้สิทธิ์เข้าถึงขอบเขตหนึ่งๆ แก่แอปพลิเคชันหรือไม่ ให้ตรวจสอบช่อง scope ในการตอบกลับโทเค็นการเข้าถึง ขอบเขตการเข้าถึงที่ granted โดย access_token ที่แสดงเป็นรายการสตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และเว้นวรรคคั่น
ตัวอย่างเช่น ตัวอย่างการตอบกลับโทเค็นการเข้าถึงต่อไปนี้บ่งชี้ว่าผู้ใช้ได้ให้สิทธิ์เข้าถึงกิจกรรมในไดรฟ์และกิจกรรมในปฏิทินแบบอ่านอย่างเดียวแก่แอปพลิเคชันของคุณ
{ "access_token": "1/fFAGRNJru1FTz70BzhT3Zg", "expires_in": 3920, "token_type": "Bearer", "scope": "https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/calendar.readonly", "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI" }
การเรียกใช้ Google API
ปลายทาง OAuth 2.0
หลังจากแอปพลิเคชันได้รับโทเค็นการเข้าถึงแล้ว คุณจะใช้โทเค็นดังกล่าวเพื่อเรียกใช้ Google API ในนามของบัญชีผู้ใช้ที่ระบุได้ หากได้รับสิทธิ์เข้าถึงขอบเขตที่ API กำหนด โดยใส่โทเค็นการเข้าถึงในคำขอไปยัง API โดยใส่พารามิเตอร์การค้นหา access_token หรือค่าส่วนหัว HTTP Authorization Bearer หากเป็นไปได้ เราขอแนะนำให้ใช้ส่วนหัว HTTP เนื่องจากสตริงการค้นหามีแนวโน้มที่จะปรากฏในบันทึกของเซิร์ฟเวอร์ ในกรณีส่วนใหญ่ คุณสามารถใช้ไลบรารีของไคลเอ็นต์เพื่อตั้งค่าการเรียกใช้ Google API (เช่น เมื่อเรียกใช้ YouTube Analytics API)
โปรดทราบว่า YouTube Analytics API ไม่รองรับขั้นตอนสำหรับบัญชีบริการ YouTube Reporting API รองรับบัญชีบริการสำหรับเจ้าของเนื้อหา YouTube ที่เป็นเจ้าของและจัดการช่อง YouTube หลายช่องเท่านั้น เช่น ค่ายเพลงและสตูดิโอภาพยนตร์
คุณสามารถลองใช้ Google API ทั้งหมดและดูขอบเขตของ API เหล่านั้นได้ที่ OAuth 2.0 Playground
ตัวอย่าง HTTP GET
การเรียกใช้ปลายทาง (YouTube Analytics API)
reports.query
โดยใช้ส่วนหัว Authorization: Bearer HTTP อาจมีลักษณะดังนี้ โปรดทราบว่าคุณต้องระบุโทเค็นการเข้าถึงของคุณเอง โดยทำดังนี้
GET /youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views HTTP/1.1 Host: www.googleapis.com Authorization: Bearer access_token
นี่คือการเรียก API เดียวกันสําหรับผู้ใช้ที่ตรวจสอบสิทธิ์แล้วโดยใช้พารามิเตอร์สตริงการค้นหา access_token
GET https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views
ตัวอย่างของ curl
คุณสามารถทดสอบคําสั่งเหล่านี้ด้วยแอปพลิเคชันบรรทัดคําสั่ง curl ต่อไปนี้คือตัวอย่างที่ใช้ตัวเลือกส่วนหัว HTTP (แนะนำ)
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views
หรือจะใช้ตัวเลือกพารามิเตอร์สตริงการค้นหาก็ได้
curl https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views
ตัวอย่างโค้ด JavaScript
ข้อมูลโค้ดด้านล่างแสดงวิธีใช้ CORS (การแชร์ทรัพยากรข้ามโดเมน) เพื่อส่งคําขอไปยัง Google API ตัวอย่างนี้ไม่ได้ใช้ไลบรารีของไคลเอ็นต์ Google APIs สําหรับ JavaScript อย่างไรก็ตาม แม้ว่าคุณจะไม่ได้ใช้ไลบรารีไคลเอ็นต์ คู่มือการรองรับ CORS ในเอกสารประกอบของไลบรารีดังกล่าวก็อาจช่วยให้คุณเข้าใจคำขอเหล่านี้ได้ดียิ่งขึ้น
ในข้อมูลโค้ดนี้ ตัวแปร access_token จะแสดงโทเค็นที่คุณได้รับเพื่อส่งคําขอ API ในนามของผู้ใช้ที่ได้รับอนุญาต ตัวอย่างแบบสมบูรณ์จะแสดงวิธีจัดเก็บโทเค็นนั้นในพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์และดึงข้อมูลโทเค็นเมื่อทำการส่งคําขอ API
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' + '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/yt-analytics.readonlyและhttps://www.googleapis.com/auth/calendar.readonly - หลังจากให้สิทธิ์ (หรือปฏิเสธ) การเข้าถึงขอบเขตที่ขออย่างน้อย 1 รายการแล้ว ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเดิม ซึ่งจะแยกวิเคราะห์โทเค็นการเข้าถึงจากสตริงตัวระบุข้อมูลโค้ด
- หน้านี้จะตรวจสอบขอบเขตที่ผู้ใช้ให้สิทธิ์เข้าถึงแอปพลิเคชัน
หากผู้ใช้ให้สิทธิ์เข้าถึงขอบเขตที่ขอ หน้าเว็บจะใช้โทเค็นการเข้าถึงเพื่อส่งคําขอ API ตัวอย่าง
คำขอ API นี้จะเรียกใช้
reports.queryวิธีของ YouTube Analytics API เพื่อดึงข้อมูลยอดดูของช่อง YouTube ของผู้ใช้ที่ได้รับอนุญาต- หากคำขอดำเนินการสำเร็จ ระบบจะบันทึกการตอบกลับของ API ในคอนโซลการแก้ไขข้อบกพร่องของเบราว์เซอร์
คุณเพิกถอนสิทธิ์เข้าถึงแอปผ่านหน้าสิทธิ์ของบัญชี Google ได้ แอปจะแสดงเป็นการสาธิต OAuth 2.0 สําหรับ Google API Docs
หากต้องการเรียกใช้โค้ดนี้ในเครื่อง คุณต้องตั้งค่าตัวแปร 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']) {
// User authorized the request. Now, check which scopes were granted.
if (params['scope'].includes('https://www.googleapis.com/auth/drive.metadata.readonly')) {
// User authorized read-only Drive activity permission.
// Calling the APIs, etc.
var xhr = new XMLHttpRequest();
xhr.open('GET',
'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
'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 {
// User didn't authorize read-only Drive activity permission.
// Update UX and application accordingly
console.log('User did not authorize read-only Drive activity permission.');
}
// Check if user authorized Calendar read permission.
if (params['scope'].includes('https://www.googleapis.com/auth/calendar.readonly')) {
// User authorized Calendar read permission.
// Calling the APIs, etc.
console.log('User authorized Calendar read permission.');
}
else {
// User didn't authorize Calendar read permission.
// Update UX and application accordingly
console.log('User did not authorize Calendar read permission.');
}
} 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/yt-analytics.readonly https://www.googleapis.com/auth/calendar.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) เว้นแต่แอปจะเป็นเจ้าของโดเมนนั้น |
| Userinfo |
ต้นทาง JavaScript ต้องไม่มีคอมโพเนนต์ย่อย userinfo |
| เส้นทาง |
ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์เส้นทาง |
| การค้นหา |
ต้นทาง JavaScript ต้องไม่มีคอมโพเนนต์การค้นหา |
| เศษข้อความ |
ต้นทาง JavaScript ต้องไม่มีคอมโพเนนต์ข้อมูลโค้ด |
| อักขระ |
ต้นทาง JavaScript ต้องไม่มีอักขระบางตัวต่อไปนี้
|
การให้สิทธิ์เพิ่มเติม
ในโปรโตคอล OAuth 2.0 แอปจะขอสิทธิ์เข้าถึงทรัพยากร ซึ่งระบุด้วยขอบเขต การขอสิทธิ์เข้าถึงทรัพยากรเมื่อต้องการถือเป็นแนวทางปฏิบัติแนะนําด้านประสบการณ์ของผู้ใช้ เซิร์ฟเวอร์การให้สิทธิ์ของ Google รองรับการให้สิทธิ์แบบเพิ่มทีละรายการเพื่อเปิดใช้แนวทางปฏิบัติดังกล่าว ฟีเจอร์นี้ช่วยให้คุณขอขอบเขตได้ตามต้องการ และหากผู้ใช้ให้สิทธิ์สําหรับขอบเขตใหม่ ระบบจะแสดงรหัสการให้สิทธิ์ซึ่งอาจแลกเป็นโทเค็นที่มีขอบเขตทั้งหมดที่ผู้ใช้ให้สิทธิ์โปรเจ็กต์
ตัวอย่างเช่น สมมติว่าแอปดึงข้อมูลรายงาน YouTube Analytics ซึ่งรายงานบางรายการเป็นรายงานด้านการเงินที่ต้องเข้าถึงขอบเขตเพิ่มเติมที่ไม่จําเป็นสําหรับรายงานอื่นๆ ในกรณีนี้ เมื่อลงชื่อเข้าใช้ แอปอาจขอสิทธิ์เข้าถึงขอบเขต https://www.googleapis.com/auth/yt-analytics.readonly เท่านั้น
อย่างไรก็ตาม หากผู้ใช้พยายามเรียกข้อมูลรายงานทางการเงิน แอปอาจขอสิทธิ์เข้าถึงhttps://www.googleapis.com/auth/yt-analytics-monetary.readonlyขอบเขตดังกล่าวได้ด้วย
กฎต่อไปนี้จะมีผลกับโทเค็นการเข้าถึงที่ได้รับจากการให้สิทธิ์เพิ่มเติม
- โทเค็นนี้สามารถใช้เพื่อเข้าถึงทรัพยากรที่เกี่ยวข้องกับขอบเขตใดก็ได้ที่รวมอยู่ในการให้สิทธิ์แบบรวมใหม่
- เมื่อคุณใช้โทเค็นการรีเฟรชสำหรับการให้สิทธิ์แบบรวมเพื่อให้ได้โทเค็นการเข้าถึง โทเค็นการเข้าถึงจะแสดงถึงการให้สิทธิ์แบบรวมและสามารถใช้กับค่า
scopeใดก็ได้ที่รวมอยู่ในการตอบกลับ - การให้สิทธิ์แบบรวมจะมีขอบเขตทั้งหมดที่ผู้ใช้ให้สิทธิ์แก่โปรเจ็กต์ API แม้ว่าจะมีการขอสิทธิ์จากลูกค้ารายอื่นก็ตาม เช่น หากผู้ใช้ให้สิทธิ์เข้าถึงขอบเขตหนึ่งโดยใช้ไคลเอ็นต์เดสก์ท็อปของแอปพลิเคชัน แล้วให้สิทธิ์อีกขอบเขตหนึ่งแก่แอปพลิเคชันเดียวกันผ่านไคลเอ็นต์อุปกรณ์เคลื่อนที่ การอนุญาตแบบรวมจะมีทั้ง 2 ขอบเขต
- หากคุณเพิกถอนโทเค็นที่แสดงถึงการให้สิทธิ์แบบรวม ระบบจะเพิกถอนสิทธิ์เข้าถึงขอบเขตทั้งหมดของการให้สิทธิ์นั้นในนามของผู้ใช้ที่เชื่อมโยงพร้อมกัน
ตัวอย่างโค้ดด้านล่างแสดงวิธีเพิ่มขอบเขตลงในโทเค็นการเข้าถึงที่มีอยู่ แนวทางนี้ช่วยให้แอปไม่ต้องจัดการโทเค็นการเข้าถึงหลายรายการ
ปลายทาง OAuth 2.0
ในตัวอย่างนี้ แอปพลิเคชันที่เรียกใช้ขอสิทธิ์เข้าถึงเพื่อดึงข้อมูล YouTube Analytics ของผู้ใช้ นอกเหนือจากสิทธิ์เข้าถึงอื่นๆ ที่ผู้ใช้ให้สิทธิ์แอปพลิเคชันแล้ว
หากต้องการเพิ่มขอบเขตลงในโทเค็นการเข้าถึงที่มีอยู่ ให้ใส่พารามิเตอร์ include_granted_scopes ในคําขอไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google
ข้อมูลโค้ดต่อไปนี้แสดงวิธีดำเนินการ ข้อมูลโค้ดจะถือว่าคุณได้จัดเก็บขอบเขตที่โทเค็นการเข้าถึงใช้งานได้ไว้ในพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์ (โค้ดตัวอย่างที่สมบูรณ์จะจัดเก็บรายการขอบเขตที่โทเค็นการเข้าถึงใช้งานได้โดยการตั้งค่าพร็อพเพอร์ตี้ oauth2-test-params.scope ในพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์)
ข้อมูลโค้ดจะเปรียบเทียบขอบเขตที่โทเค็นการเข้าถึงใช้งานได้กับขอบเขตที่คุณต้องการใช้สำหรับคำค้นหาหนึ่งๆ หากโทเค็นการเข้าถึงไม่ครอบคลุมขอบเขตดังกล่าว โฟลว์ OAuth 2.0 จะเริ่มขึ้น
ในที่นี้ ฟังก์ชัน oauth2SignIn เหมือนกับฟังก์ชันที่ระบุไว้ในขั้นตอนที่ 2 (และระบุไว้ภายหลังในตัวอย่างที่สมบูรณ์)
var SCOPE = 'https://www.googleapis.com/auth/yt-analytics.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(); }
การใช้การป้องกันแบบครอบคลุมหลายบริการ
ขั้นตอนเพิ่มเติมที่คุณควรทำเพื่อปกป้องบัญชีของผู้ใช้คือการใช้การปกป้องข้ามบัญชีโดยใช้บริการการปกป้องข้ามบัญชีของ Google บริการนี้ช่วยให้คุณสมัครรับการแจ้งเตือนเหตุการณ์ด้านความปลอดภัยซึ่งจะส่งข้อมูลเกี่ยวกับการเปลี่ยนแปลงที่สำคัญในบัญชีผู้ใช้ไปยังแอปพลิเคชัน จากนั้น คุณสามารถใช้ข้อมูลดังกล่าวเพื่อดําเนินการโดยขึ้นอยู่กับวิธีตอบสนองต่อเหตุการณ์
ตัวอย่างประเภทเหตุการณ์ที่บริการการปกป้องบัญชีข้ามของ Google ส่งไปยังแอปของคุณมีดังนี้
-
https://schemas.openid.net/secevent/risc/event-type/sessions-revoked -
https://schemas.openid.net/secevent/oauth/event-type/token-revoked -
https://schemas.openid.net/secevent/risc/event-type/account-disabled
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้การป้องกันแบบครอบคลุมหลายบริการและรายการเหตุการณ์ทั้งหมดที่ใช้ได้ได้จากหน้า ปกป้องบัญชีผู้ใช้ด้วยการป้องกันแบบครอบคลุมหลายบริการ