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

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

OAuth 2.0 के ऑथराइज़ेशन कोड फ़्लो की खास जानकारी:

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

अहम जानकारी: अपने बैकएंड सर्वर पर, Google के टोकन एंडपॉइंट को कॉल करके, रीफ़्रेश टोकन और ऐक्सेस टोकन के लिए ऑथराइज़ेशन कोड का इस्तेमाल किया जाता है.

ज़रूरी शर्तें

OAuth की सहमति वाली स्क्रीन को कॉन्फ़िगर करने, क्लाइंट आईडी पाने, और क्लाइंट लाइब्रेरी को लोड करने के लिए, सेटअप में बताए गए तरीके अपनाएं.

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

google.accounts.oauth2.initCodeClient() तरीका, कोड क्लाइंट को शुरू करता है.

पॉप-अप या रीडायरेक्ट मोड

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

इनके लिए क्लाइंट को शुरू करने के लिए:

• यूज़र एक्सपीरियंस (यूएक्स) फ़्लो को रीडायरेक्ट करें, ux_mode को redirect पर सेट करें, और redirect_uri की वैल्यू को अपने प्लैटफ़ॉर्म के ऑथराइज़ेशन कोड एंडपॉइंट पर सेट करें. यह वैल्यू, OAuth 2.0 क्लाइंट के लिए, अनुमति वाले किसी एक रीडायरेक्ट यूआरआई से पूरी तरह मेल खानी चाहिए. इस क्लाइंट को आपने API Console में कॉन्फ़िगर किया है. यह रीडायरेक्ट यूआरआई की पुष्टि करने के हमारे नियमों के मुताबिक भी होना चाहिए.

• पॉप-अप यूज़र एक्सपीरियंस फ़्लो, ux_mode को popup पर सेट करें. साथ ही, callback की वैल्यू को उस फ़ंक्शन के नाम पर सेट करें जिसका इस्तेमाल करके, आपको अपने प्लैटफ़ॉर्म पर अनुमति कोड भेजने हैं.

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

सीएसआरएफ़ हमलों से सुरक्षा पाना

किसी दूसरी साइट से किए गए फ़र्ज़ी अनुरोध (सीएसआरएफ़) वाले हमलों को रोकने के लिए, रीडायरेक्ट और पॉप-अप मोड के यूज़र एक्सपीरियंस (यूएक्स) फ़्लो के लिए थोड़ी अलग तकनीकें अपनाई जाती हैं. रीडायरेक्ट मोड के लिए, OAuth 2.0 state पैरामीटर का इस्तेमाल किया जाता है. state पैरामीटर जनरेट करने और उसकी पुष्टि करने के बारे में ज़्यादा जानने के लिए, आरएफ़सी 6749 सेक्शन 10.12 क्रॉस-साइट रिक्वेस्ट फ़ोरgery देखें. पॉप-अप मोड में, अपने अनुरोधों में कस्टम एचटीटीपी हेडर जोड़ा जाता है. इसके बाद, अपने सर्वर पर पुष्टि की जाती है कि वह अनुरोध, उम्मीद की गई वैल्यू और ऑरिजिन से मेल खाता है या नहीं.

पुष्टि करने वाला कोड और सीएसआरएफ़ मैनेज करने वाला कोड स्निपेट देखने के लिए, कोई यूज़र एक्सपीरियंस (यूएक्स) मोड चुनें:

रीडायरेक्ट मोड

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

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

पॉप-अप मोड

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

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

OAuth 2.0 कोड फ़्लो को ट्रिगर करना

यूज़र फ़्लो को ट्रिगर करने के लिए, कोड क्लाइंट के requestCode() तरीके को कॉल करें:

<button onclick="client.requestCode();">Authorize with Google</button>

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

पुष्टि करने वाले कोड को मैनेज करना

Google, हर उपयोगकर्ता के लिए एक यूनीक अनुमति कोड जनरेट करता है. यह कोड आपको मिलता है और आपके बैकएंड सर्वर पर इसकी पुष्टि की जाती है.

पॉप-अप मोड के लिए, callback से तय किया गया हैंडलर, उपयोगकर्ता के ब्राउज़र में चलता है. यह हैंडलर, आपके प्लैटफ़ॉर्म के होस्ट किए गए एंडपॉइंट पर ऑथराइज़ेशन कोड भेजता है.

रीडायरेक्ट मोड के लिए, redirect_url से तय किए गए एंडपॉइंट पर एक GET अनुरोध भेजा जाता है. इसमें, यूआरएल code पैरामीटर में अनुमति कोड शेयर किया जाता है. ऑथराइज़ेशन कोड पाने के लिए:

• अगर आपने पहले से कोई ऑथराइज़ेशन एंडपॉइंट लागू नहीं किया है, तो नया ऑथराइज़ेशन एंडपॉइंट बनाएं या

• GET अनुरोध और यूआरएल पैरामीटर स्वीकार करने के लिए, अपने मौजूदा एंडपॉइंट को अपडेट करें. पहले, पेलोड में ऑथराइज़ेशन कोड की वैल्यू के साथ PUT अनुरोध का इस्तेमाल किया जाता था.

ऑथराइज़ेशन एंडपॉइंट

आपके ऑथराइज़ेशन कोड एंडपॉइंट को इन यूआरएल क्वेरी स्ट्रिंग पैरामीटर वाले GET अनुरोधों को मैनेज करना होगा:

नाम	मान
authuser	उपयोगकर्ता के साइन इन की पुष्टि करने का अनुरोध
कोड	Google से जनरेट किया गया OAuth2 ऑथराइज़ेशन कोड
hd	उपयोगकर्ता खाते का होस्ट किया गया डोमेन
प्रॉम्प्ट	उपयोगकर्ता की सहमति वाला डायलॉग
दायरा	अनुमति पाने के लिए, स्पेस से अलग किए गए एक या उससे ज़्यादा OAuth2 दायरों की सूची
राज्य	CRSF स्टेटस वैरिएबल

auth-code नाम के एंडपॉइंट और example.com के होस्ट किए गए यूआरएल पैरामीटर के साथ GET अनुरोध का उदाहरण:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

जब ऑथराइज़ेशन कोड फ़्लो को पुरानी JavaScript लाइब्रेरी से शुरू किया जाता है या Google OAuth 2.0 एंडपॉइंट को सीधे कॉल करके शुरू किया जाता है, तो POST अनुरोध का इस्तेमाल किया जाता है.

POST अनुरोध का उदाहरण, जिसमें एचटीटीपी अनुरोध बॉडी में अनुमति कोड को पेलोड के तौर पर शामिल किया गया है:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

अहम जानकारी: पहले, अनुरोधों के लिए POST का इस्तेमाल किया जाता था. अपने हैंडलर को अपडेट करें, ताकि वह GET और POST, दोनों अनुरोधों को स्वीकार कर सके. इसके अलावा, अगर आपको पुरानी JS लाइब्रेरी का इस्तेमाल जारी रखना है या Google Identity Services लाइब्रेरी का इस्तेमाल करते समय सीधे Google OAuth 2.0 एंडपॉइंट को कॉल करना है, तो दो अलग-अलग एंडपॉइंट होस्ट करें.

अनुरोध की पुष्टि करना

सीएसआरएफ़ हमलों से बचने के लिए, अपने सर्वर पर ये काम करें.

रीडायरेक्ट मोड के लिए, state पैरामीटर की वैल्यू देखें.

पुष्टि करें कि X-Requested-With: XmlHttpRequest हेडर, पॉप-अप मोड के लिए सेट है.

इसके बाद, Google से रीफ़्रेश और ऐक्सेस टोकन पाने के लिए, सिर्फ़ तब आगे बढ़ें, जब आपने ऑथराइज़ेशन कोड के अनुरोध की पुष्टि कर ली हो.

ऐक्सेस और रीफ़्रेश टोकन पाना

जब आपके बैकएंड प्लैटफ़ॉर्म को Google से ऑथराइज़ेशन कोड मिल जाता है और वह अनुरोध की पुष्टि कर लेता है, तब एपीआई कॉल करने के लिए, Google से ऐक्सेस और रीफ़्रेश टोकन पाने के लिए ऑथराइज़ेशन कोड का इस्तेमाल करें.

वेब सर्वर ऐप्लिकेशन के लिए OAuth 2.0 का इस्तेमाल करना गाइड में दिए गए पांचवें चरण: रीफ़्रेश और ऐक्सेस टोकन के लिए ऑथराइज़ेशन कोड एक्सचेंज करना से शुरू करके, निर्देशों का पालन करें.

टोकन मैनेज करना

आपका प्लैटफ़ॉर्म, रीफ़्रेश टोकन को सुरक्षित तरीके से सेव करता है. उपयोगकर्ता खाते हटाए जाने पर या google.accounts.oauth2.revoke या सीधे https://myaccount.google.com/permissions से उपयोगकर्ता की सहमति रद्द करने पर, सेव किए गए रीफ़्रेश टोकन मिटाएं.

इसके अलावा, क्रॉस-खाता सुरक्षा की सुविधा से उपयोगकर्ता खातों को सुरक्षित करने के लिए, आरआईएससी का इस्तेमाल किया जा सकता है.

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