การใช้ OAuth 2.0 สำหรับเว็บแอปพลิเคชัน JavaScript

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

ขั้นตอน 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 สำหรับโปรเจ็กต์ของคุณ

  1. Open the API Library ใน Google API Console
  2. If prompted, select a project, or create a new one.
  3. ใช้หน้าคลังเพื่อค้นหาและเปิดใช้ YouTube Data API ค้นหา API อื่นๆ ที่แอปพลิเคชันจะใช้และเปิดใช้ API เหล่านั้นด้วย

สร้างข้อมูลเข้าสู่ระบบการให้สิทธิ์

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

  1. Go to the Credentials page.
  2. คลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth
  3. เลือกประเภทแอปพลิเคชันเว็บแอปพลิเคชัน
  4. กรอกข้อมูลในแบบฟอร์มให้ครบถ้วน แอปพลิเคชันที่ใช้ JavaScript เพื่อสร้างคำขอ Google API ที่ได้รับอนุญาตต้องระบุต้นทาง JavaScript ที่ได้รับอนุญาต ต้นทางจะระบุโดเมนที่แอปพลิเคชันสามารถส่งคำขอไปยังเซิร์ฟเวอร์ OAuth 2.0 ต้นทางเหล่านี้ต้องเป็นไปตามกฎการตรวจสอบของ Google

ระบุขอบเขตการเข้าถึง

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

ก่อนที่จะเริ่มใช้การให้สิทธิ์ OAuth 2.0 เราขอแนะนำให้คุณระบุขอบเขตที่แอปจะต้องมีสิทธิ์เข้าถึง

YouTube Data API v3 ใช้ขอบเขตต่อไปนี้

กล้องติดปืน
https://www.googleapis.com/auth/youtubeจัดการบัญชี YouTube ของคุณ
https://www.googleapis.com/auth/youtube.channel-memberships.creatorดูรายชื่อสมาชิกปัจจุบันที่ใช้งานอยู่ในช่องของคุณ ระดับปัจจุบันของสมาชิก และวันที่เริ่มเป็นสมาชิก
https://www.googleapis.com/auth/youtube.force-sslดู แก้ไข และลบวิดีโอ YouTube การจัดประเภท ความคิดเห็น และคำบรรยายวิดีโออย่างถาวร
https://www.googleapis.com/auth/youtube.readonlyดูบัญชี YouTube ของคุณ
https://www.googleapis.com/auth/youtube.uploadจัดการวิดีโอ YouTube ของคุณ
https://www.googleapis.com/auth/youtubepartnerดูและจัดการพื้นที่ของคุณและเนื้อหาที่เกี่ยวข้องใน YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditดูข้อมูลส่วนตัวของช่อง YouTube ของคุณที่เกี่ยวข้องในระหว่างกระบวนการตรวจสอบกับพาร์ทเนอร์ YouTube

เอกสารขอบเขต 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 การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับ client_id ที่ระบุ คุณจะได้รับข้อผิดพลาด redirect_uri_mismatch

โปรดทราบว่ารูปแบบ http หรือ https ตัวพิมพ์ และเครื่องหมายทับปิดท้าย ("/") ต้องตรงกันทั้งหมด

response_type จำเป็น

แอปพลิเคชัน JavaScript ต้องตั้งค่าของพารามิเตอร์เป็น token ค่านี้จะบอกให้เซิร์ฟเวอร์การให้สิทธิ์ของ Google แสดงผลโทเค็นเพื่อการเข้าถึงเป็นคู่ name=value ในตัวระบุส่วนย่อยของ URI (#) ที่เปลี่ยนเส้นทางผู้ใช้ไปหลังจากกระบวนการให้สิทธิ์เสร็จสมบูรณ์แล้ว

scope จำเป็น

รายการขอบเขตที่คั่นด้วยช่องว่างซึ่งระบุทรัพยากรที่แอปพลิเคชันของคุณเข้าถึงได้ในนามของผู้ใช้ ค่าเหล่านี้จะแจ้งหน้าจอคำยินยอมที่ Google แสดงต่อผู้ใช้

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

YouTube Data API v3 ใช้ขอบเขตต่อไปนี้

กล้องติดปืน
https://www.googleapis.com/auth/youtubeจัดการบัญชี YouTube ของคุณ
https://www.googleapis.com/auth/youtube.channel-memberships.creatorดูรายชื่อสมาชิกปัจจุบันที่ใช้งานอยู่ในช่องของคุณ ระดับปัจจุบันของสมาชิก และวันที่เริ่มเป็นสมาชิก
https://www.googleapis.com/auth/youtube.force-sslดู แก้ไข และลบวิดีโอ YouTube การจัดประเภท ความคิดเห็น และคำบรรยายวิดีโออย่างถาวร
https://www.googleapis.com/auth/youtube.readonlyดูบัญชี YouTube ของคุณ
https://www.googleapis.com/auth/youtube.uploadจัดการวิดีโอ YouTube ของคุณ
https://www.googleapis.com/auth/youtubepartnerดูและจัดการพื้นที่ของคุณและเนื้อหาที่เกี่ยวข้องใน YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditดูข้อมูลส่วนตัวของช่อง YouTube ของคุณที่เกี่ยวข้องในระหว่างกระบวนการตรวจสอบกับพาร์ทเนอร์ YouTube

เอกสารขอบเขต API ของ OAuth 2.0 มีรายการขอบเขตทั้งหมดที่คุณอาจใช้เพื่อเข้าถึง Google APIs

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

state แนะนำ

ระบุค่าสตริงที่แอปพลิเคชันจะใช้เพื่อรักษาสถานะระหว่างคำขอการให้สิทธิ์และการตอบกลับของเซิร์ฟเวอร์การให้สิทธิ์ เซิร์ฟเวอร์จะแสดงผลค่าที่คุณส่งเป็นคู่ name=value ในตัวระบุส่วนย่อย URL (#) ของ redirect_uri หลังจากที่ผู้ใช้ให้ความยินยอมหรือปฏิเสธคำขอเข้าถึงแอปพลิเคชันของคุณ

คุณใช้พารามิเตอร์นี้เพื่อวัตถุประสงค์หลายประการได้ เช่น การนำผู้ใช้ไปยังทรัพยากรที่ถูกต้องในแอปพลิเคชัน การส่ง nonces และการลดการปลอมแปลงคำขอข้ามเว็บไซต์ การใช้ค่า state จะช่วยให้มั่นใจได้ว่าการเชื่อมต่อขาเข้าเป็นผลมาจากคำขอการตรวจสอบสิทธิ์ เนื่องจาก redirect_uri มีการคาดเดาได้ หากคุณสร้างสตริงแบบสุ่มหรือเข้ารหัสแฮชของคุกกี้หรือค่าอื่นที่บันทึกสถานะของไคลเอ็นต์ คุณสามารถตรวจสอบการตอบสนองเพื่อให้แน่ใจว่าคำขอและคำตอบสร้างขึ้นในเบราว์เซอร์เดียวกัน ซึ่งช่วยป้องกันการโจมตีต่างๆ เช่น การปลอมแปลงคำขอข้ามเว็บไซต์ได้ ดูตัวอย่างวิธีสร้างและยืนยันโทเค็น state ในเอกสารประกอบของ OpenID Connect

include_granted_scopes ไม่บังคับ

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

login_hint ไม่บังคับ

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

ตั้งค่าค่าพารามิเตอร์เป็นอีเมลหรือตัวระบุ sub ซึ่งเทียบเท่ากับรหัส Google ของผู้ใช้

prompt ไม่บังคับ

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

ค่าที่เป็นไปได้มีดังนี้

none ไม่แสดงหน้าจอการตรวจสอบสิทธิ์หรือความยินยอม ต้องระบุด้วยค่าอื่นๆ
consent แจ้งให้ผู้ใช้ขอความยินยอม
select_account แจ้งให้ผู้ใช้เลือกบัญชี

ตัวอย่างการเปลี่ยนเส้นทางไปยังเซิร์ฟเวอร์การให้สิทธิ์ของ Google

URL ตัวอย่างด้านล่างขอการเข้าถึงแบบออฟไลน์ (access_type=offline) ในขอบเขตที่อนุญาตการเข้าถึงเพื่อดูบัญชี YouTube ของผู้ใช้ โดยใช้การให้สิทธิ์ที่เพิ่มขึ้นเพื่อให้มั่นใจว่าโทเค็นเพื่อการเข้าถึงใหม่จะครอบคลุมขอบเขตทั้งหมดที่ผู้ใช้ได้ให้สิทธิ์เข้าถึงแอปพลิเคชันไว้ก่อนหน้านี้ นอกจากนี้ 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%2Fyoutube.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/youtube.force-ssl',
                '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%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.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 เมื่อระบบเปลี่ยนเส้นทางผู้ใช้กลับไปที่แอปพลิเคชัน

การเรียกใช้ Google API

ปลายทาง OAuth 2.0

หลังจากแอปพลิเคชันได้รับโทเค็นเพื่อการเข้าถึงแล้ว คุณจะใช้โทเค็นดังกล่าวเพื่อเรียก Google API ในนามของบัญชีผู้ใช้หนึ่งๆ ได้หาก API นั้นได้รับขอบเขตการเข้าถึงที่ API กำหนด ซึ่งทำได้โดยการรวมโทเค็นเพื่อการเข้าถึงไว้ในคำขอที่ส่งไปยัง API โดยใส่พารามิเตอร์การค้นหา access_token หรือค่า Bearer ของส่วนหัว HTTP ของ Authorization ขอแนะนำให้ใช้ส่วนหัว HTTP หากเป็นไปได้ เนื่องจากสตริงการค้นหามีแนวโน้มที่จะมองเห็นได้ในบันทึกของเซิร์ฟเวอร์ ในกรณีส่วนใหญ่ คุณสามารถใช้ไลบรารีของไคลเอ็นต์เพื่อตั้งค่าการเรียก Google API ได้ (เช่น เมื่อเรียกใช้ YouTube Data API)

โปรดทราบว่า YouTube Data API รองรับบัญชีบริการสำหรับเจ้าของเนื้อหา YouTube ที่เป็นเจ้าของและจัดการช่อง YouTube หลายช่องเท่านั้น เช่น ค่ายเพลงและสตูดิโอภาพยนตร์

คุณลองใช้ Google API ทั้งหมดและดูขอบเขตได้ที่ OAuth 2.0 Playground

ตัวอย่าง HTTP GET

การเรียกไปยังปลายทาง youtube.channels (YouTube Data API) โดยใช้ส่วนหัว HTTP ของ Authorization: Bearer อาจมีลักษณะดังต่อไปนี้ โปรดทราบว่าคุณต้องระบุโทเค็นเพื่อการเข้าถึงของตนเอง ดังนี้

GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

ต่อไปนี้คือการเรียก API เดียวกันสำหรับผู้ใช้ที่ตรวจสอบสิทธิ์แล้วโดยใช้พารามิเตอร์สตริงคำค้นหา access_token

GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

ตัวอย่างของ curl

คุณทดสอบคำสั่งเหล่านี้ได้ด้วยแอปพลิเคชันบรรทัดคำสั่ง curl ตัวอย่างที่ใช้ตัวเลือกส่วนหัว HTTP (แนะนำ) มีดังนี้

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true

หรือใช้ตัวเลือกพารามิเตอร์สตริงการค้นหา

curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

โค้ดตัวอย่าง JavaScript

ข้อมูลโค้ดด้านล่างแสดงวิธีใช้ CORS (การแชร์ทรัพยากรข้ามต้นทาง) เพื่อส่งคำขอไปยัง Google API ตัวอย่างนี้ไม่ได้ใช้ไลบรารีของไคลเอ็นต์ Google APIs สำหรับ JavaScript อย่างไรก็ตาม แม้ว่าคุณจะไม่ได้ใช้ไลบรารีของไคลเอ็นต์ แต่คู่มือฝ่ายสนับสนุน CORS ในเอกสารประกอบของไลบรารีดังกล่าวอาจช่วยให้คุณเข้าใจคำขอเหล่านี้ได้ดีขึ้น

ในข้อมูลโค้ดนี้ ตัวแปร access_token แสดงถึงโทเค็นที่คุณได้มาเพื่อสร้างคำขอ API ในนามของผู้ใช้ที่ได้รับอนุญาต ตัวอย่างที่สมบูรณ์แสดงวิธีจัดเก็บโทเค็นดังกล่าวในพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์และเรียกข้อมูลโทเค็นดังกล่าวเมื่อส่งคำขอ API

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
    '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 หน้าเว็บจะทําตามขั้นตอนต่อไปนี้

  1. นโยบายนี้จะนำผู้ใช้ไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google ซึ่งขอสิทธิ์เข้าถึงขอบเขต https://www.googleapis.com/auth/youtube.force-ssl
  2. หลังจากให้สิทธิ์ (หรือปฏิเสธ) ขอบเขตที่ขออย่างน้อย 1 ขอบเขตแล้ว ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเดิม ซึ่งจะแยกวิเคราะห์โทเค็นเพื่อการเข้าถึงจากสตริงตัวระบุส่วนย่อย
  3. หน้านี้ใช้โทเค็นเพื่อการเข้าถึงเพื่อสร้างคำขอ API ตัวอย่าง

    คำขอ API นี้จะเรียกใช้เมธอด channels.list ของ YouTube Data API เพื่อดึงข้อมูลเกี่ยวกับช่อง YouTube ของผู้ใช้ที่ได้รับอนุญาต

  4. หากคำขอดำเนินการสำเร็จ ระบบจะบันทึกการตอบกลับของ 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/youtube/v3/channels?part=snippet&mine=true&' +
          '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/youtube.force-ssl',
                  '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 จะได้รับการยกเว้นจากกฎนี้

โดเมน
  • TLD ของโฮสต์ (โดเมนระดับบนสุด) ต้องเป็นรายการคำต่อท้ายสาธารณะ
  • โดเมนที่ฝากบริการจะเป็น “googleusercontent.com” ไม่ได้
  • ต้นทาง JavaScript ต้องไม่มีโดเมนเครื่องมือย่อ URL (เช่น goo.gl) เว้นแต่แอปเป็นเจ้าของโดเมน
  • ข้อมูลผู้ใช้

    ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์ย่อยของข้อมูลผู้ใช้

    เส้นทาง

    ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์เส้นทาง

    การค้นหา

    ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์การค้นหา

    ส่วนย่อย

    ต้นทางของ JavaScript ต้องไม่มีคอมโพเนนต์ Fragment

    อักขระ ต้นทางของ JavaScript ต้องไม่มีอักขระบางตัว รวมถึง
    • อักขระไวลด์การ์ด ('*')
    • อักขระ ASCII ที่ไม่สามารถพิมพ์ได้
    • การเข้ารหัสเปอร์เซ็นต์ไม่ถูกต้อง (การเข้ารหัสเปอร์เซ็นต์ที่ไม่เป็นไปตามรูปแบบการเข้ารหัส URL ของเครื่องหมายเปอร์เซ็นต์ตามด้วยเลขฐานสิบหก 2 หลัก)
    • อักขระ Null (อักขระ Null ที่เข้ารหัส เช่น %00, %C0%80)

    การให้สิทธิ์ที่เพิ่มขึ้น

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

    ตัวอย่างเช่น สมมติว่าแอปช่วยให้ผู้ใช้ระบุกิจกรรมที่น่าสนใจในท้องถิ่นได้ แอปนี้ช่วยให้ผู้ใช้ดูวิดีโอเกี่ยวกับกิจกรรมต่างๆ ให้คะแนนวิดีโอ และเพิ่มวิดีโอลงในเพลย์ลิสต์ได้ ผู้ใช้ยังใช้แอปนี้เพื่อเพิ่มกิจกรรมไปยัง Google ปฏิทินได้ด้วย

    ในกรณีนี้ ณ เวลาที่ลงชื่อเข้าใช้ แอปอาจไม่จำเป็นต้องใช้หรือขอสิทธิ์เข้าถึงขอบเขตใดๆ อย่างไรก็ตาม หากผู้ใช้พยายามให้คะแนนวิดีโอ เพิ่มวิดีโอลงในเพลย์ลิสต์ หรือดำเนินการอื่นๆ ใน YouTube แอปจะขอสิทธิ์เข้าถึงขอบเขต https://www.googleapis.com/auth/youtube.force-ssl ได้ ในทํานองเดียวกัน แอปอาจขอสิทธิ์เข้าถึงขอบเขต https://www.googleapis.com/auth/calendar หากผู้ใช้พยายามเพิ่มกิจกรรมในปฏิทิน

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

    • โทเค็นนี้อาจใช้เพื่อเข้าถึงทรัพยากรที่สอดคล้องกับขอบเขตทั้งหมดที่รวมเป็นการให้สิทธิ์แบบรวมใหม่
    • เมื่อใช้โทเค็นการรีเฟรชสำหรับการให้สิทธิ์แบบรวมเพื่อรับโทเค็นเพื่อการเข้าถึง โทเค็นเพื่อการเข้าถึงจะแทนการให้สิทธิ์แบบรวม และนำไปใช้กับค่า 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/youtube.force-ssl';
    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();
    }