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

ปลายทาง OAuth 2.0

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

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

ตัวอย่างการเปลี่ยนเส้นทางไปยังเซิร์ฟเวอร์การให้สิทธิ์ของ 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 API สำหรับ 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();
}

ปลายทาง 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 เมื่อระบบเปลี่ยนเส้นทางผู้ใช้กลับไปยังแอปพลิเคชัน

ปลายทาง OAuth 2.0

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

ปลายทาง 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.
}

ปลายทาง 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 API สำหรับ 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();
}