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. Developer Dashboard पर, नया आइटम जोड़ें पर क्लिक करें.
  2. फ़ाइलें ब्राउज़ करें पर क्लिक करें. इसके बाद, एक्सटेंशन की ज़िप फ़ाइल चुनें और उसे अपलोड करें.
  3. पैकेज टैब पर जाएं और सार्वजनिक पासकोड देखें पर क्लिक करें.
पैकेज टैब में &#39;सार्वजनिक पासकोड देखें&#39; बटन
पैकेज टैब में सार्वजनिक कुंजी देखें बटन

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

  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 APIs को ऐक्सेस करने के लिए OAuth 2.0 का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन के पास अनुमति देने वाले क्रेडेंशियल होने चाहिए. इनसे Google के OAuth 2.0 सर्वर को ऐप्लिकेशन की पहचान करने में मदद मिलती है. यहां दिए गए तरीके से, अपने प्रोजेक्ट के लिए क्रेडेंशियल बनाए जा सकते हैं. इसके बाद, आपके ऐप्लिकेशन इन क्रेडेंशियल का इस्तेमाल करके, उन एपीआई को ऐक्सेस कर सकते हैं जिन्हें आपने उस प्रोजेक्ट के लिए चालू किया है.

अगर आपके पास पहले से कोई प्रोजेक्ट नहीं है, तो नया प्रोजेक्ट बनाने के लिए Google API कंसोल पर जाएं. OAuth क्लाइंट बनाने और क्लाइंट आईडी पाने के लिए, इन निर्देशों का पालन करें.

  1. Go to the Clients page.
    1. क्लाइंट बनाएं पर क्लिक करें.
    2. Chrome एक्सटेंशन ऐप्लिकेशन टाइप चुनें.
    3. OAuth क्लाइंट के लिए कोई नाम डालें. यह नाम आपके प्रोजेक्ट के क्लाइंट पेज पर दिखता है, ताकि क्लाइंट की पहचान की जा सके.
    4. एक्सटेंशन आईडी को आइटम आईडी फ़ील्ड में डालें.
    5. बनाएं पर क्लिक करें.

मेनिफ़ेस्ट में 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);
    });
  });
};

oauth.js के लिए स्क्रिप्ट टैग को index.html के हेड में जोड़ें.

...
  <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_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 बटन पर क्लिक करें और बस! संपर्क के चेहरों को एक ब्लॉक में देखें.

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