OAuth2: 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": 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>
  <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. दूसरे फ़ील्ड भरे बिना, ड्राफ़्ट सेव करें और डैशबोर्ड पर वापस जाएं को चुनें.

आपकी लिस्टिंग में जाकर, एक्सटेंशन ढूंढें और ज़्यादा जानकारी पर क्लिक करें. पॉप-अप से, सार्वजनिक पासकोड को सेव कर सकता है और उसे "key" फ़ील्ड में अनज़िप की गई डायरेक्ट्री के मेनिफ़ेस्ट में जोड़ सकता है.

{
  "name": "OAuth Tutorial FaceBlcok",
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}

आईडी की तुलना करें

chrome://extensions पर एक्सटेंशन मैनेजमेंट पेज खोलें. साथ ही, पक्का करें कि डेवलपर मोड चालू हो और पैकेज न की गई एक्सटेंशन डायरेक्ट्री को अपलोड करें. एक्सटेंशन मैनेजमेंट में एक्सटेंशन आईडी की तुलना करना पेज पर मौजूद आइटम आईडी पर क्लिक करें. उन्हें मेल खाना चाहिए.

एक्सटेंशन का आईडी सभी जगहों से मेल खाता है

एक्सटेंशन, मेनिफ़ेस्ट में "key" फ़ील्ड को शामिल करके, वही आईडी बनाए रखेगा. संरक्षित API रजिस्ट्रेशन के लिए सिंगल आईडी ज़रूरी है.

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

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

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

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

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

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

{
  "name": "OAuth Tutorial FaceBlcok",
  ...
  "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 पर क्लिक करें! इसमें संपर्क के चेहरों का आनंद लें एक ब्लॉक.

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