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

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

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

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

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

ध्यान दें: सुरक्षा से जुड़ी समस्याओं की वजह से, सिर्फ़ पॉप-अप UX का इस्तेमाल किया जा सकता है.

सेटअप

अपना 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 टोकन फ़्लो को ट्रिगर करना

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

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

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

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

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

सहमति मैनेज करने का तरीका

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

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

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

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

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

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

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

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

अजेक्स

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

ध्यान दें: पहले से मंज़ूर किए गए सभी स्कोप, TokenResponse से दिखाए जाते हैं और myaccount.google.com/permissions पर उपयोगकर्ताओं को दिखते हैं. ऐसा इसलिए किया जाता है, ताकि आपके ऐप्लिकेशन से स्कोप हटाए जा सकें और इन सोर्स को अपडेट किया जा सके. google.accounts.oauth2.revoke() और prompt=consent का इस्तेमाल करके शुरू किया जा सके.

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

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

Google API के साथ REST और सीओआरएस का इस्तेमाल करना

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

इस उदाहरण में, 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 ऐक्सेस करने के लिए सीओआरएस का इस्तेमाल करने का तरीका देखें.

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

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