OAuth2, अनुमति देने के लिए इंडस्ट्री-स्टैंडर्ड प्रोटोकॉल है. यह उपयोगकर्ताओं को उपयोगकर्ता नाम, पासवर्ड, और दूसरे निजी क्रेडेंशियल शेयर किए बिना, वेब और डेस्कटॉप ऐप्लिकेशन को निजी जानकारी ऐक्सेस करने की सुविधा देता है.
यह ट्यूटोरियल एक ऐसा एक्सटेंशन बनाता है जो Google People API और Chrome Identity API का इस्तेमाल करके, उपयोगकर्ता के Google संपर्क ऐक्सेस करता है. एक्सटेंशन एचटीटीपीएस पर लोड नहीं होते, रीडायरेक्ट नहीं कर सकते या कुकी सेट नहीं कर सकते. इसलिए, OAuth2 का इस्तेमाल करने के लिए वे Chrome Identity 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>
<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 डेवलपर डैशबोर्ड पर अपलोड करें:
- डेवलपर डैशबोर्ड पर, नया आइटम जोड़ें पर क्लिक करें.
- फ़ाइलें ब्राउज़ करें पर क्लिक करें. इसके बाद, एक्सटेंशन की zip फ़ाइल चुनें और उसे अपलोड करें.
- पैकेज टैब पर जाएं और सार्वजनिक कुंजी देखें पर क्लिक करें.
पॉप-अप खुलने पर, यह तरीका अपनाएं:
- कोड को
-----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 एक्सटेंशन चुनें. एक्सटेंशन का नाम भरें और एक्सटेंशन आईडी को यूआरएल के आखिर में ऐप्लिकेशन आईडी फ़ील्ड में डालें.
'बनाएं' पर क्लिक करके प्रक्रिया पूरी करें. कंसोल एक 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 खोलने के लिए ब्राउज़र आइकॉन पर क्लिक करें. कंसोल खोलें और "FreeendBlock Contacts" बटन पर क्लिक करें. कंसोल में एक 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 कंसोल पर वापस जाएं और क्रेडेंशियल पर वापस नेविगेट करें. "क्रेडेंशियल बनाएं" पर क्लिक करें और ड्रॉपडाउन मेन्यू से "एपीआई पासकोड" को चुनें.
जनरेट की गई एपीआई पासकोड को बाद में इस्तेमाल करने के लिए, अपने पास रखें.
पहला एपीआई अनुरोध तैयार करें
अब एक्सटेंशन के पास सही अनुमतियां और क्रेडेंशियल हैं और यह 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)
});
});
});
};
API_KEY को Google API कंसोल से जनरेट की गई एपीआई पासकोड से बदलें. एक्सटेंशन को एक JSON ऑब्जेक्ट लॉग करना चाहिए, जिसमें memberResourceNames फ़ील्ड के तहत people/account_ids का कलेक्शन शामिल हो.
चेहरों को ब्लॉक करें
अब एक्सटेंशन उपयोगकर्ता के संपर्कों की सूची दिखा रहा है, इसलिए यह उन संपर्कों की प्रोफ़ाइल और जानकारी वापस पाने के लिए ज़्यादा अनुरोध कर सकता है . एक्सटेंशन, उपयोगकर्ता के संपर्कों की फ़ोटो की जानकारी वापस पाने के लिए,
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);
});
};
});
});
});
};
फिर से लोड करें और एक्सटेंशन पर वापस जाएं. दोस्त ब्लॉक बटन पर क्लिक करें और अभी-अभी! ब्लॉक में संपर्क के चेहरों का आनंद लें.
