OAuth2 হল অনুমোদনের জন্য শিল্প-মানের প্রোটোকল। এটি ব্যবহারকারীদের তাদের ব্যবহারকারীর নাম, পাসওয়ার্ড এবং অন্যান্য ব্যক্তিগত শংসাপত্রগুলি ভাগ না করেই ওয়েব এবং ডেস্কটপ অ্যাপ্লিকেশনগুলিকে ব্যক্তিগত তথ্যে অ্যাক্সেস দেওয়ার জন্য একটি প্রক্রিয়া সরবরাহ করে।
এই টিউটোরিয়ালটি একটি এক্সটেনশন তৈরি করে যা Google People API এবং Chrome Identity API ব্যবহার করে একজন ব্যবহারকারীর Google পরিচিতি অ্যাক্সেস করে। যেহেতু এক্সটেনশানগুলি HTTPS-এর উপর লোড হয় না, পুনঃনির্দেশ করতে পারে না বা কুকি সেট করতে পারে না, তাই তারা OAuth2 ব্যবহার করার জন্য Chrome আইডেন্টিটি API-এর উপর নির্ভর করে৷
এবার শুরু করা যাক
একটি ডিরেক্টরি এবং নিম্নলিখিত স্টার্টার ফাইল তৈরি করে শুরু করুন।
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
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 বিকাশকারী ড্যাশবোর্ডে আপলোড করুন:
- বিকাশকারী ড্যাশবোর্ডে, নতুন আইটেম যোগ করুন ক্লিক করুন।
- ব্রাউজ ফাইলে ক্লিক করুন, এক্সটেনশনের জিপ ফাইলটি নির্বাচন করুন এবং এটি আপলোড করুন।
- প্যাকেজ ট্যাবে যান এবং পাবলিক কী দেখুন ক্লিক করুন।
পপআপ খোলা হলে, এই পদক্ষেপগুলি অনুসরণ করুন:
- এর মধ্যে কোডটি কপি করুন
-----BEGIN PUBLIC KEY-----এবং-----END PUBLIC KEY-----। - এটিকে পাঠ্যের একক লাইন করার জন্য নতুন লাইনগুলি সরান৷
"key" ক্ষেত্রের অধীনে manifest.json এ কোডটি যোগ করুন। এইভাবে এক্সটেনশন একই আইডি ব্যবহার করবে।
{ // manifest.json
"manifest_version": 3,
...
"key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}
আইডি তুলনা করুন
chrome://extensions এ এক্সটেনশন ম্যানেজমেন্ট পৃষ্ঠাটি খুলুন, বিকাশকারী মোড সক্ষম করা আছে তা নিশ্চিত করুন এবং আনপ্যাকেজ করা এক্সটেনশন ডিরেক্টরি আপলোড করুন। ডেভেলপার ড্যাশবোর্ডের আইটেম আইডির সাথে এক্সটেনশন ম্যানেজমেন্ট পৃষ্ঠার এক্সটেনশন আইডির তুলনা করুন। তাদের মেলা উচিত।
একটি OAuth ক্লায়েন্ট আইডি তৈরি করুন
Google API কনসোলে নেভিগেট করুন এবং একটি নতুন প্রকল্প তৈরি করুন৷ প্রস্তুত হয়ে গেলে, সাইডবারে শংসাপত্র নির্বাচন করুন, শংসাপত্র তৈরি করুন ক্লিক করুন এবং OAuth ক্লায়েন্ট আইডি বেছে নিন।
ক্লায়েন্ট আইডি তৈরি করুন পৃষ্ঠায়, Chrome এক্সটেনশন নির্বাচন করুন। এক্সটেনশনের নামটি পূরণ করুন এবং অ্যাপ্লিকেশন আইডি ক্ষেত্রে URL-এর শেষে এক্সটেনশন আইডি রাখুন।
Create এ ক্লিক করে শেষ করুন। কনসোল একটি OAuth ক্লায়েন্ট আইডি প্রদান করবে।
ম্যানিফেস্টে OAuth নিবন্ধন করুন
এক্সটেনশন ম্যানিফেস্টে "oauth2" ক্ষেত্রটি অন্তর্ভুক্ত করুন। জেনারেট করা OAuth ক্লায়েন্ট আইডিটিকে "client_id" এর অধীনে রাখুন। আপাতত "scopes" এ একটি খালি স্ট্রিং অন্তর্ভুক্ত করুন।
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes":[""]
},
...
}
প্রথম OAuth প্রবাহ শুরু করুন
ম্যানিফেস্টে identity অনুমতি নিবন্ধন করুন।
{
"name": "OAuth Tutorial FriendBlock",
...
"permissions": [
"identity"
],
...
}
oauth.js নামে OAuth ফ্লো পরিচালনা করার জন্য একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন।
window.onload = function() {
document.querySelector('button').addEventListener('click', function() {
chrome.identity.getAuthToken({interactive: true}, function(token) {
console.log(token);
});
});
};
index.html এর মাথায় oauth.js এর জন্য একটি স্ক্রিপ্ট ট্যাগ রাখুন।
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
এক্সটেনশনটি পুনরায় লোড করুন এবং index.html খুলতে ব্রাউজার আইকনে ক্লিক করুন। কনসোল খুলুন এবং "FriendBlock পরিচিতি" বোতামে ক্লিক করুন। একটি OAuth টোকেন কনসোলে উপস্থিত হবে৷
Google People API সক্ষম করুন
Google API কনসোলে ফিরে যান এবং সাইডবার থেকে লাইব্রেরি নির্বাচন করুন। "Google People API" অনুসন্ধান করুন, সঠিক ফলাফলে ক্লিক করুন এবং এটি সক্ষম করুন।
এক্সটেনশন ম্যানিফেস্টে "scopes" -এ Google People API ক্লায়েন্ট লাইব্রেরি যোগ করুন।
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
Google API কনসোলে ফিরে যান এবং শংসাপত্রগুলিতে ফিরে যান। "প্রমাণপত্র তৈরি করুন" ক্লিক করুন এবং ড্রপডাউন থেকে "API কী" নির্বাচন করুন৷
পরবর্তী ব্যবহারের জন্য জেনারেট করা API কী রাখুন।
প্রথম API অনুরোধ তৈরি করুন
এখন যেহেতু এক্সটেনশনটির যথাযথ অনুমতি, শংসাপত্র রয়েছে এবং এটি একজন Google ব্যবহারকারীকে অনুমোদন করতে পারে, এটি 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);
});
};
});
});
});
};
পুনরায় লোড করুন এবং এক্সটেনশনে ফিরে যান। FriendBlock বাটনে ক্লিক করুন এবং তা-দা! একটি ব্লকে পরিচিতির মুখগুলি উপভোগ করুন।
