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

สิ่งที่ต้องมีก่อน

เปิดใช้ API สําหรับโปรเจ็กต์

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

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

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

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

การรับโทเค็นเพื่อการเข้าถึง OAuth 2.0

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

ขั้นตอนที่ 1: กําหนดค่าออบเจ็กต์ไคลเอ็นต์

หากคุณใช้ไลบรารีของไคลเอ็นต์ Google APIs สําหรับ JavaScript เพื่อจัดการโฟลว์ OAuth 2.0 ขั้นตอนแรกคือกําหนดค่าออบเจ็กต์ gapi.auth2 และ gapi.client ออบเจ็กต์เหล่านี้จะทําให้แอปพลิเคชันของคุณได้รับสิทธิ์จากผู้ใช้และส่งคําขอ API ที่ได้รับอนุญาตได้

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

ไลบรารีของไคลเอ็นต์ JS

ไลบรารีของไคลเอ็นต์ JavaScript ช่วยให้ขั้นตอนการให้สิทธิ์ง่ายขึ้นหลายด้าน ดังนี้

  1. สร้าง URL เปลี่ยนเส้นทางสําหรับเซิร์ฟเวอร์การให้สิทธิ์ของ Google และให้วิธีการนําผู้ใช้ไปยัง URL ดังกล่าว
  2. และจะจัดการการเปลี่ยนเส้นทางจากเซิร์ฟเวอร์นั้นกลับไปยังแอปพลิเคชันของคุณ
  3. โดยจะตรวจสอบโทเค็นเพื่อการเข้าถึงที่เซิร์ฟเวอร์การให้สิทธิ์แสดงผล
  4. โดยจะจัดเก็บโทเค็นเพื่อการเข้าถึงที่เซิร์ฟเวอร์การให้สิทธิ์ส่งไปยังแอปพลิเคชันของคุณ และเรียกขึ้นมาเมื่อแอปเรียก API ที่ได้รับอนุญาตในภายหลัง

ข้อมูลโค้ดด้านล่างเป็นข้อความที่ตัดตอนมาจากตัวอย่างที่สมบูรณ์ซึ่งปรากฏภายหลังในเอกสารนี้ โค้ดนี้จะเริ่มต้นออบเจ็กต์ gapi.client ซึ่งแอปพลิเคชันของคุณจะใช้เรียก API ในภายหลัง เมื่อสร้างออบเจ็กต์นั้นแล้ว ออบเจ็กต์ gapi.auth2 ที่แอปพลิเคชันจะใช้เพื่อตรวจสอบและตรวจสอบสถานะการให้สิทธิ์ของผู้ใช้จะมีการเริ่มต้นด้วยเช่นกัน

การเรียกไปยัง gapi.client.init จะระบุช่องต่อไปนี้

  • ค่า apiKey และ clientId จะระบุข้อมูลเข้าสู่ระบบสําหรับการให้สิทธิ์แอปพลิเคชันของคุณ ตามที่อธิบายไว้ในส่วนการสร้างข้อมูลเข้าสู่ระบบการให้สิทธิ์ คุณจะรับค่าเหล่านี้ได้ใน API Consoleโปรดทราบว่าต้องมี clientId หากแอปพลิเคชันส่งคําขอ API ที่ได้รับอนุญาต แอปพลิเคชันที่สร้างคําขอที่ไม่ได้รับอนุญาตจะระบุคีย์ API ได้เท่านั้น
  • ช่อง scope ระบุรายการขอบเขตการเข้าถึงที่คั่นด้วยช่องว่างซึ่งตรงกับทรัพยากรที่แอปพลิเคชันเข้าถึงได้ในนามของผู้ใช้ ค่าเหล่านี้จะบอกให้หน้าจอคํายินยอมที่ Google แสดงต่อผู้ใช้

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

  • ช่อง discoveryDocs จะแสดงรายการเอกสารการค้นพบ API ที่แอปพลิเคชันใช้ เอกสาร Discovery จะอธิบายแพลตฟอร์มของ API รวมถึงสคีมาทรัพยากรและไลบรารีของไคลเอ็นต์ JavaScript จะใช้ข้อมูลดังกล่าวเพื่อสร้างวิธีที่แอปพลิเคชันใช้ได้ ในตัวอย่างนี้ โค้ดจะเรียกเอกสารการค้นพบสําหรับ Google Drive API เวอร์ชัน 3

หลังจากที่เรียก gapi.client.init เสร็จแล้ว โค้ดจะตั้งค่าตัวแปร GoogleAuth เพื่อระบุออบเจ็กต์ Google Auth สุดท้าย โค้ดจะกําหนด Listener ที่เรียกใช้ฟังก์ชันเมื่อสถานะการลงชื่อเข้าใช้ของผู้ใช้เปลี่ยนไป (ฟังก์ชันดังกล่าวไม่ได้กําหนดไว้ในข้อมูลโค้ด)

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
  });
}

ปลายทาง 2.0 ของ OAuth

หากเข้าถึงปลายทาง OAuth 2.0 โดยตรง คุณจะไปยังขั้นตอนถัดไปได้

ขั้นตอนที่ 2: เปลี่ยนเส้นทางไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google

หากต้องการขอสิทธิ์เข้าถึงข้อมูลผู้ใช้ โปรดเปลี่ยนเส้นทางผู้ใช้ไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google

ไลบรารีของไคลเอ็นต์ JS

เรียกเมธอด GoogleAuth.signIn() เพื่อนําผู้ใช้ไปยังเซิร์ฟเวอร์การให้สิทธิ์ของ Google

GoogleAuth.signIn();

ในทางปฏิบัติ แอปพลิเคชันของคุณอาจตั้งค่าบูลีนเพื่อพิจารณาว่าจะเรียกเมธอด signIn() หรือไม่ก่อนที่จะพยายามเรียก API

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

  • ออบเจ็กต์ GoogleAuth ที่อ้างอิงในโค้ดจะเหมือนกับตัวแปรร่วมที่กําหนดไว้ในข้อมูลโค้ดในขั้นตอนที่ 1

  • ฟังก์ชัน updateSigninStatus คือ Listener ที่จะฟังการเปลี่ยนแปลงของ สถานะการให้สิทธิ์ของผู้ใช้ บทบาทในฐานะผู้ฟังได้รับการกําหนดค่าไว้ในข้อมูลโค้ดในขั้นตอนที่ 1 ดังต่อไปนี้
    GoogleAuth.isSignedIn.listen(updateSigninStatus);
  • ข้อมูลโค้ดจะกําหนดตัวแปรร่วมเพิ่มเติม 2 รายการดังนี้

    • isAuthorized เป็นตัวแปรบูลีนที่ระบุว่าผู้ใช้ลงชื่อเข้าใช้อยู่แล้วหรือไม่ คุณตั้งค่านี้ได้เมื่อแอปโหลดและอัปเดตเมื่อผู้ใช้ลงชื่อเข้าใช้หรือออกจากระบบแอป

      ในข้อมูลโค้ดนี้ ฟังก์ชัน sendAuthorizedApiRequest จะตรวจสอบค่าตัวแปร&#39 เพื่อดูว่าแอปควรพยายามส่งคําขอ API ที่ต้องมีการให้สิทธิ์หรือแจ้งให้ผู้ใช้ให้สิทธิ์แอป

    • currentApiRequest เป็นออบเจ็กต์ที่จัดเก็บรายละเอียดเกี่ยวกับคําขอ API ล่าสุดที่ผู้ใช้พยายามส่ง ระบบจะตั้งค่าของออบเจ็กต์เมื่อแอปเรียกใช้ฟังก์ชัน sendAuthorizedApiRequest

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

var isAuthorized;
var currentApiRequest;

/**
 * Store the request details. Then check to determine whether the user
 * has authorized the application.
 *   - If the user has granted access, make the API request.
 *   - If the user has not granted access, initiate the sign-in flow.
 */
function sendAuthorizedApiRequest(requestDetails) {
  currentApiRequest = requestDetails;
  if (isAuthorized) {
    // Make API request
    // gapi.client.request(requestDetails)

    // Reset currentApiRequest variable.
    currentApiRequest = {};
  } else {
    GoogleAuth.signIn();
  }
}

/**
 * Listener called when user completes auth flow. If the currentApiRequest
 * variable is set, then the user was prompted to authorize the application
 * before the request executed. In that case, proceed with that API request.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    isAuthorized = true;
    if (currentApiRequest) {
      sendAuthorizedApiRequest(currentApiRequest);
    }
  } else {
    isAuthorized = false;
  }
}

ปลายทาง 2.0 ของ OAuth

สร้าง URL เพื่อขอสิทธิ์เข้าถึงปลายทาง OAuth 2.0 ของ Google ที่ https://accounts.google.com/o/oauth2/v2/auth ปลายทางนี้เข้าถึงได้ผ่าน HTTPS และจะปฏิเสธการเชื่อมต่อ HTTP ธรรมดา

เซิร์ฟเวอร์การให้สิทธิ์ของ Google รองรับพารามิเตอร์สตริงการค้นหาต่อไปนี้สําหรับแอปพลิเคชันเว็บเซิร์ฟเวอร์

พารามิเตอร์
client_id จำเป็น

รหัสไคลเอ็นต์สําหรับแอปพลิเคชัน คุณดูค่านี้ได้ใน API ConsoleCredentials page

redirect_uri จำเป็น

ระบุตําแหน่งที่เซิร์ฟเวอร์ API เปลี่ยนเส้นทางผู้ใช้หลังจากที่ผู้ใช้ดําเนินการขั้นตอนการให้สิทธิ์เสร็จสิ้นแล้ว ค่าต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตรายการใดรายการหนึ่งสําหรับไคลเอ็นต์ OAuth 2.0 ซึ่งคุณกําหนดค่าใน API Consoleของ Credentials pageไคลเอ็นต์ หากค่านี้ไม่ตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสําหรับ client_id ที่ระบุ คุณจะได้รับข้อผิดพลาด redirect_uri_mismatch

โปรดทราบว่ารูปแบบ http, https และเครื่องหมายทับ (/#39;/') ต้องตรงกันทั้งหมด

response_type จำเป็น

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

scope จำเป็น

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

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

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

state แนะนำ

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

คุณใช้พารามิเตอร์นี้เพื่อวัตถุประสงค์ต่างๆ ได้ เช่น การนําผู้ใช้ไปยังทรัพยากรที่ถูกต้องในแอปพลิเคชัน การส่ง nonces และการบรรเทาการปลอมแปลงคําขอแบบข้ามเว็บไซต์ เนื่องจาก redirect_uri จะเดาได้ การใช้ค่า state จะช่วยเพิ่มความมั่นใจว่าการเชื่อมต่อที่เข้ามาใหม่เป็นผลมาจากคําขอการตรวจสอบสิทธิ์ หากสร้างสตริงแบบสุ่มหรือเข้ารหัสแฮชของคุกกี้หรือค่าอื่นซึ่งจับภาพสถานะของไคลเอ็นต์ คุณจะตรวจสอบการตอบกลับเพิ่มเติมได้เพื่อให้แน่ใจว่าคําขอและการตอบกลับเกิดขึ้นในเบราว์เซอร์เดียวกัน ซึ่งเป็นการป้องกันการโจมตี เช่น การปลอมแปลงคําขอแบบข้ามเว็บไซต์ ดูตัวอย่างวิธีสร้างและยืนยันโทเค็น 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();
}

ขั้นตอนที่ 3: Google แสดงข้อความแจ้งขอคํายินยอมจากผู้ใช้

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

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

ข้อผิดพลาด

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

admin_policy_enforced

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

disallowed_useragent

ปลายทางการให้สิทธิ์จะแสดงใน User Agent แบบฝังที่นโยบาย OAuth 2.0 ของ Google ไม่อนุญาต

Android

นักพัฒนาแอป Android อาจพบข้อความแสดงข้อผิดพลาดนี้เมื่อเปิดคําขอการให้สิทธิ์ใน android.webkit.WebView นักพัฒนาซอฟต์แวร์ควรใช้ไลบรารี Android เช่น Google Sign-In สําหรับ Android หรือ OpenID Foundation'AppAuth สําหรับ Android แทน

นักพัฒนาเว็บอาจพบข้อผิดพลาดนี้เมื่อแอป Android เปิดลิงก์เว็บทั่วไปใน User Agent ที่ฝังอยู่ และผู้ใช้ไปที่ปลายทางการให้สิทธิ์ OAuth 2.0 ของ Google จากเว็บไซต์ของคุณ นักพัฒนาซอฟต์แวร์ควรอนุญาตให้ลิงก์ทั่วไปเปิดในเครื่องจัดการลิงก์เริ่มต้นของระบบปฏิบัติการ ซึ่งรวมทั้งเครื่องจัดการ Android App Link หรือแอปเบราว์เซอร์เริ่มต้น นอกจากนี้ไลบรารีแท็บที่กําหนดเองของ Android ก็เป็นตัวเลือกที่รองรับด้วย

iOS

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

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

org_internal

รหัสไคลเอ็นต์ OAuth ในคําขอเป็นส่วนหนึ่งของโปรเจ็กต์ที่จํากัดการเข้าถึงบัญชี Google ในองค์กร Google Cloud ที่เจาะจง ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกําหนดค่านี้ได้ในส่วนประเภทผู้ใช้ในบทความช่วยเหลือการตั้งค่าการตั้งค่าความยินยอมของ OAuth

origin_mismatch

รูปแบบ โดเมน และ/หรือพอร์ตของ JavaScript ที่มาจากคําขอการให้สิทธิ์อาจไม่ตรงกับ URI ต้นทางของ JavaScript ที่ได้รับอนุญาตซึ่งลงทะเบียนไว้สําหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบต้นทางของ JavaScript ที่ได้รับอนุญาตใน Google API ConsoleCredentials page

redirect_uri_mismatch

redirect_uri ที่ส่งผ่านในคําขอการให้สิทธิ์ไม่ตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสําหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตใน Google API Console Credentials page

รูปแบบ โดเมน และ/หรือพอร์ตของ JavaScript ที่มาจากคําขอการให้สิทธิ์อาจไม่ตรงกับ URI ต้นทางของ JavaScript ที่ได้รับอนุญาตซึ่งลงทะเบียนไว้สําหรับรหัสไคลเอ็นต์ OAuth ตรวจสอบต้นทาง JavaScript ที่ได้รับอนุญาตใน Google API Console Credentials page

ขั้นตอนที่ 4: จัดการการตอบสนองของเซิร์ฟเวอร์ OAuth 2.0

ไลบรารีของไคลเอ็นต์ JS

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

ปลายทาง 2.0 ของ OAuth

เซิร์ฟเวอร์ OAuth 2.0 จะส่งการตอบกลับไปยัง redirect_uri ที่ระบุไว้ในคําขอโทเค็นเพื่อการเข้าถึง

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

  • การตอบสนองของโทเค็นเพื่อการเข้าถึงมีดังนี้

    https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

    นอกเหนือจากพารามิเตอร์ access_token แล้ว สตริงส่วนย่อยยังมีพารามิเตอร์ token_type ซึ่งตั้งค่าเป็น Bearer เสมอ และพารามิเตอร์ expires_in ซึ่งระบุอายุการใช้งานของโทเค็นเป็นวินาที หากระบุพารามิเตอร์ state ในคําขอโทเค็นเพื่อการเข้าถึง ระบบจะรวมค่าของพารามิเตอร์ดังกล่าวไว้ในการตอบกลับด้วย

  • การตอบสนองข้อผิดพลาด:
    https://oauth2.example.com/callback#error=access_denied

ตัวอย่างการตอบสนองของเซิร์ฟเวอร์ OAuth 2.0

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

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

หลังจากเสร็จสิ้นขั้นตอน OAuth 2.0 ระบบจะเปลี่ยนเส้นทางคุณไปที่ http://localhost/oauth2callback URL ดังกล่าวจะทําให้เกิดข้อผิดพลาด 404 NOT FOUND เว้นแต่ว่าเครื่องคอมพิวเตอร์ของคุณจะทํางานในไฟล์ตามที่อยู่นั้น ขั้นตอนต่อไปจะอธิบายรายละเอียดเพิ่มเติมเกี่ยวกับข้อมูลที่แสดงใน URI เมื่อผู้ใช้ถูกเปลี่ยนเส้นทางกลับไปที่แอปพลิเคชันของคุณ

การเรียก Google APIs

ไลบรารีของไคลเอ็นต์ JS

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

ไลบรารีของไคลเอ็นต์รองรับการเรียกใช้เมธอด API 2 วิธี หากโหลดเอกสารการค้นพบแล้ว API จะกําหนดฟังก์ชันเฉพาะเมธอดให้คุณ คุณยังใช้ฟังก์ชัน gapi.client.request เพื่อเรียกเมธอด API ได้ด้วย ข้อมูลโค้ด 2 รายการต่อไปนี้สาธิตตัวเลือกเหล่านี้สําหรับเมธอด Drive API ของ about.get

// Example 1: Use method-specific function
var request = gapi.client.drive.about.get({'fields': 'user'});

// Execute the API request.
request.execute(function(response) {
  console.log(response);
});


// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
  'method': 'GET',
  'path': '/drive/v3/about',
  'params': {'fields': 'user'}
});
// Execute the API request.
request.execute(function(response) {
  console.log(response);
});

ปลายทาง 2.0 ของ OAuth

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

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

ตัวอย่าง HTTP GET

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

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

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

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

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

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

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

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

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

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

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

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

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/drive/v3/about?fields=user&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

ตัวอย่างที่สมบูรณ์

ไลบรารีของไคลเอ็นต์ JS

การสาธิตโค้ดตัวอย่าง

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

โปรดทราบว่าแอปนี้ส่งคําขอเข้าถึงขอบเขต https://www.googleapis.com/auth/drive.metadata.readonly การเข้าถึงจะขอเพื่อสาธิตวิธีการเริ่มต้นขั้นตอน OAuth 2.0 ในแอปพลิเคชัน JavaScript เท่านั้น แอปนี้ไม่ได้ส่งคําขอ API

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

ดังที่แสดงด้านบน ตัวอย่างโค้ดนี้มีไว้สําหรับหน้าเว็บ (แอป) ที่โหลดไลบรารีของไคลเอ็นต์ Google API สําหรับ JavaScript และเริ่มขั้นตอน OAuth 2.0 หน้าเว็บจะแสดงข้อมูลอย่างใดอย่างหนึ่งต่อไปนี้

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

และยังเพิกถอนสิทธิ์เข้าถึงแอปผ่านหน้าสิทธิ์ของบัญชี Google ได้ด้วย แอปจะแสดงเป็นการสาธิต OAuth 2.0 สําหรับ Google API เอกสาร

<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

ปลายทาง 2.0 ของ OAuth

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

สําหรับขั้นตอน OAuth 2.0 หน้าเว็บให้ทําตามขั้นตอนต่อไปนี้

  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 ต้องไม่มีคอมโพเนนต์ส่วนย่อย

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

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

    ไลบรารีของไคลเอ็นต์ JS

    หากต้องการเพิ่มขอบเขตลงในโทเค็นเพื่อการเข้าถึงที่มีอยู่ ให้เรียกเมธอด GoogleUser.grant(options) ออบเจ็กต์ options ระบุขอบเขตเพิ่มเติมที่คุณต้องการให้สิทธิ์เข้าถึง

    // Space-separated list of additional scope(s) you are requesting access to.
    // This code adds read-only access to the user's calendars via the Calendar API.
    var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
    
    // Retrieve the GoogleUser object for the current user.
    var GoogleUser = GoogleAuth.currentUser.get();
    GoogleUser.grant({'scope': NEW_SCOPES});

    ปลายทาง 2.0 ของ OAuth

    หากต้องการเพิ่มขอบเขตลงในโทเค็นเพื่อการเข้าถึงที่มีอยู่ ให้ใส่พารามิเตอร์ include_granted_scopes ในคําขอไปยังเซิร์ฟเวอร์ OAuth 2.0 ของ Google

    โดยข้อมูลโค้ดต่อไปนี้จะแสดงวิธีดําเนินการดังกล่าว ข้อมูลโค้ดจะสมมติว่าคุณได้จัดเก็บขอบเขตที่โทเค็นเพื่อการเข้าถึงถูกต้องในพื้นที่เก็บข้อมูลภายในของเบราว์เซอร์ (โค้ดตัวอย่างที่สมบูรณ์จะจัดเก็บรายการขอบเขตที่โทเค็นเพื่อการเข้าถึงถูกต้องด้วยการตั้งค่าพร็อพเพอร์ตี้ oauth2-test-params.scope ในพื้นที่เก็บข้อมูลในเครื่องของเบราว์เซอร์)

    ข้อมูลโค้ดจะเปรียบเทียบขอบเขตที่โทเค็นเพื่อการเข้าถึงใช้ได้กับขอบเขตที่คุณต้องการใช้สําหรับการค้นหาหนึ่งๆ หากโทเค็นเพื่อการเข้าถึงไม่ครอบคลุมขอบเขตดังกล่าว กระบวนการของ OAuth 2.0 จะเริ่มต้นขึ้น ที่นี่ ฟังก์ชัน oauth2SignIn จะเหมือนกับฟังก์ชันที่ให้ไว้ในขั้นตอนที่ 2 (และระบุไว้ภายหลังในตัวอย่างที่สมบูรณ์)

    var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    
    var current_scope_granted = false;
    if (params.hasOwnProperty('scope')) {
      var scopes = params['scope'].split(' ');
      for (var s = 0; s < scopes.length; s++) {
        if (SCOPE == scopes[s]) {
          current_scope_granted = true;
        }
      }
    }
    
    if (!current_scope_granted) {
      oauth2SignIn(); // This function is defined elsewhere in this document.
    } else {
      // Since you already have access, you can proceed with the API request.
    }

    กําลังเพิกถอนโทเค็น

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

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

    ไลบรารีของไคลเอ็นต์ JS

    หากต้องการเพิกถอนโทเค็นแบบเป็นโปรแกรม ให้เรียกใช้ GoogleAuth.disconnect() ดังนี้

    GoogleAuth.disconnect();

    ปลายทาง 2.0 ของ OAuth

    หากต้องการเพิกถอนโทเค็นแบบเป็นโปรแกรม แอปพลิเคชันจะส่งคําขอไปยัง https://oauth2.googleapis.com/revoke และมีโทเค็นเป็นพารามิเตอร์ดังนี้

    curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
            https://oauth2.googleapis.com/revoke?token={token}

    โดยอาจเป็นโทเค็นเพื่อการเข้าถึงหรือโทเค็นการรีเฟรช หากโทเค็นเป็นโทเค็นเพื่อการเข้าถึงและมีโทเค็นการรีเฟรชที่สอดคล้องกัน ระบบจะเพิกถอนโทเค็นการรีเฟรชด้วย

    หากการเพิกถอนประมวลผลสําเร็จแล้ว รหัสสถานะ HTTP ของการตอบกลับจะเป็น 200 สําหรับเงื่อนไขข้อผิดพลาด จะมีการแสดงรหัสสถานะ HTTP 400 พร้อมกับรหัสข้อผิดพลาด

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

    function revokeAccess(accessToken) {
      // Google's OAuth 2.0 endpoint for revoking access tokens.
      var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';
    
      // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
      var form = document.createElement('form');
      form.setAttribute('method', 'post');
      form.setAttribute('action', revokeTokenEndpoint);
    
      // Add access token to the form so it is set as value of 'token' parameter.
      // This corresponds to the sample curl request, where the URL is:
      //      https://oauth2.googleapis.com/revoke?token={token}
      var tokenField = document.createElement('input');
      tokenField.setAttribute('type', 'hidden');
      tokenField.setAttribute('name', 'token');
      tokenField.setAttribute('value', accessToken);
      form.appendChild(tokenField);
    
      // Add form to page and submit it to actually revoke the token.
      document.body.appendChild(form);
      form.submit();
    }