OAuth2 হল অনুমোদনের জন্য শিল্প-মানক প্রোটোকল। এটি ব্যবহারকারীদের তাদের ব্যবহারকারীর নাম, পাসওয়ার্ড এবং অন্যান্য ব্যক্তিগত শংসাপত্র ভাগ না করেই ওয়েব এবং ডেস্কটপ অ্যাপ্লিকেশনগুলিকে ব্যক্তিগত তথ্যে অ্যাক্সেস দেওয়ার জন্য একটি প্রক্রিয়া প্রদান করে।
এই টিউটোরিয়ালটি এমন একটি এক্সটেনশন তৈরি করে যা Google People API এবং Chrome Identity API ব্যবহার করে ব্যবহারকারীর Google পরিচিতিগুলিতে অ্যাক্সেস করে। যেহেতু এক্সটেনশনগুলি HTTPS এর মাধ্যমে লোড হয় না, পুনঃনির্দেশনা সম্পাদন করতে পারে না বা কুকি সেট করতে পারে না, তাই তারা OAuth2 ব্যবহার করার জন্য Chrome Identity API এর উপর নির্ভর করে।
শুরু করুন
একটি ডিরেক্টরি এবং নিম্নলিখিত স্টার্টার ফাইল তৈরি করে শুরু করুন।
ম্যানিফেস্ট.জেসন
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'});
});
সূচক.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 ডেভেলপার ড্যাশবোর্ডে আপলোড করুন:
- ডেভেলপার ড্যাশবোর্ডে, নতুন আইটেম যোগ করুন এ ক্লিক করুন।
- ফাইল ব্রাউজ করুন এ ক্লিক করুন, এক্সটেনশনের জিপ ফাইলটি নির্বাচন করুন এবং এটি আপলোড করুন।
- প্যাকেজ ট্যাবে যান এবং View public key এ ক্লিক করুন।
যখন ডায়ালগটি খোলা থাকে, তখন এই পদক্ষেপগুলি অনুসরণ করুন:
-
-----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 2.0 ব্যবহার করে এমন যেকোনো অ্যাপ্লিকেশনের অনুমোদনের শংসাপত্র থাকতে হবে যা অ্যাপ্লিকেশনটিকে Google এর OAuth 2.0 সার্ভারে সনাক্ত করে। নিম্নলিখিত ধাপগুলি আপনার প্রকল্পের জন্য শংসাপত্র তৈরি করার পদ্ধতি ব্যাখ্যা করে। আপনার অ্যাপ্লিকেশনগুলি তখন সেই প্রকল্পের জন্য আপনার দ্বারা সক্ষম করা API গুলি অ্যাক্সেস করার জন্য শংসাপত্রগুলি ব্যবহার করতে পারে।
যদি আপনার কাছে ইতিমধ্যেই একটি নতুন প্রকল্প না থাকে, তাহলে Google API কনসোলে নেভিগেট করে একটি নতুন প্রকল্প তৈরি করুন। একটি OAuth ক্লায়েন্ট তৈরি করতে এবং একটি ক্লায়েন্ট আইডি পেতে এই নির্দেশাবলী অনুসরণ করুন।
- Go to the Clients page.
- ক্লায়েন্ট তৈরি করুন ক্লিক করুন।
- Chrome এক্সটেনশন অ্যাপ্লিকেশনের ধরণ নির্বাচন করুন।
- OAuth ক্লায়েন্টের জন্য একটি নাম লিখুন। ক্লায়েন্টকে সনাক্ত করার জন্য এই নামটি আপনার প্রকল্পের ক্লায়েন্ট পৃষ্ঠায় প্রদর্শিত হবে।
- আইটেম আইডি ক্ষেত্রে এক্সটেনশন আইডি লিখুন।
- তৈরি করুন ক্লিক করুন।
ম্যানিফেস্টে 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 এর মাথায় oauth.js এর জন্য একটি স্ক্রিপ্ট ট্যাগ রাখুন।
...
<head>
<title>FriendBlock</title>
...
<script type="text/javascript" src="oauth.js"></script>
</head>
...
এক্সটেনশনটি পুনরায় লোড করুন এবং index.html খুলতে ব্রাউজার আইকনে ক্লিক করুন। কনসোলটি খুলুন এবং "FriendBlock Contacts" বোতামে ক্লিক করুন। কনসোলে একটি OAuth টোকেন প্রদর্শিত হবে।
গুগল পিপল এপিআই সক্ষম করুন
গুগল এপিআই কনসোলে ফিরে যান এবং সাইডবার থেকে লাইব্রেরি নির্বাচন করুন। "গুগল পিপল এপিআই" অনুসন্ধান করুন, সঠিক ফলাফলে ক্লিক করুন এবং এটি সক্রিয় করুন।
এক্সটেনশন ম্যানিফেস্টে "scopes" -এ Google People API ক্লায়েন্ট লাইব্রেরি যোগ করুন।
{
"name": "OAuth Tutorial FriendBlock",
...
"oauth2": {
"client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/contacts.readonly"
]
},
...
}
গুগল এপিআই কনসোলে ফিরে যান এবং শংসাপত্রগুলিতে ফিরে যান। "শংসাপত্র তৈরি করুন" এ ক্লিক করুন এবং ড্রপডাউন থেকে "এপিআই কী" নির্বাচন করুন।
পরবর্তীতে ব্যবহারের জন্য তৈরি 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 বোতামে ক্লিক করুন এবং ta-da! একটি ব্লকে পরিচিতির মুখ উপভোগ করুন।
