OAuth 2.0 สำหรับเว็บแอปพลิเคชันฝั่งไคลเอ็นต์

เอกสารนี้อธิบายวิธีใช้การให้สิทธิ์ 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

หากใช้ไลบรารีของไคลเอ็นต์ Google APIs สำหรับ JavaScript เพื่อทำการเรียกที่ได้รับอนุญาตไปยัง Google คุณควรใช้ไลบรารี JavaScript ของ Google Identity Services ในการจัดการโฟลว์ OAuth 2.0 โปรดดูโมเดลโทเค็นของ Google Identity Services ซึ่งอิงตามขั้นตอนการให้สิทธิ์โดยนัยของ 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. API Library แสดงรายการ API ทั้งหมดที่ใช้ได้โดยจัดกลุ่มตามตระกูลผลิตภัณฑ์และความนิยม หาก API ที่ต้องการเปิดใช้ไม่ปรากฏในรายการ ให้ใช้การค้นหาเพื่อค้นหา หรือคลิกดูทั้งหมดในกลุ่มผลิตภัณฑ์ที่เป็นของ API นั้น
  4. เลือก API ที่ต้องการเปิดใช้ จากนั้นคลิกปุ่มเปิดใช้
  5. If prompted, enable billing.
  6. If prompted, read and accept the API's Terms of Service.

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

แอปพลิเคชันที่ใช้ 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 เราขอแนะนำให้คุณระบุขอบเขตที่แอปจะต้องมีสิทธิ์เข้าถึง

เอกสารขอบเขต OAuth 2.0 API มีรายการขอบเขตทั้งหมดที่คุณอาจใช้เพื่อเข้าถึง 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 จำเป็น

รหัสไคลเอ็นต์สำหรับแอปพลิเคชันของคุณ คุณจะเห็นค่านี้ใน API Console Credentials page

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 แสดงต่อผู้ใช้

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

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

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 ตัวอย่างจะแสดงอยู่ด้านล่าง โดยมีการแบ่งบรรทัดและการเว้นวรรคเพื่อให้อ่านง่ายขึ้น

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 ที่แอปกำลังขอสิทธิ์ในการเข้าถึงด้วยข้อมูลเข้าสู่ระบบการให้สิทธิ์ของผู้ใช้ และสรุปขอบเขตของการเข้าถึงที่จะได้รับอนุญาต จากนั้นผู้ใช้สามารถให้ความยินยอมแก่ขอบเขตที่แอปพลิเคชันของคุณขอหรือปฏิเสธคำขอได้

แอปพลิเคชันของคุณไม่จำเป็นต้องดำเนินการใดๆ ในขั้นตอนนี้ เนื่องจากจะรอการตอบกลับจากเซิร์ฟเวอร์ 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 หรือแอปเบราว์เซอร์เริ่มต้น นอกจากนี้ ไลบรารี Android Custom Tab เป็นตัวเลือกที่รองรับด้วย

iOS

นักพัฒนาซอฟต์แวร์ของ iOS และ macOS อาจพบข้อผิดพลาดนี้เมื่อเปิดคำขอการให้สิทธิ์ใน WKWebView นักพัฒนาซอฟต์แวร์ควรใช้ไลบรารี iOS แทน เช่น Google Sign-In สำหรับ iOS หรือ AppAuth สำหรับ iOS ของ OpenID Foundation

นักพัฒนาเว็บอาจพบข้อผิดพลาดนี้เมื่อแอป iOS หรือ macOS เปิดลิงก์เว็บทั่วไปใน User Agent แบบฝัง และผู้ใช้ไปยังปลายทางการให้สิทธิ์ OAuth 2.0 ของ Google จากเว็บไซต์ของคุณ นักพัฒนาซอฟต์แวร์ควรอนุญาตให้ลิงก์ทั่วไปเปิดได้ในเครื่องจัดการลิงก์เริ่มต้นของระบบปฏิบัติการ ซึ่งรวมถึงเครื่องจัดการลิงก์สากลหรือแอปเบราว์เซอร์เริ่มต้น นอกจากนี้ ไลบรารี 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 ด้วยการใส่พารามิเตอร์การค้นหา 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 หน้านี้จะมีขั้นตอนดังนี้

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

    คำขอ API จะเรียกเมธอด about.get ของ Drive API เพื่อเรียกข้อมูลเกี่ยวกับบัญชี Google ไดรฟ์ของผู้ใช้ที่ได้รับอนุญาต

  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/drive/v3/about?fields=user&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

กฎการตรวจสอบต้นทางของ JavaScript

Google ใช้กฎการตรวจสอบความถูกต้องต่อไปนี้กับต้นทาง JavaScript เพื่อช่วยให้นักพัฒนาซอฟต์แวร์รักษาความปลอดภัยให้กับแอปพลิเคชันของตน JavaScript เริ่มต้นจะต้องเป็นไปตามกฎเหล่านี้ โปรดดูคำจำกัดความของโดเมน โฮสต์ และรูปแบบที่ระบุไว้ด้านล่างใน RFC 3986 ส่วนที่ 3

กฎการตรวจสอบความถูกต้อง
รูปแบบ

ต้นทางของ JavaScript ต้องใช้รูปแบบ HTTPS ไม่ใช่ HTTP ธรรมดา URI ของ Localhost (รวมถึง URI ที่อยู่ IP ของ localhost) จะได้รับการยกเว้นจากกฎนี้

โฮสต์

โฮสต์จะเป็นที่อยู่ IP ดิบไม่ได้ ที่อยู่ IP ของ Localhost จะได้รับการยกเว้นจากกฎนี้

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

    ต้นทางของ JavaScript ต้องไม่มีองค์ประกอบย่อย userinfo

    เส้นทาง

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

    การค้นหา

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

    ส่วนย่อย

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

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

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

    ในโปรโตคอล 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();
    }