चेतावनी: यह डेटा Google उपयोगकर्ता डेटा नीति के तहत दिया जाता है. कृपया समीक्षा करें और नीति का पालन करें. ऐसा न करने पर, प्रोजेक्ट या खाता निलंबित हो सकता है.

टोकन मॉडल का उपयोग करना

google.accounts.oauth2 JavaScript लाइब्रेरी उपयोगकर्ता की सहमति के लिए संकेत देने और उपयोगकर्ता डेटा के साथ काम करने के लिए एक्सेस टोकन प्राप्त करने में आपकी सहायता करती है। यह OAuth 2.0 निहित अनुदान प्रवाह पर आधारित है और आपको REST और CORS का उपयोग करके सीधे Google API को कॉल करने की अनुमति देने के लिए डिज़ाइन किया गया है, या जावास्क्रिप्ट के लिए हमारी Google APIs क्लाइंट लाइब्रेरी का उपयोग करने के लिए (जिसे 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 आपके कॉलबैक फ़ंक्शन को एक्सेस टोकन और उपयोगकर्ता द्वारा स्वीकृत स्कोप वापस करने के लिए आमंत्रित करता है। आपका ऐप तब बारीक अनुमतियों के साथ संभावित विभिन्न परिणामों को सुरक्षित रूप से संभालता है।

वृद्धिशील प्राधिकरण

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

  • एक एकल-पृष्ठ अजाक्स ऐप, अक्सर संसाधनों तक गतिशील पहुंच के साथ XMLHttpRequest का उपयोग करता है।
  • एकाधिक वेब-पृष्ठ, संसाधन प्रति पृष्ठ के आधार पर अलग और प्रबंधित किए जाते हैं।

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

ajax

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

अजाक्स ऐप
पेज लोड पर टोकन क्लाइंट को इनिशियलाइज़ करें:
        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 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 का उपयोग करके प्रत्येक पृष्ठ लोड पर अनुरोध किया जा सकता है।

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

टोकन मॉडल में, एक एक्सेस टोकन ओएस या ब्राउज़र द्वारा संग्रहीत नहीं किया जाता है, इसके बजाय एक नया टोकन पहले पृष्ठ लोड समय पर प्राप्त किया जाता है, या बाद में एक बटन प्रेस जैसे उपयोगकर्ता के इशारे के माध्यम से अनुरोध करने के लिए कॉल को ट्रिगर करके requestAccessToken() प्राप्त किया जाता है।

Google API के साथ REST और CORS का उपयोग करना

REST और CORS का उपयोग करके Google API को प्रमाणित अनुरोध करने के लिए एक एक्सेस टोकन का उपयोग किया जा सकता है। यह उपयोगकर्ताओं को साइन-इन करने, सहमति देने, 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 लाइब्रेरी के साथ कार्य करना

टोकन क्लाइंट जावास्क्रिप्ट के लिए 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');