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

OAuth2, अनुमति देने के लिए इंडस्ट्री स्टैंडर्ड प्रोटोकॉल है. यह उपयोगकर्ताओं को ऐसे तरीके अपनाता है वेब और डेस्कटॉप ऐप्लिकेशन को उनका उपयोगकर्ता नाम शेयर किए बिना निजी जानकारी का ऐक्सेस देने के लिए, पासवर्ड, और अन्य निजी क्रेडेंशियल.

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

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

'बनाएं' पर क्लिक करके प्रोसेस पूरी करें. कंसोल एक 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 फ़्लो को मैनेज करने के लिए, 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 को खोलने के लिए, ब्राउज़र आइकॉन पर क्लिक करें. कंसोल खोलें और "FreeendBlock Contacts" पर क्लिक करें बटन. कंसोल में एक OAuth टोकन दिखेगा.

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

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

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

People API को चालू करें

एक्सटेंशन मेनिफ़ेस्ट में, Google People API क्लाइंट लाइब्रेरी को "scopes" में जोड़ें.

{
  "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 ऑब्जेक्ट लॉग करना चाहिए जिसमें people/account_ids की श्रेणी शामिल हो memberResourceNames फ़ील्ड.

चेहरे ब्लॉक करें

अब एक्सटेंशन, उपयोगकर्ता के संपर्कों की सूची दिखा रहा है, इसलिए यह अन्य अनुरोध भी कर सकता है उन लोगों की प्रोफ़ाइल और जानकारी को वापस पाने के लिए . एक्सटेंशन उपयोगकर्ता की संपर्क सूची में शामिल लोगों की फ़ोटो की जानकारी वापस पाने के लिए, 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);
                  });
            };
          });
    });
  });
};

फिर से लोड करें और एक्सटेंशन पर वापस जाएं. FriendsBlock बटन और फिर ta-da पर क्लिक करें! इसमें संपर्क के चेहरों का आनंद लें एक ब्लॉक.

किसी ब्लॉक में संपर्कों से जुड़े चेहरे