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": 2,
"browser_action": {
"default_title": "FriendBlock, friends face's in a block."
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
}
}
background.js
background.js নামে একটি ফাইল তৈরি করে ব্যাকগ্রাউন্ড স্ক্রিপ্ট যোগ করুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন। অথবা ফাইলটি এখানে ডাউনলোড করুন।
chrome.browserAction.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 বিকাশকারী ড্যাশবোর্ডে আপলোড করুন:
- বিকাশকারী ড্যাশবোর্ডে, নতুন আইটেম যোগ করুন ক্লিক করুন।
- Choose file এ ক্লিক করুন এবং
.zipএক্সটেনশন ডিরেক্টরি নির্বাচন করুন এবং আপলোড করুন। - অতিরিক্ত ক্ষেত্রগুলি পূরণ না করে, খসড়া সংরক্ষণ করুন নির্বাচন করুন এবং ড্যাশবোর্ডে ফিরে যান ।
আপনার তালিকার অধীনে এক্সটেনশনটি খুঁজুন এবং আরও তথ্যে ক্লিক করুন। পপআপ থেকে, সর্বজনীন কীটি অনুলিপি করুন এবং "key" ক্ষেত্রের অধীনে আনজিপ করা ডিরেক্টরির ভিতরে ম্যানিফেস্টে যোগ করুন।
{
"name": "OAuth Tutorial FaceBlcok",
...
"key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}
আইডি তুলনা করুন
chrome://extensions এ এক্সটেনশন ম্যানেজমেন্ট পৃষ্ঠা খুলুন, ডেভেলপার মোড চালু আছে তা নিশ্চিত করুন এবং আনপ্যাকেজ করা এক্সটেনশন ডিরেক্টরি আপলোড করুন। ডেভেলপার ড্যাশবোর্ডের আইটেম আইডির সাথে এক্সটেনশন ম্যানেজমেন্ট পৃষ্ঠার এক্সটেনশন আইডির তুলনা করুন। তাদের মেলা উচিত।
এক্সটেনশনটি ম্যানিফেস্টে "key" ক্ষেত্রটি অন্তর্ভুক্ত করে একই ID বজায় রাখবে৷ API নিবন্ধনের জন্য একটি একক আইডি সংরক্ষণ করা অপরিহার্য।
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 FaceBlcok",
...
"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 FaceBlcok",
...
"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 বাটনে ক্লিক করুন এবং তা-দা! একটি ব্লকে পরিচিতির মুখগুলি উপভোগ করুন।
