OAuth 2.0: Google से उपयोगकर्ताओं की पुष्टि करना

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 डेवलपर डैशबोर्ड पर अपलोड करें:

  1. डेवलपर डैशबोर्ड पर, नया आइटम जोड़ें पर क्लिक करें.
  2. फ़ाइलें ब्राउज़ करें पर क्लिक करें. इसके बाद, एक्सटेंशन की zip फ़ाइल चुनें और उसे अपलोड करें.
  3. पैकेज टैब पर जाएं और सार्वजनिक पासकोड देखें पर क्लिक करें.
पैकेज टैब में सार्वजनिक पासकोड बटन देखना
पैकेज टैब में सार्वजनिक कुंजी देखने का बटन

डायलॉग खुलने पर, यह तरीका अपनाएं:

  1. -----BEGIN PUBLIC KEY----- और -----END PUBLIC KEY----- के बीच मौजूद कोड कॉपी करें.
  2. टेक्स्ट को एक लाइन में करने के लिए, नई लाइन हटाएं.
सार्वजनिक पासकोड की डायलॉग विंडो
सार्वजनिक कुंजी वाली डायलॉग विंडो

"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 एक्सटेंशन चुनें. एक्सटेंशन का नाम डालें और ऐप्लिकेशन आईडी फ़ील्ड में यूआरएल के आखिर में, एक्सटेंशन आईडी डालें.

एक्सटेंशन की जानकारी भरना

'बनाएं' पर क्लिक करके प्रोसेस पूरी करें. Console, 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 Contacts" बटन पर क्लिक करें. कंसोल में एक OAuth टोकन दिखेगा.

कंसोल में टोकन देखना

Google People API को चालू करना

Google API कंसोल पर वापस जाएं और साइडबार से लाइब्रेरी चुनें. "Google People API" खोजें. इसके बाद, सही नतीजे पर क्लिक करके उसे चालू करें.

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 कंसोल पर वापस जाएं और क्रेडेंशियल पर वापस जाएं. "क्रेडेंशियल बनाएं" पर क्लिक करें और ड्रॉपडाउन से "एपीआई पासकोड" चुनें.

People 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);
                  });
            };
          });
    });
  });
};

पेज को फिर से लोड करके, एक्सटेंशन पर वापस जाएं. FriendBlock बटन पर क्लिक करें और फिर देखें! ब्लॉक में मौजूद संपर्क के चेहरों को देखें.

ब्लॉक में मौजूद संपर्कों की जानकारी