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

ปลายทาง OAuth 2.0

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

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

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

ด้านล่างนี้เป็นตัวอย่าง URL ที่มีตัวแบ่งบรรทัดและการเว้นวรรคเพื่อให้อ่านง่ายขึ้น URL ขอ เข้าถึงขอบเขตที่อนุญาตการเข้าถึงเพื่อเรียกข้อมูล YouTube ของผู้ใช้ ใช้ค่าเพิ่ม การให้สิทธิ์ (include_granted_scopes=true) เพื่อให้แน่ใจว่าโทเค็นเพื่อการเข้าถึงใหม่ ครอบคลุมขอบเขตที่ผู้ใช้ให้สิทธิ์เข้าถึงแอปพลิเคชันก่อนหน้านี้ อื่นๆ อีกมากมาย ก็จะมีการตั้งค่าในตัวอย่างด้วย

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 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();
}

ปลายทาง 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.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 client_id=client_id

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

ปลายทาง OAuth 2.0

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

โปรดทราบว่า API สตรีมมิงแบบสดของ YouTube ไม่รองรับขั้นตอนของบัญชีบริการ ตั้งแต่ที่นั่น ไม่มีวิธีลิงก์บัญชีบริการกับบัญชี YouTube และพยายามให้สิทธิ์คำขอโดยใช้บัญชี จะสร้างข้อผิดพลาด NoLinkedYouTubeAccount

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

ตัวอย่าง HTTP GET

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

GET /youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

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

GET https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

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

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

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true

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

curl https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&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/liveBroadcasts?part=id,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 นี้เรียกใช้ liveBroadcasts.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';

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var fragmentString = location.hash.substring(1);
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0 && params['state']) {
    if (params['state'] == localStorage.getItem('state')) {
      localStorage.setItem('oauth2-test-params', JSON.stringify(params) );

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,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() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

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

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

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

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

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

ปลายทาง OAuth 2.0

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

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

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

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

ปลายทาง 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();
}