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

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

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

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

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

सेटअप

अपना Google API क्लाइंट आईडी पाएं गाइड में बताए गए तरीके का पालन करके, क्लाइंट आईडी ढूंढें या बनाएं. इसके बाद, अपनी साइट के उन पेजों पर क्लाइंट लाइब्रेरी जोड़ें जिन पर Google API को कॉल किया जाएगा. आखिर में, टोकन क्लाइंट को शुरू करें. आम तौर पर, यह क्लाइंट लाइब्रेरी के onload हैंडलर में किया जाता है.

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

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

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

इंक्रीमेंटल अनुमति

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

  • एक पेज वाला Ajax ऐप्लिकेशन, जो अक्सर संसाधनों के डाइनैमिक ऐक्सेस के साथ 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 को हर बार कॉल करने पर, उपयोगकर्ता की सहमति लेने की प्रोसेस शुरू होती है. आपके ऐप्लिकेशन के पास सिर्फ़ उन संसाधनों का ऐक्सेस होगा जो उस सेक्शन के लिए ज़रूरी हैं जिसे उपयोगकर्ता ने बड़ा करने का विकल्प चुना है. इस तरह, उपयोगकर्ता की पसंद के हिसाब से संसाधन शेयर किए जाते हैं.

एक से ज़्यादा वेब पेज

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

कई पेजों वाला ऐप्लिकेशन
वेब पेज कोड
पेज 1. पढ़ने के लिए दस्तावेज़ 
  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();
तीसरा पेज. फ़ोटो कैरसेल 
  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() को किए जाने वाले कई कॉल में भी बना रहता है. डिफ़ॉल्ट रूप से, उपयोगकर्ता की सहमति सिर्फ़ तब ज़रूरी होती है, जब वह पहली बार आपकी वेबसाइट पर आता है और नए स्कोप का अनुरोध करता है. हालांकि, टोकन क्लाइंट कॉन्फ़िगरेशन ऑब्जेक्ट में prompt=consent का इस्तेमाल करके, हर पेज लोड होने पर अनुरोध किया जा सकता है.

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

टोकन मॉडल में, ऐक्सेस टोकन को OS या ब्राउज़र सेव नहीं करता. इसके बजाय, पेज लोड होने के समय एक नया टोकन मिलता है. इसके बाद, बटन दबाने जैसे उपयोगकर्ता के जेस्चर की मदद से 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 को ऐक्सेस करने के लिए, CORS का इस्तेमाल कैसे करें लेख पढ़ें.

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

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