क्लाइंट-साइड वेब ऐप्लिकेशन के लिए, OAuth 2.0 का इस्तेमाल करना

OAuth 2.0 एंडपॉइंट

https://accounts.google.com/o/oauth2/v2/auth पर मौजूद Google के OAuth 2.0 एंडपॉइंट से ऐक्सेस का अनुरोध करने के लिए, एक यूआरएल जनरेट करें. इस एंडपॉइंट को एचटीटीपीएस के ज़रिए ऐक्सेस किया जा सकता है; सामान्य एचटीटीपी कनेक्शन अस्वीकार कर दिए जाते हैं.

Google का ऑथराइज़ेशन सर्वर, वेब सर्वर ऐप्लिकेशन के लिए क्वेरी स्ट्रिंग के इन पैरामीटर का इस्तेमाल करता है:

Google के अनुमति देने वाले सर्वर पर रीडायरेक्ट करने का उदाहरण

यहां एक यूआरएल का उदाहरण दिया गया है. इसे पढ़ने में आसानी हो, इसके लिए इसमें लाइन ब्रेक और स्पेस का इस्तेमाल किया गया है. यूआरएल, ऐसे स्कोप का ऐक्सेस मांगता है जिससे उपयोगकर्ता के YouTube डेटा को वापस पाने का ऐक्सेस मिलता है. यह इंक्रीमेंटल ऑथराइज़ेशन (include_granted_scopes=true) का इस्तेमाल करता है, ताकि यह पक्का किया जा सके कि नया ऐक्सेस टोकन उन सभी स्कोप को कवर करता है जिनके लिए उपयोगकर्ता ने पहले ऐप्लिकेशन को ऐक्सेस करने की अनुमति दी थी. उदाहरण में कई अन्य पैरामीटर भी सेट किए गए हैं.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 client_id=client_id

अनुरोध यूआरएल बनाने के बाद, उपयोगकर्ता को उस पर रीडायरेक्ट करें.

JavaScript का सैंपल कोड

यहां दिए गए JavaScript स्निपेट में, Google APIs Client Library for JavaScript का इस्तेमाल किए बिना, JavaScript में अनुमति देने की प्रोसेस शुरू करने का तरीका बताया गया है. यह OAuth 2.0 एंडपॉइंट, क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) के साथ काम नहीं करता है. इसलिए, स्निपेट एक ऐसा फ़ॉर्म बनाता है जो उस एंडपॉइंट पर अनुरोध खोलता है.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/calendar.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

OAuth 2.0 एंडपॉइंट

OAuth 2.0 सर्वर, आपके ऐक्सेस टोकन के अनुरोध में बताए गए redirect_uri को जवाब भेजता है.

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

• ऐक्सेस टोकन का जवाब:

  https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

  access_token पैरामीटर के अलावा, फ़्रैगमेंट स्ट्रिंग में token_type पैरामीटर भी होता है. इसकी वैल्यू हमेशा Bearer पर सेट होती है. साथ ही, इसमें expires_in पैरामीटर भी होता है, जो टोकन की लाइफ़टाइम को सेकंड में दिखाता है. अगर ऐक्सेस टोकन के अनुरोध में state पैरामीटर तय किया गया था, तो इसकी वैल्यू भी जवाब में शामिल की जाती है.

• गड़बड़ी का मैसेज:

  https://oauth2.example.com/callback#error=access_denied

OAuth 2.0 सर्वर से मिले जवाब का सैंपल

इस फ़्लो को आज़माने के लिए, यहां दिए गए सैंपल यूआरएल पर क्लिक करें. यह यूआरएल, आपकी Google Drive में मौजूद फ़ाइलों का मेटाडेटा देखने के लिए, सिर्फ़ पढ़ने का ऐक्सेस और आपके Google Calendar इवेंट देखने के लिए, सिर्फ़ पढ़ने का ऐक्सेस मांगता है:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 client_id=client_id

OAuth 2.0 फ़्लो पूरा करने के बाद, आपका ब्राउज़र आपको OAuth 2.0 Playground पर रीडायरेक्ट कर देता है. यह OAuth फ़्लो को टेस्ट करने का टूल है. आपको दिखेगा कि OAuth 2.0 Playground ने ऑथराइज़ेशन कोड को अपने-आप कैप्चर कर लिया है.

OAuth 2.0 एंडपॉइंट

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

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

  {
    "access_token": "1/fFAGRNJru1FTz70BzhT3Zg",
    "expires_in": 3920,
    "token_type": "Bearer",
    "scope": "https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/calendar.readonly",
    "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI"
  }

OAuth 2.0 एंडपॉइंट

जब आपका ऐप्लिकेशन ऐक्सेस टोकन हासिल कर लेता है, तब आपके पास इस टोकन का इस्तेमाल करके, किसी Google API को कॉल करने का विकल्प होता है. हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब एपीआई को ऐक्सेस करने के लिए ज़रूरी स्कोप दिए गए हों. इसके लिए, एपीआई को भेजे जाने वाले अनुरोध में ऐक्सेस टोकन शामिल करें. इसके लिए, access_token क्वेरी पैरामीटर या Authorization एचटीटीपी हेडर Bearer वैल्यू में से किसी एक को शामिल करें. जब मुमकिन हो, तब एचटीटीपी हेडर का इस्तेमाल करना बेहतर होता है, क्योंकि क्वेरी स्ट्रिंग, सर्वर लॉग में दिखती हैं. ज़्यादातर मामलों में, Google APIs को कॉल करने के लिए क्लाइंट लाइब्रेरी का इस्तेमाल किया जा सकता है. उदाहरण के लिए, YouTube Live Streaming API को कॉल करते समय.

ध्यान दें कि YouTube Live Streaming API, सेवा खाते के फ़्लो के साथ काम नहीं करता. किसी सेवा खाते को YouTube खाते से लिंक नहीं किया जा सकता. इसलिए, इस फ़्लो का इस्तेमाल करके अनुरोधों को अनुमति देने की कोशिश करने पर, NoLinkedYouTubeAccount गड़बड़ी दिखेगी.

OAuth 2.0 Playground पर जाकर, Google के सभी एपीआई आज़माए जा सकते हैं और उनके स्कोप देखे जा सकते हैं.

एचटीटीपी GET के उदाहरण

Authorization: Bearer एचटीटीपी हेडर का इस्तेमाल करके, liveBroadcasts.list एंडपॉइंट (YouTube Live Streaming API) को कॉल करने पर, यह इस तरह दिख सकता है. ध्यान दें कि आपको अपना ऐक्सेस टोकन डालना होगा:

GET /youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

यहां पुष्टि किए गए उपयोगकर्ता के लिए, access_token क्वेरी स्ट्रिंग पैरामीटर का इस्तेमाल करके, उसी एपीआई को कॉल किया गया है:

GET https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

curl के उदाहरण

curl कमांड-लाइन ऐप्लिकेशन की मदद से, इन कमांड की जांच की जा सकती है. यहां एचटीटीपी हेडर विकल्प (पसंदीदा) का इस्तेमाल करने वाला एक उदाहरण दिया गया है:

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true

इसके अलावा, क्वेरी स्ट्रिंग पैरामीटर का विकल्प भी इस्तेमाल किया जा सकता है:

curl https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

JavaScript का सैंपल कोड

यहां दिए गए कोड स्निपेट में, Google API को अनुरोध भेजने के लिए सीओआरएस (क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग) का इस्तेमाल करने का तरीका बताया गया है. इस उदाहरण में, JavaScript के लिए Google APIs क्लाइंट लाइब्रेरी का इस्तेमाल नहीं किया गया है. हालांकि, अगर क्लाइंट लाइब्रेरी का इस्तेमाल नहीं किया जा रहा है, तो भी उस लाइब्रेरी के दस्तावेज़ में मौजूद सीओआरएस के साथ काम करने से जुड़ी गाइड से, आपको इन अनुरोधों को बेहतर तरीके से समझने में मदद मिल सकती है.

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

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

OAuth 2.0 एंडपॉइंट

इस कोड के उदाहरण में, JavaScript में OAuth 2.0 फ़्लो को पूरा करने का तरीका बताया गया है. इसमें Google APIs Client Library for JavaScript का इस्तेमाल नहीं किया गया है. यह कोड, एक एचटीएमएल पेज के लिए है. इस पेज पर एक बटन दिखता है. इस बटन पर क्लिक करके, एपीआई अनुरोध किया जा सकता है. इस बटन पर क्लिक करने से, कोड यह पता लगाता है कि पेज ने आपके ब्राउज़र के लोकल स्टोरेज में एपीआई ऐक्सेस टोकन सेव किया है या नहीं. अगर ऐसा है, तो यह एपीआई अनुरोध को पूरा करता है. अगर ऐसा नहीं है, तो यह OAuth 2.0 फ़्लो शुरू करता है.

OAuth 2.0 फ़्लो के लिए, पेज इन चरणों का पालन करता है:

1. यह उपयोगकर्ता को Google के OAuth 2.0 सर्वर पर रीडायरेक्ट करता है. यह सर्वर, https://www.googleapis.com/auth/youtube.force-ssl और https://www.googleapis.com/auth/calendar.readonlyस्कोप को ऐक्सेस करने का अनुरोध करता है.
2. एक या उससे ज़्यादा अनुरोध किए गए स्कोप का ऐक्सेस देने (या अस्वीकार करने) के बाद, उपयोगकर्ता को उस मूल पेज पर रीडायरेक्ट कर दिया जाता है जो फ़्रैगमेंट आइडेंटिफ़ायर स्ट्रिंग से ऐक्सेस टोकन को पार्स करता है.
3. इस पेज पर यह देखा जाता है कि उपयोगकर्ता ने ऐप्लिकेशन को किन स्कोप का ऐक्सेस दिया है.

4. अगर उपयोगकर्ता ने अनुरोध किए गए स्कोप() को ऐक्सेस करने की अनुमति दी है, तो पेज, ऐक्सेस टोकन का इस्तेमाल करके सैंपल एपीआई का अनुरोध करता है.

   यह एपीआई अनुरोध, YouTube Data API के liveBroadcasts.list तरीके को कॉल करता है. इससे, अनुमति पा चुके उपयोगकर्ता के YouTube चैनल के लिए, वीडियो ब्रॉडकास्ट की सूची मिलती है.

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

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

इस कोड को स्थानीय तौर पर चलाने के लिए, आपको YOUR_CLIENT_ID और YOUR_REDIRECT_URI वैरिएबल के लिए ऐसी वैल्यू सेट करनी होंगी जो आपके अनुमति से जुड़े क्रेडेंशियल से मेल खाती हों. YOUR_REDIRECT_URI वैरिएबल को उस यूआरएल पर सेट किया जाना चाहिए जहां पेज दिखाया जा रहा है. यह वैल्यू, OAuth 2.0 क्लाइंट के लिए अनुमति पा चुके रीडायरेक्ट यूआरआई में से किसी एक से पूरी तरह मेल खानी चाहिए. इसे आपने Cloud Console के क्लाइंट पेज पर कॉन्फ़िगर किया था. अगर यह वैल्यू, अनुमति वाले यूआरआई से मेल नहीं खाती है, तो आपको redirect_uri_mismatch गड़बड़ी दिखेगी. आपके प्रोजेक्ट में, इस अनुरोध के लिए सही एपीआई चालू होना चाहिए.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var fragmentString = location.hash.substring(1);
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0 && params['state']) {
    if (params['state'] == localStorage.getItem('state')) {
      localStorage.setItem('oauth2-test-params', JSON.stringify(params) );

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) { 
      // User authorized the request. Now, check which scopes were granted.
      if (params['scope'].includes('https://www.googleapis.com/auth/drive.metadata.readonly')) {
        // User authorized read-only Drive activity permission.
        // Calling the APIs, etc.
        var xhr = new XMLHttpRequest();
        xhr.open('GET',
          'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' +
          'access_token=' + params['access_token']);
        xhr.onreadystatechange = function (e) {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.response);
          } else if (xhr.readyState === 4 && xhr.status === 401) {
            // Token invalid, so prompt for user permission.
            oauth2SignIn();
          }
        };
        xhr.send(null);
      }
      else {
        // User didn't authorize read-only Drive activity permission.
        // Update UX and application accordingly
        console.log('User did not authorize read-only Drive activity permission.');
      }

      // Check if user authorized Calendar read permission.
      if (params['scope'].includes('https://www.googleapis.com/auth/calendar.readonly')) {
        // User authorized Calendar read permission.
        // Calling the APIs, etc.
        console.log('User authorized Calendar read permission.');
      }
      else {
        // User didn't authorize Calendar read permission.
        // Update UX and application accordingly
        console.log('User did not authorize Calendar read permission.');
      } 
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/calendar.readonly',
                  'state': state,
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

OAuth 2.0 एंडपॉइंट

इस उदाहरण में, कॉल करने वाला ऐप्लिकेशन, उपयोगकर्ता के YouTube डेटा को वापस पाने के लिए ऐक्सेस का अनुरोध करता है. इसके अलावा, उपयोगकर्ता ने ऐप्लिकेशन को पहले से ही जो ऐक्सेस दिया है उसके लिए भी अनुरोध करता है.

किसी मौजूदा ऐक्सेस टोकन में स्कोप जोड़ने के लिए, Google के OAuth 2.0 सर्वर को किए गए अनुरोध में include_granted_scopes पैरामीटर शामिल करें.

यहां दिए गए कोड स्निपेट में, ऐसा करने का तरीका बताया गया है. इस स्निपेट में यह माना गया है कि आपने उन स्कोप को सेव कर लिया है जिनके लिए आपका ऐक्सेस टोकन मान्य है. इन्हें ब्राउज़र के लोकल स्टोरेज में सेव किया जाता है. (पूरे उदाहरण में दिया गया कोड, उन स्कोप की सूची सेव करता है जिनके लिए ऐक्सेस टोकन मान्य है. इसके लिए, ब्राउज़र के लोकल स्टोरेज में oauth2-test-params.scope प्रॉपर्टी सेट की जाती है.)

इस स्निपेट में, उन स्कोप की तुलना की जाती है जिनके लिए ऐक्सेस टोकन मान्य है. साथ ही, उस स्कोप की तुलना की जाती है जिसका इस्तेमाल आपको किसी क्वेरी के लिए करना है. अगर ऐक्सेस टोकन में वह स्कोप शामिल नहीं है, तो OAuth 2.0 फ़्लो शुरू हो जाता है. यहां oauth2SignIn फ़ंक्शन वही है जो दूसरे चरण में दिया गया था. यह पूरे उदाहरण में भी दिया गया है.

var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

OAuth 2.0 एंडपॉइंट

प्रोग्राम के हिसाब से टोकन रद्द करने के लिए, आपका ऐप्लिकेशन https://oauth2.googleapis.com/revoke को एक अनुरोध भेजता है और टोकन को पैरामीटर के तौर पर शामिल करता है:

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

टोकन, ऐक्सेस टोकन या रीफ़्रेश टोकन हो सकता है. अगर टोकन, ऐक्सेस टोकन है और उससे जुड़ा रीफ़्रेश टोकन मौजूद है, तो रीफ़्रेश टोकन भी रद्द कर दिया जाएगा.

अगर रद्द करने की प्रोसेस पूरी हो जाती है, तो जवाब का एचटीटीपी स्टेटस कोड 200 होता है. गड़बड़ी की स्थितियों के लिए, एचटीटीपी स्टेटस कोड 400 के साथ-साथ गड़बड़ी का कोड भी दिखाया जाता है.

JavaScript का यह स्निपेट दिखाता है कि JavaScript के लिए Google APIs क्लाइंट लाइब्रेरी का इस्तेमाल किए बिना, JavaScript में टोकन को कैसे रद्द किया जाता है. टोकन रद्द करने के लिए, Google के OAuth 2.0 एंडपॉइंट पर क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) की सुविधा काम नहीं करती. इसलिए, कोड एक फ़ॉर्म बनाता है और अनुरोध पोस्ट करने के लिए XMLHttpRequest() तरीके का इस्तेमाल करने के बजाय, फ़ॉर्म को एंडपॉइंट पर सबमिट करता है.

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}