JavaScript ওয়েব অ্যাপ্লিকেশনের জন্য OAuth 2.0 ব্যবহার করা

OAuth 2.0 এন্ডপয়েন্ট

https://accounts.google.com/o/oauth2/v2/auth -এ অবস্থিত গুগলের OAuth 2.0 এন্ডপয়েন্ট থেকে অ্যাক্সেসের অনুরোধ করার জন্য একটি URL তৈরি করুন। এই এন্ডপয়েন্টটি HTTPS-এর মাধ্যমে অ্যাক্সেসযোগ্য; সাধারণ HTTP সংযোগ প্রত্যাখ্যান করা হয়।

গুগল অনুমোদন সার্ভার ওয়েব সার্ভার অ্যাপ্লিকেশনগুলির জন্য নিম্নলিখিত কোয়েরি স্ট্রিং প্যারামিটারগুলি সমর্থন করে:

গুগলের অনুমোদন সার্ভারে নমুনা পুনঃনির্দেশ

নীচের নমুনা URL-টি এমন একটি স্কোপে অফলাইন অ্যাক্সেসের ( access_type=offline ) জন্য অনুরোধ করে, যা ব্যবহারকারীর ইউটিউব অ্যানালিটিক্স রিপোর্ট পুনরুদ্ধার করার অনুমতি দেয়। এটি ইনক্রিমেন্টাল অথরাইজেশন ব্যবহার করে, যাতে নতুন অ্যাক্সেস টোকেনটি সেই সমস্ত স্কোপকে অন্তর্ভুক্ত করে যেগুলিতে ব্যবহারকারী পূর্বে অ্যাপ্লিকেশনটিকে অ্যাক্সেস দিয়েছিলেন। URL-টি প্রয়োজনীয় redirect_uri , response_type , এবং client_id প্যারামিটারগুলির পাশাপাশি state প্যারামিটারের জন্যও মান নির্ধারণ করে। পাঠযোগ্যতার জন্য URL-টিতে লাইন ব্রেক এবং স্পেস রয়েছে।

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

রিকোয়েস্ট ইউআরএল তৈরি করার পর, ব্যবহারকারীকে সেখানে রিডাইরেক্ট করুন।

জাভাস্ক্রিপ্ট নমুনা কোড

নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি দেখায় কিভাবে জাভাস্ক্রিপ্টের জন্য গুগল এপিআই ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে অথরাইজেশন প্রক্রিয়া শুরু করা যায়। যেহেতু এই OAuth 2.0 এন্ডপয়েন্টটি ক্রস-অরিজিন রিসোর্স শেয়ারিং (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/yt-analytics.readonly https://www.googleapis.com/auth/calendar.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 তে একটি প্রতিক্রিয়া পাঠায়।

যদি ব্যবহারকারী অনুরোধটি অনুমোদন করেন, তাহলে প্রতিক্রিয়াটিতে একটি অ্যাক্সেস টোকেন থাকে। যদি ব্যবহারকারী অনুরোধটি অনুমোদন না করেন, তাহলে প্রতিক্রিয়াটিতে একটি ত্রুটির বার্তা থাকে। অ্যাক্সেস টোকেন বা ত্রুটির বার্তাটি রিডাইরেক্ট ইউআরআই-এর হ্যাশ ফ্র্যাগমেন্টে ফেরত দেওয়া হয়, যেমনটি নিচে দেখানো হয়েছে:

• একটি অ্যাক্সেস টোকেন প্রতিক্রিয়া:

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

  access_token প্যারামিটার ছাড়াও, fragment string-টিতে token_type প্যারামিটারও থাকে, যা সর্বদা Bearer এ সেট করা থাকে, এবং expires_in প্যারামিটার থাকে, যা সেকেন্ডে টোকেনের মেয়াদকাল নির্দিষ্ট করে। যদি access token request-এ state প্যারামিটারটি নির্দিষ্ট করা থাকে, তবে এর মানও response-এ অন্তর্ভুক্ত করা হয়।

• একটি ত্রুটিপূর্ণ প্রতিক্রিয়া:

  https://oauth2.example.com/callback#error=access_denied

OAuth 2.0 সার্ভারের প্রতিক্রিয়ার নমুনা

আপনি নিম্নলিখিত নমুনা URL-টিতে ক্লিক করে এই প্রবাহটি পরীক্ষা করতে পারেন, যা আপনার Google Drive-এর ফাইলগুলির মেটাডেটা দেখার জন্য শুধুমাত্র-পঠ্য অ্যাক্সেস এবং আপনার Google Calendar-এর ইভেন্টগুলি দেখার জন্য শুধুমাত্র-পঠ্য অ্যাক্সেসের অনুরোধ করে:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

OAuth 2.0 ফ্লো সম্পন্ন করার পর, আপনার ব্রাউজার আপনাকে OAuth 2.0 প্লেগ্রাউন্ড- এ রিডাইরেক্ট করবে, যা OAuth ফ্লো পরীক্ষা করার একটি টুল। আপনি দেখতে পাবেন যে OAuth 2.0 প্লেগ্রাউন্ড স্বয়ংক্রিয়ভাবে অথরাইজেশন কোডটি সংগ্রহ করে নিয়েছে।

OAuth 2.0 এন্ডপয়েন্ট

ব্যবহারকারী আপনার অ্যাপ্লিকেশনকে কোনো নির্দিষ্ট স্কোপে অ্যাক্সেস দিয়েছেন কিনা তা যাচাই করতে, অ্যাক্সেস টোকেন রেসপন্সের scope ফিল্ডটি পরীক্ষা করুন। অ্যাক্সেস_টোকেন দ্বারা প্রদত্ত অ্যাক্সেসের স্কোপগুলো স্পেস দ্বারা বিভক্ত এবং কেস-সেনসিটিভ স্ট্রিংয়ের একটি তালিকা হিসাবে প্রকাশ করা হয়।

উদাহরণস্বরূপ, নিম্নলিখিত নমুনা অ্যাক্সেস টোকেন প্রতিক্রিয়াটি নির্দেশ করে যে ব্যবহারকারী আপনার অ্যাপ্লিকেশনকে শুধুমাত্র-পঠ্য ড্রাইভ অ্যাক্টিভিটি এবং ক্যালেন্ডার ইভেন্টগুলির অনুমতি প্রদান করেছেন:

  {
    "access_token": "1/fFAGRNJru1FTz70BzhT3Zg",
    "expires_in": 3920,
    "token_type": "Bearer",
    "scope": "https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/calendar.readonly",
    "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI"
  }

OAuth 2.0 এন্ডপয়েন্ট

আপনার অ্যাপ্লিকেশন একটি অ্যাক্সেস টোকেন পাওয়ার পর, যদি এপিআই-এর জন্য প্রয়োজনীয় অ্যাক্সেসের সুযোগ(গুলি) মঞ্জুর করা হয়ে থাকে, তবে আপনি একটি নির্দিষ্ট ব্যবহারকারী অ্যাকাউন্টের পক্ষ থেকে একটি গুগল এপিআই-তে কল করার জন্য টোকেনটি ব্যবহার করতে পারেন। এটি করার জন্য, এপিআই-তে করা অনুরোধে একটি access_token কোয়েরি প্যারামিটার অথবা একটি Authorization HTTP হেডার Bearer ভ্যালু অন্তর্ভুক্ত করে অ্যাক্সেস টোকেনটি যোগ করুন। যখন সম্ভব, HTTP হেডার ব্যবহার করা শ্রেয়, কারণ কোয়েরি স্ট্রিংগুলো সার্ভার লগে দৃশ্যমান হওয়ার প্রবণতা থাকে। বেশিরভাগ ক্ষেত্রে আপনি গুগল এপিআই-তে আপনার কলগুলো সেট আপ করার জন্য একটি ক্লায়েন্ট লাইব্রেরি ব্যবহার করতে পারেন (উদাহরণস্বরূপ, ইউটিউব অ্যানালিটিক্স এপিআই-তে কল করার সময়)।

উল্লেখ্য যে, ইউটিউব অ্যানালিটিক্স এপিআই সার্ভিস অ্যাকাউন্ট ফ্লো সমর্থন করে না। ইউটিউব রিপোর্টিং এপিআই শুধুমাত্র সেইসব ইউটিউব কন্টেন্ট মালিকদের জন্য সার্ভিস অ্যাকাউন্ট সমর্থন করে, যারা একাধিক ইউটিউব চ্যানেলের মালিক এবং সেগুলো পরিচালনা করেন, যেমন রেকর্ড লেবেল এবং মুভি স্টুডিও।

আপনি OAuth 2.0 প্লেগ্রাউন্ডে সমস্ত গুগল এপিআই ব্যবহার করে দেখতে এবং সেগুলোর পরিধি দেখতে পারেন।

HTTP GET উদাহরণ

Authorization: Bearer HTTP হেডার ব্যবহার করে reports.query এন্ডপয়েন্টে (ইউটিউব অ্যানালিটিক্স এপিআই) একটি কল নিম্নলিখিতের মতো দেখতে হতে পারে। মনে রাখবেন যে আপনাকে আপনার নিজস্ব অ্যাক্সেস টোকেন নির্দিষ্ট করতে হবে:

GET /youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

এখানে access_token কোয়েরি স্ট্রিং প্যারামিটার ব্যবহার করে প্রমাণীকৃত ব্যবহারকারীর জন্য একই API-তে একটি কল দেওয়া হলো:

GET https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

curl উদাহরণ

আপনি curl কমান্ড-লাইন অ্যাপ্লিকেশন দিয়ে এই কমান্ডগুলো পরীক্ষা করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো যেখানে HTTP হেডার অপশন (পছন্দনীয়) ব্যবহার করা হয়েছে:

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

অথবা, বিকল্পভাবে, কোয়েরি স্ট্রিং প্যারামিটার বিকল্পটি:

curl https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

জাভাস্ক্রিপ্ট নমুনা কোড

নিচের কোড স্নিপেটটি দেখায় কিভাবে CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) ব্যবহার করে একটি গুগল এপিআই-তে অনুরোধ পাঠানো যায়। এই উদাহরণটিতে জাভাস্ক্রিপ্টের জন্য গুগল এপিআই ক্লায়েন্ট লাইব্রেরি ব্যবহার করা হয়নি। তবে, আপনি ক্লায়েন্ট লাইব্রেরিটি ব্যবহার না করলেও, সেই লাইব্রেরির ডকুমেন্টেশনে থাকা CORS সাপোর্ট গাইডটি সম্ভবত আপনাকে এই অনুরোধগুলো আরও ভালোভাবে বুঝতে সাহায্য করবে।

এই কোড স্নিপেটে, access_token ভেরিয়েবলটি সেই টোকেনকে বোঝায় যা আপনি অনুমোদিত ব্যবহারকারীর পক্ষ থেকে এপিআই (API) অনুরোধ করার জন্য পেয়েছেন। সম্পূর্ণ উদাহরণটিতে দেখানো হয়েছে কীভাবে সেই টোকেনটি ব্রাউজারের লোকাল স্টোরেজে সংরক্ষণ করতে হয় এবং এপিআই অনুরোধ করার সময় তা পুনরুদ্ধার করতে হয়।

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

OAuth 2.0 এন্ডপয়েন্ট

এই কোড স্যাম্পলটি দেখায় কিভাবে জাভাস্ক্রিপ্টের জন্য গুগল এপিআই ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে OAuth 2.0 ফ্লো সম্পন্ন করা যায়। কোডটি একটি HTML পেজের জন্য, যেখানে একটি এপিআই রিকোয়েস্ট চেষ্টা করার জন্য একটি বাটন দেখানো হয়। আপনি বাটনটিতে ক্লিক করলে, কোডটি পরীক্ষা করে দেখে যে পেজটি আপনার ব্রাউজারের লোকাল স্টোরেজে কোনো এপিআই অ্যাক্সেস টোকেন সংরক্ষণ করেছে কিনা। যদি করে থাকে, তবে এটি এপিআই রিকোয়েস্টটি সম্পাদন করে। অন্যথায়, এটি OAuth 2.0 ফ্লো শুরু করে।

OAuth 2.0 ফ্লো-এর জন্য, পেজটি নিম্নলিখিত ধাপগুলো অনুসরণ করে:

1. এটি ব্যবহারকারীকে গুগলের OAuth 2.0 সার্ভারে নিয়ে যায়, যা https://www.googleapis.com/auth/yt-analytics.readonly এবং https://www.googleapis.com/auth/calendar.readonly স্কোপগুলোতে অ্যাক্সেসের অনুরোধ করে।
2. এক বা একাধিক অনুরোধকৃত স্কোপে অ্যাক্সেস মঞ্জুর (বা অস্বীকার) করার পর, ব্যবহারকারীকে মূল পৃষ্ঠায় পুনঃনির্দেশিত করা হয়, যেটি ফ্র্যাগমেন্ট আইডেন্টিফায়ার স্ট্রিং থেকে অ্যাক্সেস টোকেনটি পার্স করে।
3. পৃষ্ঠাটি যাচাই করে দেখে যে ব্যবহারকারী অ্যাপ্লিকেশনটিতে কোন কোন স্কোপে অ্যাক্সেসের অনুমতি দিয়েছেন।

4. যদি ব্যবহারকারী অনুরোধ করা scope() গুলিতে অ্যাক্সেসের অনুমতি দিয়ে থাকেন, তাহলে পেজটি নমুনা API অনুরোধটি করার জন্য অ্যাক্সেস টোকেন ব্যবহার করে।

   এই এপিআই অনুরোধটি অনুমোদিত ব্যবহারকারীর ইউটিউব চ্যানেলের ভিউ সংখ্যা পুনরুদ্ধার করার জন্য ইউটিউব অ্যানালিটিক্স এপিআই-এর reports.query মেথডকে কল করে।

5. অনুরোধটি সফলভাবে সম্পন্ন হলে, এপিআই প্রতিক্রিয়াটি ব্রাউজারের ডিবাগিং কনসোলে লগ করা হয়।

আপনি আপনার গুগল অ্যাকাউন্টের অনুমতি পৃষ্ঠা থেকে অ্যাপটিতে প্রবেশাধিকার প্রত্যাহার করতে পারেন। ক্লায়েন্ট আইডি তৈরির সময় OAuth সম্মতি স্ক্রিনের মধ্যে ব্র্যান্ডিং পৃষ্ঠায় প্রদত্ত অ্যাপ্লিকেশন নামটি হিসেবে অ্যাপটি তালিকাভুক্ত থাকে।

এই কোডটি স্থানীয়ভাবে চালানোর জন্য, আপনাকে YOUR_CLIENT_ID এবং YOUR_REDIRECT_URI ভেরিয়েবলগুলোর জন্য আপনার অনুমোদন ক্রেডেনশিয়াল অনুযায়ী মান সেট করতে হবে। YOUR_REDIRECT_URI ভেরিয়েবলটি অবশ্যই সেই একই URL-এ সেট করতে হবে যেখান থেকে পেজটি সার্ভ করা হচ্ছে। এই মানটি অবশ্যই OAuth 2.0 ক্লায়েন্টের জন্য অনুমোদিত রিডাইরেক্ট URI-গুলোর একটির সাথে হুবহু মিলতে হবে, যা আপনি ক্লাউড কনসোল ক্লায়েন্টস পেজে কনফিগার করেছেন। যদি এই মানটি কোনো অনুমোদিত 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']) { 
      // User authorized the request. Now, check which scopes were granted.
      if (params['scope'].includes('https://www.googleapis.com/auth/drive.metadata.readonly')) {
        // User authorized read-only Drive activity permission.
        // Calling the APIs, etc.
        var xhr = new XMLHttpRequest();
        xhr.open('GET',
          'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
          '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 {
        // User didn't authorize read-only Drive activity permission.
        // Update UX and application accordingly
        console.log('User did not authorize read-only Drive activity permission.');
      }

      // Check if user authorized Calendar read permission.
      if (params['scope'].includes('https://www.googleapis.com/auth/calendar.readonly')) {
        // User authorized Calendar read permission.
        // Calling the APIs, etc.
        console.log('User authorized Calendar read permission.');
      }
      else {
        // User didn't authorize Calendar read permission.
        // Update UX and application accordingly
        console.log('User did not authorize Calendar read permission.');
      } 
    } 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/yt-analytics.readonly https://www.googleapis.com/auth/calendar.readonly',
                  '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 এন্ডপয়েন্ট

এই উদাহরণে, কলিং অ্যাপ্লিকেশনটি ব্যবহারকারীর ইউটিউব অ্যানালিটিক্স ডেটা পুনরুদ্ধার করার জন্য অ্যাক্সেসের অনুরোধ করে, এছাড়াও ব্যবহারকারী অ্যাপ্লিকেশনটিকে অন্য যে কোনো অ্যাক্সেস ইতিমধ্যেই প্রদান করেছেন, তারও অনুরোধ করে।

বিদ্যমান অ্যাক্সেস টোকেনে স্কোপ যোগ করতে, গুগলের OAuth 2.0 সার্ভারে আপনার অনুরোধে include_granted_scopes প্যারামিটারটি অন্তর্ভুক্ত করুন।

নিম্নলিখিত কোড স্নিপেটটি দেখায় যে কীভাবে তা করতে হয়। এই স্নিপেটটি ধরে নেয় যে, আপনার অ্যাক্সেস টোকেনটি যে স্কোপগুলোর জন্য বৈধ, সেগুলো আপনি ব্রাউজারের লোকাল স্টোরেজে সংরক্ষণ করেছেন। ( সম্পূর্ণ উদাহরণ কোডটি ব্রাউজারের লোকাল স্টোরেজে oauth2-test-params.scope প্রপার্টি সেট করার মাধ্যমে অ্যাক্সেস টোকেনটি যে স্কোপগুলোর জন্য বৈধ, তার একটি তালিকা সংরক্ষণ করে।)

এই কোড স্নিপেটটি, অ্যাক্সেস টোকেনটি যে স্কোপগুলোর জন্য বৈধ, সেগুলোকে একটি নির্দিষ্ট কোয়েরির জন্য আপনার ব্যবহার করতে চাওয়া স্কোপের সাথে তুলনা করে। যদি অ্যাক্সেস টোকেনটি সেই স্কোপকে অন্তর্ভুক্ত না করে, তাহলে OAuth 2.0 ফ্লো শুরু হয়। এখানে, oauth2SignIn ফাংশনটি ধাপ ২- এ দেওয়া ফাংশনটির মতোই (এবং এটি সম্পূর্ণ উদাহরণের পরবর্তী অংশে দেওয়া হয়েছে)।

var SCOPE = 'https://www.googleapis.com/auth/yt-analytics.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 ফেরত দেওয়া হয়।

নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটিতে দেখানো হয়েছে কিভাবে জাভাস্ক্রিপ্টের জন্য গুগল এপিআই ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে একটি টোকেন বাতিল করা যায়। যেহেতু টোকেন বাতিল করার জন্য গুগলের OAuth 2.0 এন্ডপয়েন্টটি ক্রস-অরিজিন রিসোর্স শেয়ারিং (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();
}