टोकन मॉडल का इस्तेमाल करना

google.accounts.oauth2 JavaScript लाइब्रेरी की मदद से, उपयोगकर्ता से सहमति लेने के लिए प्रॉम्प्ट किया जा सकता है. साथ ही, उपयोगकर्ता के डेटा के साथ काम करने के लिए ऐक्सेस टोकन पाया जा सकता है. यह OAuth 2.0 इम्प्लिसिट ग्रांट फ़्लो पर आधारित है. इसे इस तरह से डिज़ाइन किया गया है कि आप REST और CORS का इस्तेमाल करके, Google API को सीधे तौर पर कॉल कर सकें. इसके अलावा, हमारे ज़्यादा जटिल एपीआई को आसानी से और फ़्लेक्सिबिलिटी के साथ ऐक्सेस करने के लिए, JavaScript के लिए Google APIs क्लाइंट लाइब्रेरी (इसे gapi.client भी कहा जाता है) का इस्तेमाल कर सकें.

आपकी साइट पर मौजूद उपयोगकर्ता, ब्राउज़र से सुरक्षित किए गए उपयोगकर्ता के डेटा को ऐक्सेस करने से पहले, Google के वेब आधारित खाता चुनने वाले टूल, साइन-इन करने, और सहमति लेने की प्रोसेस को ट्रिगर करते हैं. इसके बाद, Google के OAuth सर्वर आपके वेब ऐप्लिकेशन को ऐक्सेस टोकन जारी करते हैं और उसे वापस भेजते हैं.

टोकन पर आधारित अनुमति देने वाले मॉडल में, हर उपयोगकर्ता के लिए रीफ़्रेश टोकन को अपने बैकएंड सर्वर पर सेव करने की ज़रूरत नहीं होती.

हमारा सुझाव है कि आप यहां बताए गए तरीके का इस्तेमाल करें. इसके बजाय, क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0 गाइड में बताए गए तरीकों का इस्तेमाल न करें.

ज़रूरी शर्तें

OAuth के लिए सहमति देने वाली स्क्रीन को कॉन्फ़िगर करने, क्लाइंट आईडी पाने, और क्लाइंट लाइब्रेरी लोड करने के लिए, सेटअप में बताया गया तरीका अपनाएं.

टोकन क्लाइंट शुरू करना

अपने वेब ऐप्लिकेशन के क्लाइंट आईडी के साथ नया टोकन क्लाइंट शुरू करने के लिए, initTokenClient() को कॉल करें. आपको एक या उससे ज़्यादा स्कोप की सूची शामिल करनी होगी, जिन्हें उपयोगकर्ता को ऐक्सेस करना है:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

OAuth 2.0 टोकन फ़्लो ट्रिगर करना

टोकन यूज़र एक्सपीरियंस फ़्लो को ट्रिगर करने और ऐक्सेस टोकन पाने के लिए, requestAccessToken() तरीके का इस्तेमाल करें. Google, उपयोगकर्ता से ये काम करने के लिए कहता है:

  • उनका खाता चुनें,
  • अगर आपने पहले से साइन इन नहीं किया है, तो Google खाते में साइन इन करें,
  • अपने वेब ऐप्लिकेशन को, अनुरोध किए गए हर स्कोप को ऐक्सेस करने की सहमति दें.

उपयोगकर्ता के जेस्चर से टोकन फ़्लो ट्रिगर होता है: <button onclick="client.requestAccessToken();">Authorize me</button>

इसके बाद, Google आपके कॉलबैक हैंडलर को TokenResponse दिखाता है. इसमें ऐक्सेस टोकन और उन स्कोप की सूची होती है जिनके लिए उपयोगकर्ता ने ऐक्सेस दिया है. इसके अलावा, इसमें गड़बड़ी की जानकारी भी होती है.

उपयोगकर्ता, खाता चुनने वाले टूल या साइन-इन विंडो को बंद कर सकते हैं. ऐसे में, आपके कॉलबैक फ़ंक्शन को शुरू नहीं किया जाएगा.

Google की OAuth 2.0 नीतियों की पूरी तरह से समीक्षा करने के बाद ही, अपने ऐप्लिकेशन के डिज़ाइन और उपयोगकर्ता अनुभव को लागू करें. इन नीतियों में, कई स्कोप के साथ काम करने, उपयोगकर्ता की सहमति कब और कैसे मैनेज करनी है वगैरह के बारे में बताया गया है.

अनुमति देने की प्रोसेस को चरणों में पूरा करना एक नीति है. साथ ही, यह ऐप्लिकेशन डिज़ाइन करने का एक तरीका है. इसका इस्तेमाल, स्कोप का इस्तेमाल करके संसाधनों को ऐक्सेस करने का अनुरोध करने के लिए किया जाता है. ऐसा सिर्फ़ तब किया जाता है, जब इसकी ज़रूरत हो. ऐसा पहले से और एक साथ नहीं किया जाता. उपयोगकर्ता, आपके ऐप्लिकेशन के अनुरोध किए गए अलग-अलग संसाधनों को शेयर करने की अनुमति दे सकते हैं या नहीं भी दे सकते हैं. इसे ग्रैनुलर अनुमतियां कहा जाता है.

इस प्रोसेस के दौरान, Google उपयोगकर्ता से सहमति मांगता है. साथ ही, अनुरोध किए गए हर स्कोप की अलग-अलग सूची बनाता है. उपयोगकर्ता उन संसाधनों को चुनते हैं जिन्हें आपके ऐप्लिकेशन के साथ शेयर करना है. इसके बाद, Google आपके कॉलबैक फ़ंक्शन को शुरू करता है, ताकि ऐक्सेस टोकन और उपयोगकर्ता से मंज़ूरी पाए गए स्कोप वापस किए जा सकें. इसके बाद, आपका ऐप्लिकेशन अनुमति के अलग-अलग विकल्पों के साथ सुरक्षित तरीके से काम करता है.

हालांकि, इसके कुछ अपवाद हैं. Google Workspace Enterprise के ऐसे ऐप्लिकेशन जिनमें डोमेन-वाइड डेलिगेशन ऑफ़ अथॉरिटी की सुविधा होती है या जिन्हें भरोसेमंद के तौर पर मार्क किया गया है वे अनुमतियों के लिए सहमति लेने वाली स्क्रीन को बायपास कर देते हैं. इन ऐप्लिकेशन के लिए, उपयोगकर्ताओं को अनुमति देने के लिए ज़्यादा जानकारी वाली स्क्रीन नहीं दिखेगी. इसके बजाय, आपके ऐप्लिकेशन को अनुरोध किए गए सभी स्कोप मिलेंगे या कोई भी नहीं मिलेगा.

ज़्यादा जानकारी के लिए, ज़्यादा कंट्रोल वाली अनुमतियों को मैनेज करने का तरीका लेख पढ़ें.

इंक्रीमेंटल ऑथराइज़ेशन

वेब ऐप्लिकेशन के लिए, यहां दिए गए दो मुख्य उदाहरणों में, इन तरीकों का इस्तेमाल करके, धीरे-धीरे अनुमति देने की सुविधा के बारे में बताया गया है:

  • एक पेज वाला ऐजेक्स ऐप्लिकेशन, जो अक्सर XMLHttpRequest का इस्तेमाल करता है. इसमें संसाधनों को डाइनैमिक तरीके से ऐक्सेस किया जाता है.
  • कई वेब-पेज, रिसॉर्स अलग-अलग होते हैं और हर पेज के हिसाब से मैनेज किए जाते हैं.

इन दो उदाहरणों को, डिज़ाइन से जुड़ी बातों और तरीकों के बारे में बताने के लिए पेश किया गया है. हालांकि, इनका मकसद यह नहीं है कि आपको यह बताया जाए कि अपने ऐप्लिकेशन में सहमति लेने की सुविधा कैसे बनाई जाए. असल दुनिया में इस्तेमाल होने वाले ऐप्लिकेशन, इन तकनीकों के अलग-अलग वर्शन या इनके कॉम्बिनेशन का इस्तेमाल कर सकते हैं.

Ajax

अपने ऐप्लिकेशन में इंक्रीमेंटल ऑथराइज़ेशन की सुविधा जोड़ें. इसके लिए, requestAccessToken() को कई बार कॉल करें. साथ ही, OverridableTokenClientConfig ऑब्जेक्ट के scope पैरामीटर का इस्तेमाल करके, ज़रूरत के समय और सिर्फ़ ज़रूरी होने पर अलग-अलग स्कोप का अनुरोध करें. इस उदाहरण में, संसाधनों का अनुरोध तब किया जाएगा और वे तब दिखेंगे, जब उपयोगकर्ता के जेस्चर से कॉन्टेंट सेक्शन को बड़ा किया जाएगा.

Ajax ऐप्लिकेशन
पेज लोड होने पर, टोकन क्लाइंट को शुरू करें: 
        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
उपयोगकर्ता के जेस्चर के ज़रिए सहमति का अनुरोध करें और ऐक्सेस टोकन पाएं, इसे खोलने के लिए `+` पर क्लिक करें:

पढ़ने के लिए दस्तावेज़

हाल के दस्तावेज़ दिखाओ

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );

आने वाले इवेंट

कैलेंडर की जानकारी दिखाओ

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );

फ़ोटो दिखाना

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
             })
           );

requestAccessToken को हर बार कॉल करने पर, उपयोगकर्ता की सहमति लेने का अनुरोध ट्रिगर होता है. आपका ऐप्लिकेशन सिर्फ़ उन संसाधनों को ऐक्सेस कर पाएगा जिनकी ज़रूरत उपयोगकर्ता के चुने गए सेक्शन को होती है. इस तरह, उपयोगकर्ता की पसंद के हिसाब से संसाधन शेयर करने की सुविधा सीमित हो जाती है.

कई वेब पेज

इंक्रीमेंटल ऑथराइज़ेशन के लिए डिज़ाइन करते समय, कई पेजों का इस्तेमाल किया जाता है. इससे किसी पेज को लोड करने के लिए सिर्फ़ ज़रूरी स्कोप के लिए अनुरोध किया जा सकता है. इससे जटिलता कम हो जाती है. साथ ही, उपयोगकर्ता की सहमति पाने और ऐक्सेस टोकन पाने के लिए, कई कॉल करने की ज़रूरत नहीं पड़ती.

एक से ज़्यादा पेजों वाला ऐप्लिकेशन
वेब पेज कोड
पहला पेज. Docs पढ़ने के लिए 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
दूसरा पेज. आने वाले इवेंट 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
पेज 3. फ़ोटो कैरोसेल 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();

हर पेज, ज़रूरी स्कोप का अनुरोध करता है. साथ ही, लोड होने के समय initTokenClient() और requestAccessToken() को कॉल करके ऐक्सेस टोकन पाता है. इस स्थिति में, स्कोप के हिसाब से उपयोगकर्ता की सुविधाओं और संसाधनों को अलग-अलग करने के लिए, अलग-अलग वेब पेजों का इस्तेमाल किया जाता है. असल दुनिया में, अलग-अलग पेज एक से ज़्यादा मिलते-जुलते स्कोप का अनुरोध कर सकते हैं.

अनुमति को कंट्रोल करने की बेहतर सुविधा

सभी स्थितियों में, अनुमति देने के लिए ज़्यादा कंट्रोल वाली सेटिंग को एक ही तरीके से मैनेज किया जाता है. requestAccessToken() आपके कॉलबैक फ़ंक्शन को शुरू करता है और ऐक्सेस टोकन वापस करता है. इसके बाद, यह देखें कि उपयोगकर्ता ने hasGrantedAllScopes() या hasGrantedAnyScope() का इस्तेमाल करके, अनुरोध किए गए स्कोप को मंज़ूरी दी है या नहीं. उदाहरण के लिए:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly \
          https://www.googleapis.com/auth/documents.readonly \
          https://www.googleapis.com/auth/photoslibrary.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
          'https://www.googleapis.com/auth/photoslibrary.readonly')) {
        // Look at pictures
        ...
      }
      if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
          'https://www.googleapis.com/auth/calendar.readonly',
          'https://www.googleapis.com/auth/documents.readonly')) {
        // Meeting planning and review documents
        ...
      }
    }
  },
});

पिछले सेशन या अनुरोधों से स्वीकार किए गए सभी अनुदानों को भी जवाब में शामिल किया जाएगा. उपयोगकर्ता की सहमति का रिकॉर्ड, हर उपयोगकर्ता और क्लाइंट आईडी के हिसाब से सेव किया जाता है. यह initTokenClient() या requestAccessToken() को किए गए कई कॉल में बना रहता है. डिफ़ॉल्ट रूप से, उपयोगकर्ता की सहमति सिर्फ़ तब ज़रूरी होती है, जब वह पहली बार आपकी वेबसाइट पर आता है और नए स्कोप का अनुरोध करता है. हालांकि, Token Client config ऑब्जेक्ट में prompt=consent का इस्तेमाल करके, हर पेज लोड पर सहमति का अनुरोध किया जा सकता है.

टोकन के साथ काम करना

टोकन मॉडल में, ओएस या ब्राउज़र ऐक्सेस टोकन को सेव नहीं करता है. इसके बजाय, पेज लोड होने के समय पहले एक नया टोकन मिलता है. इसके बाद, उपयोगकर्ता के जेस्चर (जैसे, बटन दबाना) के ज़रिए requestAccessToken() को कॉल करके टोकन मिलता है.

Google API के साथ REST और CORS का इस्तेमाल करना

ऐक्सेस टोकन का इस्तेमाल, Google API को पुष्टि किए गए अनुरोध भेजने के लिए किया जा सकता है. इसके लिए, REST और सीओआरएस का इस्तेमाल किया जाता है. इससे उपयोगकर्ताओं को साइन-इन करने और सहमति देने की सुविधा मिलती है. साथ ही, Google को ऐक्सेस टोकन जारी करने और आपकी साइट को उपयोगकर्ता के डेटा के साथ काम करने की सुविधा मिलती है.

इस उदाहरण में, साइन इन किए हुए उपयोगकर्ताओं के आने वाले कैलेंडर इवेंट देखें. इसके लिए, tokenRequest() से मिले ऐक्सेस टोकन का इस्तेमाल करें:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();

Google API में, सीओआरएस की सुविधा डिफ़ॉल्ट रूप से काम करती है. इसमें XMLHttpRequest या fetch अनुरोध में ऐक्सेस टोकन शामिल करने पर, सीओआरएस प्रीफ़्लाइट जांच शुरू हो जाती है. साथ ही, GET या POST से पहले OPTIONS अनुरोध किया जाता है.

अगले सेक्शन में, ज़्यादा मुश्किल एपीआई के साथ आसानी से इंटिग्रेट करने का तरीका बताया गया है.

Google APIs JavaScript लाइब्रेरी का इस्तेमाल करना

टोकन क्लाइंट, JavaScript के लिए Google API क्लाइंट लाइब्रेरी के साथ काम करता है. यहां दिया गया कोड स्निपेट देखें.

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      gapi.client.setApiKey('YOUR_API_KEY');
      gapi.client.load('calendar', 'v3', listUpcomingEvents);
    }
  },
});

function listUpcomingEvents() {
  gapi.client.calendar.events.list(...);
}

टोकन के खत्म होने की अवधि

ऐक्सेस टोकन की अवधि कम होती है. अगर उपयोगकर्ता के सेशन के खत्म होने से पहले ही ऐक्सेस टोकन की समयसीमा खत्म हो जाती है, तो बटन दबाने जैसे उपयोगकर्ता के इवेंट से requestAccessToken() को कॉल करके नया टोकन पाएं.

उपयोगकर्ता की सहमति और आपके ऐप्लिकेशन को दी गई सभी अनुमतियों के लिए संसाधनों का ऐक्सेस हटाने के लिए, google.accounts.oauth2.revoke तरीके का इस्तेमाल करें. इस अनुमति को रद्द करने के लिए, मान्य ऐक्सेस टोकन ज़रूरी है:

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });