OAuth 2.0: Google এর মাধ্যমে ব্যবহারকারীদের প্রমাণীকরণ করুন, OAuth 2.0: Google এর মাধ্যমে ব্যবহারকারীদের প্রমাণীকরণ করুন

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

এই টিউটোরিয়ালটি এমন একটি এক্সটেনশন তৈরি করে যা গুগল পিপল এপিআই (Google People API) এবং ক্রোম আইডেন্টিটি এপিআই (Chrome Identity API) ব্যবহার করে একজন ব্যবহারকারীর গুগল কন্ট্যাক্টস অ্যাক্সেস করে। যেহেতু এক্সটেনশনগুলো HTTPS-এর মাধ্যমে লোড হয় না, রিডাইরেক্ট করতে বা কুকি সেট করতে পারে না, তাই এগুলো OAuth2 ব্যবহারের জন্য ক্রোম আইডেন্টিটি এপিআই- এর উপর নির্ভর করে।

শুরু করুন

প্রথমে একটি ডিরেক্টরি এবং নিম্নলিখিত স্টার্টার ফাইলগুলো তৈরি করুন।

manifest.json

manifest.json নামে একটি ফাইল তৈরি করে তাতে নিম্নলিখিত কোডটি অন্তর্ভুক্ত করে ম্যানিফেস্টটি যোগ করুন।

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 3,
  "action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

সার্ভিস-ওয়ার্কার.জেএস

service-worker.js নামে একটি ফাইল তৈরি করে এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করে এক্সটেনশন সার্ভিস ওয়ার্কার যোগ করুন।

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

index.html নামে একটি HTML ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন।

<html>
  <head>
    <title>FriendBlock</title>
    <style>
      button {
        padding: 10px;
        background-color: #3C79F8;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <button>FriendBlock Contacts</button>
    <div id="friendDiv"></div>
  </body>
</html>

একটি সামঞ্জস্যপূর্ণ এক্সটেনশন আইডি রাখুন

ডেভেলপমেন্টের সময় একটিমাত্র আইডি বজায় রাখা অপরিহার্য। একটি সামঞ্জস্যপূর্ণ আইডি রাখতে, এই ধাপগুলো অনুসরণ করুন:

ডেভেলপার ড্যাশবোর্ডে এক্সটেনশন আপলোড করুন

এক্সটেনশন ডিরেক্টরিটিকে একটি .zip ফাইলে প্যাকেজ করুন এবং প্রকাশ না করেই Chrome ডেভেলপার ড্যাশবোর্ডে আপলোড করুন:

  1. ডেভেলপার ড্যাশবোর্ডে, 'নতুন আইটেম যোগ করুন' (Add new item) এ ক্লিক করুন।
  2. ‘Browse files’- এ ক্লিক করুন, এক্সটেনশনটির জিপ ফাইলটি নির্বাচন করুন এবং আপলোড করুন।
  3. প্যাকেজ ট্যাবে যান এবং পাবলিক কী দেখুন-এ ক্লিক করুন।
প্যাকেজ ট্যাবে পাবলিক কী দেখার বাটন
প্যাকেজ ট্যাবে পাবলিক কী দেখার বাটন

ডায়ালগ বক্সটি খোলা হলে, এই ধাপগুলো অনুসরণ করুন:

  1. -----BEGIN PUBLIC KEY----- এবং -----END PUBLIC KEY----- এর মাঝের কোডটি কপি করুন।
  2. লেখাটিকে এক লাইনের করার জন্য নতুন লাইনগুলো মুছে ফেলুন।
পাবলিক কী ডায়ালগ উইন্ডো
পাবলিক কী ডায়ালগ উইন্ডো

manifest.json ফাইলের "key" ফিল্ডের অধীনে কোডটি যোগ করুন। এর ফলে এক্সটেনশনটি একই আইডি ব্যবহার করবে।

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

আইডি তুলনা করুন

chrome://extensions এ এক্সটেনশন ম্যানেজমেন্ট পেজটি খুলুন, ডেভেলপার মোড চালু আছে কিনা তা নিশ্চিত করুন এবং আনপ্যাকেজ করা এক্সটেনশন ডিরেক্টরিটি আপলোড করুন। এক্সটেনশন ম্যানেজমেন্ট পেজের এক্সটেনশন আইডি-র সাথে ডেভেলপার ড্যাশবোর্ডের আইটেম আইডি মিলিয়ে দেখুন। আইডি দুটি অবশ্যই মিলে যেতে হবে।

এক্সটেনশন ম্যাচ এর আইডি

একটি OAuth ক্লায়েন্ট আইডি তৈরি করুন

যে কোনো অ্যাপ্লিকেশন যা গুগল এপিআই (Google API) অ্যাক্সেস করার জন্য OAuth 2.0 ব্যবহার করে, সেটির অবশ্যই এমন অনুমোদন ক্রেডেনশিয়াল (authorization credentials) থাকতে হবে যা গুগলের OAuth 2.0 সার্ভারের কাছে অ্যাপ্লিকেশনটিকে শনাক্ত করে। নিম্নলিখিত ধাপগুলোতে আপনার প্রোজেক্টের জন্য ক্রেডেনশিয়াল তৈরি করার পদ্ধতি ব্যাখ্যা করা হয়েছে। এরপর আপনার অ্যাপ্লিকেশনগুলো সেই ক্রেডেনশিয়াল ব্যবহার করে আপনার প্রোজেক্টের জন্য সক্রিয় করা এপিআইগুলো অ্যাক্সেস করতে পারবে।

প্রথমে গুগল এপিআই কনসোলে গিয়ে একটি নতুন প্রজেক্ট তৈরি করুন, যদি আপনার আগে থেকে কোনো প্রজেক্ট না থাকে। একটি OAuth ক্লায়েন্ট তৈরি করতে এবং একটি ক্লায়েন্ট আইডি পেতে এই নির্দেশাবলী অনুসরণ করুন।

  1. ক্লায়েন্ট পৃষ্ঠায় যান।
    1. ক্লায়েন্ট তৈরি করুন -এ ক্লিক করুন।
    2. ক্রোম এক্সটেনশন অ্যাপ্লিকেশনের ধরন নির্বাচন করুন।
    3. OAuth ক্লায়েন্টের জন্য একটি নাম লিখুন। ক্লায়েন্টকে শনাক্ত করার জন্য এই নামটি আপনার প্রোজেক্টের ক্লায়েন্টস পেজে প্রদর্শিত হয়।
    4. আইটেম আইডি ফিল্ডে এক্সটেনশন আইডিটি প্রবেশ করান।
    5. তৈরি করুন- এ ক্লিক করুন।

ম্যানিফেস্টে OAuth নিবন্ধন করুন

এক্সটেনশন ম্যানিফেস্টে "oauth2" ফিল্ডটি অন্তর্ভুক্ত করুন। তৈরি হওয়া OAuth ক্লায়েন্ট আইডিটি "client_id" এর অধীনে রাখুন। ব্যবহারকারীর অ্যাকাউন্টের তথ্য অ্যাক্সেস করার জন্য, আমাদের প্রাসঙ্গিক "scope" , "https://www.googleapis.com/auth/userinfo.email" অনুরোধ করতে হবে।

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":["https://www.googleapis.com/auth/userinfo.email"]
  },
  ...
}

প্রথম OAuth ফ্লো শুরু করুন

ম্যানিফেস্টে identity অনুমতিটি নিবন্ধন করুন।

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

OAuth ফ্লো পরিচালনা করার জন্য oauth.js নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন।

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  });
};

index.html এর head-এ oauth.js এর জন্য একটি স্ক্রিপ্ট ট্যাগ রাখুন।

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

এক্সটেনশনটি রিলোড করুন এবং index.html খোলার জন্য ব্রাউজার আইকনে ক্লিক করুন। কনসোলটি খুলুন এবং "FriendBlock Contacts" বোতামে ক্লিক করুন। কনসোলে একটি OAuth টোকেন দেখা যাবে।

কনসোলে টোকেনটি দেখুন

গুগল পিপল এপিআই সক্রিয় করুন

Google API কনসোলে ফিরে যান এবং সাইডবার থেকে লাইব্রেরি নির্বাচন করুন। "Google People API" লিখে অনুসন্ধান করুন, সঠিক ফলাফলে ক্লিক করুন এবং এটি সক্রিয় করুন।

পিপল এপিআই সক্রিয় করুন

এক্সটেনশন ম্যানিফেস্টের "scopes" -এ গুগল পিপল এপিআই ক্লায়েন্ট লাইব্রেরিটি যোগ করুন।

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/contacts.readonly"
    ]
  },
  ...
}

Google API কনসোলে ফিরে যান এবং ক্রেডেনশিয়ালস-এ নেভিগেট করুন। 'Create credentials'-এ ক্লিক করুন এবং ড্রপডাউন থেকে 'API key' নির্বাচন করুন।

পিপল এপিআই ক্রেডেনশিয়াল তৈরি করুন

পরবর্তী ব্যবহারের জন্য তৈরি করা এপিআই কী-টি সংরক্ষণ করুন।

প্রথম এপিআই অনুরোধ তৈরি করুন

এখন যেহেতু এক্সটেনশনটির যথাযথ অনুমতি ও ক্রেডেনশিয়াল রয়েছে এবং এটি একজন গুগল ব্যবহারকারীকে অনুমোদন দিতে পারে, তাই এটি পিপল এপিআই (People API)-এর মাধ্যমে ডেটার জন্য অনুরোধ করতে পারবে। নিচের সাথে মিলিয়ে oauth.js এর কোডটি আপডেট করুন। 

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data)
          });
    });
  });
};

Google API কনসোল থেকে তৈরি করা API কী দিয়ে API_KEY প্রতিস্থাপন করুন। এক্সটেনশনটি একটি JSON অবজেক্ট লগ করবে, যার মধ্যে memberResourceNames ফিল্ডের অধীনে people/account_id -গুলির একটি অ্যারে থাকবে।

ব্লক মুখ

এখন যেহেতু এক্সটেনশনটি ব্যবহারকারীর পরিচিতিগুলির একটি তালিকা ফেরত দিচ্ছে, এটি সেই পরিচিতিগুলির প্রোফাইল এবং তথ্য পুনরুদ্ধার করার জন্য অতিরিক্ত অনুরোধ করতে পারে। এক্সটেনশনটি ব্যবহারকারীর পরিচিতিগুলির ছবির তথ্য পুনরুদ্ধার করতে memberResourceNames ব্যবহার করবে। নিম্নলিখিত কোডটি অন্তর্ভুক্ত করতে oauth.js আপডেট করুন। 

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
          init)
          .then((response) => response.json())
          .then(function(data) {
            let photoDiv = document.querySelector('#friendDiv');
            let returnedContacts = data.memberResourceNames;
            for (let i = 0; i < returnedContacts.length; i++) {
              fetch(
                  'https://people.googleapis.com/v1/' + returnedContacts[i] +
                      '?personFields=photos&key=API_KEY',
                  init)
                  .then((response) => response.json())
                  .then(function(data) {
                    let profileImg = document.createElement('img');
                    profileImg.src = data.photos[0].url;
                    photoDiv.appendChild(profileImg);
                  });
            };
          });
    });
  });
};

রিলোড করে এক্সটেনশনটিতে ফিরে যান। ফ্রেন্ডব্লক বাটনটিতে ক্লিক করুন এবং ব্যস! একটি ব্লকে আপনার কন্ট্যাক্টের মুখগুলো উপভোগ করুন।

একটি ব্লকে সংস্পর্শের মুখগুলি।