ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশনের জন্য OAuth 2.0

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

https://accounts.google.com/o/oauth2/v2/auth এ Google-এর OAuth 2.0 এন্ডপয়েন্ট থেকে অ্যাক্সেসের অনুরোধ করার জন্য একটি URL তৈরি করুন। এই শেষ বিন্দু 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 তৈরি করার পরে, ব্যবহারকারীকে এটিতে পুনঃনির্দেশ করুন।

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

নিম্নলিখিত জাভাস্ক্রিপ্ট স্নিপেট দেখায় কিভাবে জাভাস্ক্রিপ্টের জন্য Google API ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে জাভাস্ক্রিপ্টে অনুমোদনের প্রবাহ শুরু করতে হয়। যেহেতু এই 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 এ একটি প্রতিক্রিয়া পাঠায়।

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

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

  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 ত্রুটি প্রদান করবে যদি না আপনার স্থানীয় মেশিনটি সেই ঠিকানায় একটি ফাইল পরিবেশন করে। পরবর্তী ধাপে ইউআরআই-এ ফেরত দেওয়া তথ্য সম্পর্কে আরও বিশদ প্রদান করা হয় যখন ব্যবহারকারীকে আপনার অ্যাপ্লিকেশনে ফেরত পাঠানো হয়।

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

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

আপনি সমস্ত Google API ব্যবহার করে দেখতে পারেন এবং OAuth 2.0 খেলার মাঠে তাদের স্কোপ দেখতে পারেন।

HTTP GET উদাহরণ

অনুমোদন ব্যবহার করে drive.files এন্ডপয়েন্টে (ড্রাইভ ফাইল এপিআই) একটি কল Authorization: Bearer HTTP হেডার নিচের মত দেখতে হতে পারে। মনে রাখবেন যে আপনাকে আপনার নিজস্ব অ্যাক্সেস টোকেন নির্দিষ্ট করতে হবে:

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

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

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

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

নীচের কোড স্নিপেটটি দেখায় যে কীভাবে একটি Google API-এ একটি অনুরোধ পাঠাতে CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) ব্যবহার করতে হয়। এই উদাহরণটি JavaScript-এর জন্য Google APIs ক্লায়েন্ট লাইব্রেরি ব্যবহার করে না। যাইহোক, আপনি ক্লায়েন্ট লাইব্রেরি ব্যবহার না করলেও, সেই লাইব্রেরির ডকুমেন্টেশনে 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 এন্ডপয়েন্ট

এই কোড নমুনা জাভাস্ক্রিপ্টের জন্য Google APIs ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে কিভাবে JavaScript-এ OAuth 2.0 ফ্লো সম্পূর্ণ করতে হয় তা দেখায়। কোডটি একটি HTML পৃষ্ঠার জন্য যা একটি API অনুরোধ চেষ্টা করার জন্য একটি বোতাম প্রদর্শন করে। আপনি বোতামটি ক্লিক করলে, পৃষ্ঠাটি আপনার ব্রাউজারের স্থানীয় সঞ্চয়স্থানে একটি API অ্যাক্সেস টোকেন সংরক্ষণ করেছে কিনা তা দেখতে কোডটি পরীক্ষা করে। যদি তাই হয়, এটি API অনুরোধটি কার্যকর করে। অন্যথায়, এটি OAuth 2.0 প্রবাহ শুরু করে।

OAuth 2.0 প্রবাহের জন্য, পৃষ্ঠাটি এই পদক্ষেপগুলি অনুসরণ করে:

1. এটি ব্যবহারকারীকে Google-এর OAuth 2.0 সার্ভারে নির্দেশ করে, যা https://www.googleapis.com/auth/drive.metadata.readonly স্কোপে অ্যাক্সেসের অনুরোধ করে।
2. এক বা একাধিক অনুরোধকৃত স্কোপে অ্যাক্সেস দেওয়ার (বা অস্বীকার) করার পরে, ব্যবহারকারীকে মূল পৃষ্ঠায় পুনঃনির্দেশিত করা হয়, যা খণ্ড শনাক্তকারী স্ট্রিং থেকে অ্যাক্সেস টোকেন পার্স করে।

3. নমুনা API অনুরোধ করতে পৃষ্ঠাটি অ্যাক্সেস টোকেন ব্যবহার করে।

   API অনুরোধটি অনুমোদিত ব্যবহারকারীর Google ড্রাইভ অ্যাকাউন্ট সম্পর্কে তথ্য পুনরুদ্ধার করতে ড্রাইভ API-এর about.get পদ্ধতিতে কল করে৷

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

আপনি আপনার Google অ্যাকাউন্টের অনুমতি পৃষ্ঠার মাধ্যমে অ্যাপে অ্যাক্সেস প্রত্যাহার করতে পারেন। অ্যাপটিকে Google API ডক্সের জন্য OAuth 2.0 ডেমো হিসেবে তালিকাভুক্ত করা হবে।

স্থানীয়ভাবে এই কোডটি চালানোর জন্য, আপনাকে YOUR_CLIENT_ID এবং YOUR_REDIRECT_URI ভেরিয়েবলের জন্য মান সেট করতে হবে যা আপনার অনুমোদনের শংসাপত্রের সাথে সঙ্গতিপূর্ণ। YOUR_REDIRECT_URI ভেরিয়েবলটি একই URL এ সেট করা উচিত যেখানে পৃষ্ঠাটি পরিবেশিত হচ্ছে৷ মানটি অবশ্যই 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/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() {
    // 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/drive.metadata.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 এন্ডপয়েন্ট

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

নিম্নলিখিত কোড স্নিপেট প্রদর্শন করে কিভাবে এটি করতে হয়। স্নিপেট অনুমান করে যে আপনি সেই স্কোপগুলি সংরক্ষণ করেছেন যার জন্য আপনার অ্যাক্সেস টোকেন ব্রাউজারের স্থানীয় স্টোরেজে বৈধ। ( সম্পূর্ণ উদাহরণ কোডটি স্কোপের একটি তালিকা সংরক্ষণ করে যার জন্য অ্যাক্সেস টোকেনটি ব্রাউজারের স্থানীয় স্টোরেজে 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 । ত্রুটি অবস্থার জন্য, একটি এইচটিটিপি স্ট্যাটাস কোড 400 একটি ত্রুটি কোড সহ ফেরত দেওয়া হয়।

নিম্নলিখিত জাভাস্ক্রিপ্ট স্নিপেট দেখায় কিভাবে জাভাস্ক্রিপ্টের জন্য Google API ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে জাভাস্ক্রিপ্টে একটি টোকেন প্রত্যাহার করা যায়। যেহেতু টোকেন প্রত্যাহার করার জন্য Google-এর 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();
}