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

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

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

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

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

सेटअप

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

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

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

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 का इस्तेमाल करता है संसाधन.
  • कई वेब पेज और संसाधनों को अलग-अलग किया जाता है और उन्हें हर पेज के हिसाब से मैनेज किया जाता है.

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

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();
पेज 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
        ...
      }
    }
  },
});

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

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

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

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

ऐक्सेस टोकन का इस्तेमाल करके, 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 को ऐक्सेस करने के लिए सीओआरएस का इस्तेमाल करने का तरीका लेख पढ़ें.

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

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