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

इस दस्तावेज़ में JavaScript वेब ऐप्लिकेशन से Google API को ऐक्सेस करने के लिए, OAuth 2.0 ऑथराइज़ेशन लागू करने का तरीका बताया गया है. OAuth 2.0 की मदद से उपयोगकर्ता, उपयोगकर्ता नाम, पासवर्ड, और दूसरी जानकारी को निजी रखते हुए, ऐप्लिकेशन के साथ खास डेटा शेयर कर सकते हैं. उदाहरण के लिए, कोई ऐप्लिकेशन OAuth 2.0 का इस्तेमाल करके उपयोगकर्ताओं से Google Drive में उनकी फ़ाइलें सेव करने की अनुमति ले सकता है.

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

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

ज़रूरी बातें

अपने प्रोजेक्ट के लिए API (एपीआई) चालू करें

Google API को कॉल करने वाले किसी भी ऐप्लिकेशन को, API Consoleमें उन एपीआई को चालू करना होगा.

अपने प्रोजेक्ट के लिए एपीआई को चालू करने के लिए:

  1. Open the API Library में Google API Console.
  2. If prompted, select a project, or create a new one.
  3. API Library सभी उपलब्ध एपीआई की सूची बनाता है. इन्हें प्रॉडक्ट परिवार और लोकप्रियता के हिसाब से ग्रुप किया जाता है. आप जिस एपीआई को चालू करना चाहते हैं वह अगर सूची में मौजूद नहीं है, तो खोज का इस्तेमाल करें.
  4. वह एपीआई चुनें जिसे आप चालू करना चाहते हैं, फिर चालू करें बटन पर क्लिक करें.
  5. If prompted, enable billing.
  6. If prompted, read and accept the API's Terms of Service.

अनुमति वाले क्रेडेंशियल बनाना

Google API ऐक्सेस करने के लिए OAuth 2.0 का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन के पास, Google और #39;s OAuth 2.0 सर्वर को ऐप्लिकेशन की पहचान करने वाले अनुमति क्रेडेंशियल होने चाहिए. नीचे दिए गए चरणों में बताया गया है कि अपने प्रोजेक्ट के लिए क्रेडेंशियल कैसे बनाए जा सकते हैं. इसके बाद, आपके ऐप्लिकेशन उन एपीआई को ऐक्सेस करने के लिए क्रेडेंशियल का इस्तेमाल कर सकते हैं जिन्हें आपने उस प्रोजेक्ट के लिए चालू किया है.

  1. Go to the Credentials page.
  2. क्रेडेंशियल बनाएं &gt, OAuth क्लाइंट आईडी पर क्लिक करें.
  3. वेब ऐप्लिकेशन ऐप्लिकेशन टाइप चुनें.
  4. फ़ॉर्म भरें. ऐसे ऐप्लिकेशन जो अनुमति वाले Google एपीआई अनुरोधों को लागू करने के लिए JavaScript का इस्तेमाल करते हैं, उन्हें अनुमति वाले JavaScript ऑरिजिन के बारे में बताना चाहिए. ऑरिजिन, उन डोमेन की पहचान करता है जहां से आपका ऐप्लिकेशन, OAuth 2.0 सर्वर को अनुरोध भेज सकता है. इन ऑरिजिन को Google की पुष्टि के नियमों का पालन करना होगा.

ऐक्सेस के दायरे की पहचान करना

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

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

OAuth 2.0 एपीआई के दायरे वाले दस्तावेज़ में, उन दायरों की पूरी सूची मौजूद है जिनका इस्तेमाल करके, आप Google API ऐक्सेस कर सकते हैं.

OAuth 2.0 ऐक्सेस टोकन पाना

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

पहला चरण: क्लाइंट ऑब्जेक्ट को कॉन्फ़िगर करना

अगर आप OAuth 2.0 फ़्लो को मैनेज करने के लिए, JavaScript के लिए Google API क्लाइंट लाइब्रेरी का इस्तेमाल कर रहे हैं, तो सबसे पहले आपको gapi.auth2 और gapi.client ऑब्जेक्ट को कॉन्फ़िगर करना होगा. ये ऑब्जेक्ट आपके ऐप्लिकेशन को उपयोगकर्ता की अनुमति लेने और अनुमति वाले एपीआई अनुरोध करने की सुविधा देते हैं.

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

JS क्लाइंट लाइब्रेरी

JavaScript क्लाइंट लाइब्रेरी, अनुमति देने की प्रक्रिया के कई पहलुओं को आसान बनाती है:

  1. यह Google' के ऑथराइज़ेशन सर्वर के लिए रीडायरेक्ट यूआरएल बनाता है और उपयोगकर्ता को उस यूआरएल पर ले जाने का तरीका देता है.
  2. यह रीडायरेक्ट, उस सर्वर से आपके ऐप्लिकेशन पर वापस हैंडल करता है.
  3. यह ऑथराइज़ेशन सर्वर से मिले ऐक्सेस टोकन की पुष्टि करता है.
  4. यह ऐक्सेस टोकन को सेव करता है, जिसे ऑथराइज़ेशन सर्वर आपके ऐप्लिकेशन पर भेजता है. साथ ही, आपके ऐप्लिकेशन से अनुमति वाले एपीआई कॉल के बाद, इसे वापस लाया जाता है.

नीचे दिया गया कोड स्निपेट, इस दस्तावेज़ में बाद में दिखाए गए पूरे उदाहरण का एक हिस्सा है. यह कोड gapi.client ऑब्जेक्ट को शुरू करता है, जिसे बाद में आपका ऐप्लिकेशन, एपीआई कॉल कर पाएगा. जब वह ऑब्जेक्ट बनाया जाता है, तो gapi.auth2 ऑब्जेक्ट भी शुरू हो जाता है, जिसका इस्तेमाल आपका ऐप्लिकेशन उपयोगकर्ता की # स्थिति की जांच और निगरानी करने के लिए करता है.

gapi.client.init को किया जाने वाला कॉल, इन फ़ील्ड के बारे में बताता है:

  • apiKey और clientId वैल्यू, आपके ऐप्लिकेशन के ऑथराइज़ेशन क्रेडेंशियल बताते हैं. जैसा कि अनुमति वाले क्रेडेंशियल बनाना सेक्शन में बताया गया है, ये वैल्यू API Consoleमें पाई जा सकती हैं. ध्यान दें कि अगर आपके ऐप्लिकेशन को अनुमति वाले एपीआई अनुरोध मिलते हैं, तो clientId की ज़रूरत होगी. ऐसे ऐप्लिकेशन जो सिर्फ़ बिना अनुमति के अनुरोध करते हैं, वे सिर्फ़ एपीआई कुंजी के बारे में बता सकते हैं.
  • scope फ़ील्ड, ऐक्सेस के दायरे की खाली जगह से अलग करके बनाई गई सूची बताता है. यह सूची उन रिसॉर्स से जुड़ी होती है जिन्हें आपका ऐप्लिकेशन, उपयोगकर्ता की ओर से ऐक्सेस कर सकता है. ये वैल्यू उपयोगकर्ता को Google को सहमति वाली स्क्रीन दिखाती हैं.

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

  • discoveryDocs फ़ील्ड, एपीआई डिस्कवरी दस्तावेज़ों की सूची दिखाता है, जिसका इस्तेमाल आपका ऐप्लिकेशन करता है. डिस्कवरी दस्तावेज़ में एपीआई के प्लैटफ़ॉर्म के बारे में बताया गया है. इसमें एपीआई के संसाधन स्कीमा भी शामिल हैं. JavaScript क्लाइंट लाइब्रेरी इस जानकारी का इस्तेमाल करके, ऐसे तरीके जनरेट करती है जिनका इस्तेमाल ऐप्लिकेशन कर सकते हैं. इस उदाहरण में, कोड, Google Drive API के वर्शन 3 के लिए खोज से जुड़े दस्तावेज़ को वापस लाता है.

gapi.client.init कॉल पूरा होने के बाद, कोड, Google ऑब्जेक्ट की पहचान करने के लिए GoogleAuth वैरिएबल सेट करता है. आखिर में, कोड एक लिसनर सेट करता है जो उपयोगकर्ता की साइन इन की स्थिति में बदलाव होने पर, फ़ंक्शन को कॉल करता है. (फ़ंक्शन के बारे में नहीं बताया गया है.)

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
  });
}

OAuth 2.0 एंडपॉइंट

अगर आप सीधे OAuth 2.0 एंडपॉइंट ऐक्सेस कर रहे हैं, तो आप अगले चरण पर जा सकते हैं.

दूसरा चरण: Google's OAuth 2.0 के सर्वर पर रीडायरेक्ट करना

उपयोगकर्ता के डेटा को ऐक्सेस करने का अनुरोध करने के लिए, उपयोगकर्ता को Google के OAuth 2.0 सर्वर पर रीडायरेक्ट करें.

JS क्लाइंट लाइब्रेरी

उपयोगकर्ता को Google के ऑथराइज़ेशन सर्वर पर भेजने के लिए, GoogleAuth.signIn() तरीके को कॉल करें.

GoogleAuth.signIn();

व्यावहारिक तौर पर, आपका ऐप्लिकेशन बूलियन वैल्यू सेट कर सकता है. इससे यह पता लगाया जा सकता है कि एपीआई कॉल करने से पहले, signIn() तरीके को कॉल करना है या नहीं.

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

  • कोड में बताया गया GoogleAuth ऑब्जेक्ट, चरण 1 के कोड स्निपेट में बताए गए ग्लोबल वैरिएबल जैसा ही है.

  • updateSigninStatus फ़ंक्शन एक लिसनर है जो उपयोगकर्ता की # अनुमति की स्थिति में होने वाले बदलावों पर ध्यान देता है. चरण 1 में, कोड स्निपेट में लिसनर के तौर पर भी इसकी भूमिका बताई गई है:
    GoogleAuth.isSignedIn.listen(updateSigninStatus);
  • स्निपेट दो अतिरिक्त ग्लोबल वैरिएबल के बारे में बताता है:

    • isAuthorized, बूलियन वैरिएबल है. इससे पता चलता है कि उपयोगकर्ता ने पहले से साइन इन किया हुआ है या नहीं. अगर उपयोगकर्ता, ऐप्लिकेशन में साइन इन या साइन आउट करता है, तो यह वैल्यू सेट की जा सकती है.

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

    • currentApiRequest एक ऑब्जेक्ट है जो उपयोगकर्ता के आखिरी कोशिश के बारे में जानकारी देता है. ऑब्जेक्ट की वैल्यू तब सेट की जाती है, जब ऐप्लिकेशन sendAuthorizedApiRequest फ़ंक्शन को कॉल करता है.

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

var isAuthorized;
var currentApiRequest;

/**
 * Store the request details. Then check to determine whether the user
 * has authorized the application.
 *   - If the user has granted access, make the API request.
 *   - If the user has not granted access, initiate the sign-in flow.
 */
function sendAuthorizedApiRequest(requestDetails) {
  currentApiRequest = requestDetails;
  if (isAuthorized) {
    // Make API request
    // gapi.client.request(requestDetails)

    // Reset currentApiRequest variable.
    currentApiRequest = {};
  } else {
    GoogleAuth.signIn();
  }
}

/**
 * Listener called when user completes auth flow. If the currentApiRequest
 * variable is set, then the user was prompted to authorize the application
 * before the request executed. In that case, proceed with that API request.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    isAuthorized = true;
    if (currentApiRequest) {
      sendAuthorizedApiRequest(currentApiRequest);
    }
  } else {
    isAuthorized = false;
  }
}

OAuth 2.0 एंडपॉइंट

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

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

पैरामीटर
client_id ज़रूरी

आपके ऐप्लिकेशन के लिए क्लाइंट आईडी. आपको यह वैल्यू API Console Credentials pageमें दिखेगी.

redirect_uri ज़रूरी

यह तय करता है कि उपयोगकर्ता के ऑथराइज़ेशन फ़्लो को पूरा करने के बाद, एपीआई सर्वर उपयोगकर्ता को कहां रीडायरेक्ट करता है. यह वैल्यू, OAuth 2.0 क्लाइंट के लिए अनुमति वाले किसी एक रीडायरेक्ट यूआरआई से पूरी तरह मेल खानी चाहिए जिसे आपने अपने क्लाइंट API Console Credentials pageमें कॉन्फ़िगर किया था. अगर यह मान'दिए गए client_id के लिए अनुमति वाले रीडायरेक्ट यूआरआई से मेल नहीं खाता है, तो आपको redirect_uri_mismatch गड़बड़ी मिलेगी.

ध्यान दें कि http या https स्कीम, केस, और ट्रेलिंग स्लैश ('/') को सभी यूआरएल से मेल खाना चाहिए.

response_type ज़रूरी

JavaScript ऐप्लिकेशन को पैरामीटर की #39; वैल्यू को token पर सेट करना होगा. यह वैल्यू, Google ऑथराइज़ेशन सर्वर को उस यूआरआई के फ़्रैगमेंट आइडेंटिफ़ायर (#) में name=value पेयर के तौर पर रिटर्न करने का निर्देश देती है जिस पर उपयोगकर्ता को ऑथराइज़ेशन प्रोसेस पूरी करने के बाद, रीडायरेक्ट किया जाता है.

scope ज़रूरी

स्पेस की दायरे वाली सूची, जिसमें ऐसे संसाधन शामिल हैं जिन्हें आपका ऐप्लिकेशन, उपयोगकर्ता की ओर से ऐक्सेस कर सकता है. ये मान Google को उस सहमति स्क्रीन के बारे में बताते हैं जिसे Google दिखाता है.

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

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

state सुझाया गया

ऐसे किसी भी स्ट्रिंग मान के बारे में बताता है जिसका इस्तेमाल आपका ऐप्लिकेशन, आपके अनुमति देने के अनुरोध और अनुमति देने वाले सर्वर के रिस्पॉन्स के बीच स्थिति बनाए रखने के लिए करता है. जब उपयोगकर्ता आपके ऐप्लिकेशन की पुष्टि के लिए अनुरोध करता है या उसे अस्वीकार करता है, तब सर्वर redirect_uri के name=value फ़्रैगमेंट आइडेंटिफ़ायर (#) में, name=value की जोड़ी गई वैल्यू के बराबर वैल्यू दिखाता है.

इस पैरामीटर का इस्तेमाल कई कामों के लिए किया जा सकता है. जैसे, उपयोगकर्ता को आपके ऐप्लिकेशन में सही संसाधन पर ले जाना, गैर-लाभकारी संस्था को भेजना, और क्रॉस-साइट अनुरोध से जुड़ी धोखाधड़ी को कम करना. state का इस्तेमाल करके, redirect_uri का अनुमान लगाया जा सकता है. इससे, इस बात का भरोसा बढ़ सकता है कि आने वाला कनेक्शन, पुष्टि करने के अनुरोध की वजह से हुआ है. अगर आप कोई रैंडम स्ट्रिंग जनरेट करते हैं या किसी कुकी या हैश की कुंजी को किसी ऐसे दूसरे कोड के कोड में बदलते हैं जो क्लाइंट की स्थिति बताता है, तो आप इस बात की पुष्टि कर सकते हैं कि अनुरोध और रिस्पॉन्स, एक ही ब्राउज़र में जनरेट किए गए हैं या नहीं. साथ ही, क्रॉस-साइट से जुड़े जालसाज़ी जैसे हमलों से बचाव भी किया जा सकता है. state टोकन बनाने और उसकी पुष्टि करने के उदाहरण के लिए, OpenID Connect दस्तावेज़ देखें.

include_granted_scopes ज़रूरी नहीं

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

login_hint ज़रूरी नहीं

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

पैरामीटर वैल्यू को ईमेल पते या sub के आइडेंटिफ़ायर पर सेट करें. यह उपयोगकर्ता और #39; के Google आईडी के बराबर होता है.

prompt ज़रूरी नहीं

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

ये वैल्यू हो सकती हैं:

none कोई भी पुष्टि या सहमति स्क्रीन न दिखाएं. दूसरी वैल्यू के साथ नहीं बताया जाना चाहिए.
consent उपयोगकर्ता की सहमति के लिए अनुरोध करें.
select_account उपयोगकर्ता को खाता चुनने की सूचना दें.

Google' के अनुमति देने वाले सर्वर पर सैंपल रीडायरेक्ट

उदाहरण के लिए, नीचे एक यूआरएल दिखाया गया है. इसे पढ़ने के लिए, लाइन ब्रेक और खाली जगह की जानकारी दी गई है.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

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

JavaScript कोड का नमूना

नीचे दिया गया JavaScript स्निपेट, JavaScript के लिए Google API क्लाइंट लाइब्रेरी का इस्तेमाल किए बिना, 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/drive.metadata.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();
}

तीसरा चरण: Google को, सहमति देने के लिए उपयोगकर्ता से अनुरोध करना

इस चरण में, उपयोगकर्ता यह तय करता है कि आपके ऐप्लिकेशन को अनुरोध किया गया ऐक्सेस देना है या नहीं. इस स्टेज पर, Google एक सहमति विंडो दिखाता है जिसमें आपके ऐप्लिकेशन का नाम और Google API की सेवाएं शामिल होती हैं. इनकी मदद से, उपयोगकर्ता और #39; के अनुमति क्रेडेंशियल के साथ ऐक्सेस की अनुमति का अनुरोध किया जाता है. साथ ही, दिए जाने वाले ऐक्सेस के दायरे की खास जानकारी भी दिखाई जाती है. इसके बाद, उपयोगकर्ता आपके ऐप्लिकेशन के अनुरोध किए गए एक या एक से ज़्यादा दायरों का ऐक्सेस देने के लिए सहमत हो सकता है या अनुरोध को अस्वीकार कर सकता है.

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

गड़बड़ियां

Google सामान्य गड़बड़ी कोड और सुझाए गए रिज़ॉल्यूशन नीचे दिए गए हैं.

admin_policy_enforced

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

disallowed_useragent

ऑथराइज़ेशन एंडपॉइंट को एम्बेड किए गए उपयोगकर्ता-एजेंट में दिखाया जाता है, जिसे Google की OAuth 2.0 नीतियों ने अनुमति नहीं दी है.

Android

android.webkit.WebView में अनुमति के अनुरोध खोलने पर, Android डेवलपर को यह गड़बड़ी का मैसेज मिल सकता है. इसके बजाय, डेवलपर को Android लाइब्रेरी का इस्तेमाल करना चाहिए, जैसे कि Android के लिए Google साइन इन या OpenGL फ़ाउंडेशन का #39; Android के लिए AppAuth.

वेब डेवलपर को यह गड़बड़ी तब मिल सकती है, जब Android ऐप्लिकेशन एम्बेड किए गए उपयोगकर्ता एजेंट में सामान्य वेब लिंक खोलता है. साथ ही, जब उपयोगकर्ता आपकी साइट पर जाकर, Google' OAuth 2.0 ऑथराइज़ेशन एंडपॉइंट पर जाता है, तो यह गड़बड़ी हो सकती है. डेवलपर को ऑपरेटिंग सिस्टम के डिफ़ॉल्ट लिंक हैंडलर में सामान्य लिंक खोलने की अनुमति देनी चाहिए. इसमें Android ऐप्लिकेशन लिंक हैंडलर या डिफ़ॉल्ट ब्राउज़र ऐप्लिकेशन, दोनों शामिल होते हैं. Android कस्टम टैब लाइब्रेरी भी काम करती है.

iOS

WKWebView में अनुमति देने का अनुरोध खोलने पर iOS और macOS डेवलपर इस गड़बड़ी का सामना कर सकते हैं. इसके बजाय, डेवलपर को iOS लाइब्रेरी का इस्तेमाल करना चाहिए, जैसे कि iOS के लिए Google साइन इन या OpenGL Foundation's iOS के लिए AppAuth.

वेब डेवलपर को यह गड़बड़ी तब मिल सकती है, जब iOS या macOS ऐप्लिकेशन एम्बेड किए गए उपयोगकर्ता एजेंट में सामान्य वेब लिंक खोलता हो. साथ ही, जब उपयोगकर्ता आपकी साइट पर जाकर, Google's OAuth 2.0 ऑथराइज़ेशन एंडपॉइंट पर जाता है, तो यह गड़बड़ी आ सकती है. डेवलपर को ऑपरेटिंग सिस्टम के डिफ़ॉल्ट लिंक हैंडलर में सामान्य लिंक खोलने की अनुमति देनी चाहिए. इसमें यूनिवर्सल लिंक हैंडलर या डिफ़ॉल्ट ब्राउज़र ऐप्लिकेशन, दोनों शामिल होते हैं. SFSafariViewController लाइब्रेरी भी एक विकल्प है.

org_internal

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

origin_mismatch

हो सकता है कि अनुमति के अनुरोध को जनरेट करने वाली JavaScript की स्कीम, डोमेन, और/या पोर्ट, OAuth क्लाइंट आईडी के लिए रजिस्टर किए गए JavaScript ऑरिजिन के यूआरआई से मेल न खाए. Google API Console Credentials pageमें JavaScript ऑरिजिन की अनुमति पाएं.

redirect_uri_mismatch

अनुमति के अनुरोध में पास किया गया redirect_uri, OAuth क्लाइंट आईडी के लिए आधिकारिक रीडायरेक्ट यूआरआई से मेल नहीं खाता. Google API Console Credentials page में आधिकारिक रीडायरेक्ट यूआरआई की समीक्षा करें.

हो सकता है कि अनुमति के अनुरोध को जनरेट करने वाली JavaScript की स्कीम, डोमेन, और/या पोर्ट, OAuth क्लाइंट आईडी के लिए रजिस्टर किए गए JavaScript ऑरिजिन के यूआरआई से मेल न खाए. Google API Console Credentials pageमें अनुमति वाले JavaScript ऑरिजिन की समीक्षा करें.

चौथा चरण: OAuth 2.0 सर्वर का रिस्पॉन्स मैनेज करना

JS क्लाइंट लाइब्रेरी

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

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 डिस्क' में मौजूद फ़ाइलों का मेटाडेटा देखने का रीड-ओनली ऐक्सेस मांगता है:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

OAuth 2.0 फ़्लो को पूरा करने के बाद, आपको http://localhost/oauth2callback पर रीडायरेक्ट कर दिया जाएगा. वह यूआरएल तब तक 404 NOT FOUND गड़बड़ी जनरेट करेगा, जब तक आपकी स्थानीय मशीन उस पते पर फ़ाइल नहीं दिखाती. जब उपयोगकर्ता को आपके ऐप्लिकेशन पर रीडायरेक्ट किया जाता है, तो यूआरआई में दी गई जानकारी के बारे में ज़्यादा जानकारी दी जाती है.

Google API कॉलिंग

JS क्लाइंट लाइब्रेरी

आपका ऐप्लिकेशन, ऐक्सेस टोकन मिलने के बाद, JavaScript क्लाइंट लाइब्रेरी का इस्तेमाल करके, उपयोगकर्ता की ओर से एपीआई अनुरोध कर सकता है. क्लाइंट लाइब्रेरी आपके लिए ऐक्सेस टोकन को मैनेज करती है. आपको अनुरोध में इसे भेजने के लिए कुछ खास करने की ज़रूरत नहीं है.

क्लाइंट लाइब्रेरी, एपीआई तरीकों से कॉल करने के दो तरीके काम करती है. अगर आपने डिस्कवरी दस्तावेज़ लोड किया है, तो एपीआई आपके लिए मैथड के हिसाब से फ़ंक्शन तय करेगा. एपीआई तरीके का इस्तेमाल करने के लिए, gapi.client.request फ़ंक्शन का भी इस्तेमाल किया जा सकता है. नीचे दिए गए दो स्निपेट, डिस्क API'sabout.get विधि के लिए ये विकल्प दिखाते हैं.

// Example 1: Use method-specific function
var request = gapi.client.drive.about.get({'fields': 'user'});

// Execute the API request.
request.execute(function(response) {
  console.log(response);
});


// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
  'method': 'GET',
  'path': '/drive/v3/about',
  'params': {'fields': 'user'}
});
// Execute the API request.
request.execute(function(response) {
  console.log(response);
});

OAuth 2.0 एंडपॉइंट

आपके ऐप्लिकेशन को ऐक्सेस टोकन मिलने के बाद, आप टोकन का इस्तेमाल करके, Google के किसी एपीआई को कॉल कर सकते हैं. इसके लिए, यह ज़रूरी है कि एपीआई के लिए ज़रूरी ऐक्सेस के दायरे को स्वीकार किया गया हो. ऐसा करने के लिए, ऐक्सेस क्वेरी में एपीआई का ऐक्सेस टोकन शामिल करें. इसके लिए, access_token क्वेरी पैरामीटर या Authorization एचटीटीपी हेडर Bearer वैल्यू शामिल करें. हो सके, तो एचटीटीपी हेडर को प्राथमिकता दी जाती है, क्योंकि क्वेरी लॉग आम तौर पर सर्वर लॉग में दिखते हैं. ज़्यादातर मामलों में, Google API पर अपने कॉल सेट अप करने के लिए, क्लाइंट लाइब्रेरी का इस्तेमाल किया जा सकता है. उदाहरण के लिए, Drive Files API पर कॉल करते समय.

आप OAuth 2.0 Playground पर सभी Google API आज़मा सकते हैं और उनके दायरे देख सकते हैं.

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

Authorization: Bearer एचटीटीपी हेडर का इस्तेमाल करके drive.files एंडपॉइंट (Drive Files API) को कॉल करने पर यह जैसा दिख सकता है. ध्यान दें कि आपको अपना खुद का ऐक्सेस टोकन देना होगा:

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

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

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

curl के उदाहरण

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

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

या फिर, क्वेरी स्ट्रिंग पैरामीटर का विकल्प:

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

JavaScript कोड का नमूना

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

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

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/drive/v3/about?fields=user&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

उदाहरण

JS क्लाइंट लाइब्रेरी

सैंपल कोड का डेमो

इस सेक्शन में कोड का एक ऐसा डेमो होता है जो काम करता है. इससे पता चलता है कि कोड असल ऐप्लिकेशन में कैसे काम करता है. ऐप्लिकेशन को अनुमति देने के बाद, इसे आपके Google खाते से जुड़े ऐप्लिकेशन में शामिल किया जाएगा. ऐप्लिकेशन का नाम Google API Docs के लिए OAuth 2.0 डेमो है. इसी तरह, अगर आप ऐक्सेस को निरस्त करते हैं और उस पेज को रीफ़्रेश करते हैं, तो ऐप्लिकेशन अपने-आप सूची में शामिल नहीं रहेगा.

ध्यान दें कि यह ऐप्लिकेशन https://www.googleapis.com/auth/drive.metadata.readonly दायरे के ऐक्सेस का अनुरोध करता है. इस ऐक्सेस का अनुरोध सिर्फ़ यह दिखाने के लिए किया जाता है कि JavaScript ऐप्लिकेशन में OAuth 2.0 फ़्लो को कैसे शुरू किया जाए. यह ऐप्लिकेशन, एपीआई के कोई अनुरोध नहीं करता है.

JavaScript कोड का नमूना

जैसा कि ऊपर दिखाया गया है, यह कोड सैंपल ऐसे ऐप्लिकेशन (ऐप्लिकेशन) के लिए है जो JavaScript के लिए Google API क्लाइंट लाइब्रेरी को लोड करता है और OAuth 2.0 फ़्लो को शुरू करता है. पेज, इनमें से कोई एक चीज़ दिखाएगा:

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

अपने Google खाते के लिए, अनुमतियां पेज से भी ऐप्लिकेशन का ऐक्सेस निरस्त किया जा सकता है. ऐप्लिकेशन को Google API Docs के लिए OAuth 2.0 डेमो के तौर पर सूची में शामिल किया गया है.

<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

OAuth 2.0 एंडपॉइंट

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

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

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

    एपीआई अनुरोध, पुष्टि करने वाले उपयोगकर्ता' के Google Drive खाते के बारे में जानकारी पाने के लिए Drive API&#39s के about.get तरीके को कॉल करता है.

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

अपने Google खाते के लिए, अनुमतियां पेज से ऐप्लिकेशन के ऐक्सेस को निरस्त किया जा सकता है. ऐप्लिकेशन को Google API Docs के लिए OAuth 2.0 डेमो के तौर पर सूची में शामिल किया जाएगा.

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

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

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

  // 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']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/drive/v3/about?fields=user&' +
          '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 {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // 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/drive.metadata.readonly',
                  'state': 'try_sample_request',
                  '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>

JavaScript ऑरिजिन की पुष्टि करने के नियम

Google, पुष्टि करने के इन नियमों को JavaScript ऑरिजिन पर लागू करता है. इससे, डेवलपर को अपने ऐप्लिकेशन सुरक्षित रखने में मदद मिलती है. आपके JavaScript ऑरिजिन को इन नियमों का पालन करना होगा. नीचे बताए गए डोमेन, होस्ट, और स्कीम की परिभाषा के लिए, आरएफ़सी 3986 सेक्शन 3 देखें.

सत्यापन नियम
स्कीम

JavaScript ऑरिजिन को एचटीटीपीएस स्कीम का इस्तेमाल करना चाहिए, न कि सादे एचटीटीपी का. स्थानीय होस्ट यूआरआई (इसमें स्थानीय होस्ट के आईपी पते के यूआरएल भी शामिल हैं) पर यह नियम लागू नहीं होता.

होस्ट

होस्ट अपरिष्कृत IP पते नहीं हो सकते. स्थानीय होस्ट के आईपी पतों पर यह नियम लागू नहीं होता.

डोमेन
  • होस्ट टीएलडी (टॉप लेवल डोमेन) सार्वजनिक सफ़िक्स सूची से जुड़े होने चाहिए.
  • होस्ट डोमेन “googleusercontent.com” नहीं हो सकते.
  • JavaScript ऑरिजिन में यूआरएल को छोटा करने वाले डोमेन (उदाहरण के लिए, goo.gl) शामिल नहीं हो सकते. हालांकि, इसके लिए ज़रूरी है कि ऐप्लिकेशन, डोमेन का मालिक हो.
  • उपयोगकर्ता जानकारी

    JavaScript ऑरिजिन में userinfo सबकॉम्पोनेंट शामिल नहीं हो सकता.

    पाथ

    JavaScript ऑरिजिन में पाथ कॉम्पोनेंट नहीं हो सकता.

    क्वेरी

    JavaScript ऑरिजिन में क्वेरी कॉम्पोनेंट शामिल नहीं हो सकता.

    फ़्रैगमेंट

    JavaScript ऑरिजिन में फ़्रैगमेंट कॉम्पोनेंट नहीं हो सकता.

    वर्ण JavaScript ऑरिजिन में कुछ खास वर्ण शामिल नहीं होने चाहिए. इनमें ये शामिल हैं:
    • वाइल्डकार्ड वर्ण ('*')
    • प्रिंट न किए जा सकने वाले ASCII वर्ण
    • अमान्य प्रतिशत एन्कोडिंग (ऐसे कोई भी प्रतिशत एन्कोडिंग जो प्रतिशत एन्कोडिंग के रूप में यूआरएल-एन्कोडिंग के रूप में काम नहीं करते और फिर दो हेक्साडेसिमल अंक)
    • शून्य वर्ण (कोड में बदले गए शून्य वर्ण, जैसे कि %00, %C0%80

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

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

    उदाहरण के लिए, ऐसा ऐप्लिकेशन जो लोगों को संगीत ट्रैक का नमूना लेने और मिक्स बनाने की सुविधा देता है उसे साइन इन करते समय बहुत कम संसाधनों की ज़रूरत हो सकती है. शायद, साइन इन करने वाले व्यक्ति के नाम से ज़्यादा कुछ न हो. हालांकि, भरे हुए मिक्स को सेव करने के लिए, उनके Google Drive का ऐक्सेस ज़रूरी है. ज़्यादातर लोगों को यह स्वाभाविक लगता है कि जब उनसे ऐप्लिकेशन की ज़रूरत होगी, तभी उन्हें अपनी Google Drive का ऐक्सेस मांगा जाए.

    इस मामले में, साइन इन के समय ऐप्लिकेशन, सामान्य साइन इन करने के लिए, openid और profile दायरे का अनुरोध कर सकता है. इसके बाद, पहले मिक्स के सेव होने के समय, https://www.googleapis.com/auth/drive.file दायरे का अनुरोध कर सकता है.

    नीचे दिए गए नियम इंक्रीमेंटल ऑथराइज़ेशन से मिले ऐक्सेस टोकन पर लागू होते हैं:

    • इस टोकन का इस्तेमाल, ऐसे नए दायरों से जुड़े संसाधनों को ऐक्सेस करने के लिए किया जा सकता है जिन्हें नए और एक साथ करने की अनुमति मिली हो.
    • जब आप ऐक्सेस टोकन पाने के लिए, मिली-जुली अनुमति के लिए रीफ़्रेश टोकन का इस्तेमाल करते हैं, तो ऐक्सेस टोकन, मिली-जुली अनुमति दिखाता है. साथ ही, इसका इस्तेमाल रिस्पॉन्स में शामिल किसी भी scope वैल्यू के लिए किया जा सकता है.
    • मिले-जुले अनुमति में, उपयोगकर्ता के एपीआई प्रोजेक्ट को दिए गए सभी दायरे शामिल होते हैं. भले ही, अनुदान के लिए अलग-अलग क्लाइंट से अनुरोध किया गया हो. उदाहरण के लिए, अगर किसी उपयोगकर्ता ने ऐप्लिकेशन के डेस्कटॉप क्लाइंट का इस्तेमाल करके, किसी दायरे का ऐक्सेस दिया है और फिर मोबाइल क्लाइंट के ज़रिए, उसी दायरे में आने के लिए दूसरा दायरा दिया है, तो मिले-जुले अनुमति में दोनों दायरे शामिल होंगे.
    • अगर आप ऐसे टोकन को निरस्त करते हैं जो मिले-जुले ऑथराइज़ेशन को दिखाता है, तो इससे जुड़े उपयोगकर्ता की ओर से, सभी अनुमति देने के #&3 स्कोप के ऐक्सेस को निरस्त कर दिया जाता है.

    नीचे दिए गए कोड सैंपल दिखाते हैं कि किसी मौजूदा ऐक्सेस टोकन में दायरे कैसे जोड़े जाएं. इस तरीके की मदद से, आपके ऐप्लिकेशन को एक से ज़्यादा ऐक्सेस टोकन मैनेज करने से रोका जाता है.

    JS क्लाइंट लाइब्रेरी

    किसी मौजूदा ऐक्सेस टोकन के दायरे जोड़ने के लिए, GoogleUser.grant(options) तरीके पर कॉल करें. options ऑब्जेक्ट, उन अतिरिक्त दायरों की पहचान करता है जिन्हें आप ऐक्सेस देना चाहते हैं.

    // Space-separated list of additional scope(s) you are requesting access to.
    // This code adds read-only access to the user's calendars via the Calendar API.
    var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
    
    // Retrieve the GoogleUser object for the current user.
    var GoogleUser = GoogleAuth.currentUser.get();
    GoogleUser.grant({'scope': NEW_SCOPES});

    OAuth 2.0 एंडपॉइंट

    किसी मौजूदा ऐक्सेस टोकन में दायरा जोड़ने के लिए, include_granted_scopes पैरामीटर को Google और #39;s OAuth 2.0 सर्वर में जोड़ें.

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

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

    var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
    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.
    }

    टोकन निरस्त करना

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

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

    JS क्लाइंट लाइब्रेरी

    टोकन को प्रोग्राम के हिसाब से निरस्त करने के लिए, GoogleAuth.disconnect() को कॉल करें:

    GoogleAuth.disconnect();

    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 टोकन का इस्तेमाल किए बिना, JavaScript में टोकन को निरस्त करने का तरीका बताता है. टोकन निरस्त करने के लिए, Google और #39 के 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();
    }