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

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

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 क्लाइंट के लिए, अनुमति वाले रीडायरेक्ट यूआरआई में से किसी एक से पूरी तरह मैच होनी चाहिए. इसे Google Cloud Console में कॉन्फ़िगर किया गया है. यह रीडायरेक्ट यूआरआई की पुष्टि करने के नियमों के मुताबिक भी होनी चाहिए.

• पॉप-अप यूएक्स फ़्लो के लिए, ux_mode को popup पर सेट करें. साथ ही, callback की वैल्यू को उस फ़ंक्शन के नाम पर सेट करें जिसका इस्तेमाल, आपके प्लैटफ़ॉर्म को ऑथराइज़ेशन कोड भेजने के लिए किया जाएगा. redirect_uri की वैल्यू, डिफ़ॉल्ट रूप से उस पेज के ऑरिजिन पर सेट होती है जो initCodeClient को कॉल करता है. जब ऑथराइज़ेशन कोड को ऐक्सेस या रीफ़्रेश टोकन के लिए एक्सचेंज किया जाता है, तब फ़्लो इस वैल्यू का इस्तेमाल करता है. उदाहरण के लिए, https://www.example.com/index.html initCodeClient को कॉल करता है. साथ ही, ऑरिजिन: https://www.example.com, redirect_url की वैल्यू है.

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

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

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

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

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

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

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: 'https://oauth2.example.com/code',
  state: 'YOUR_BINDING_VALUE'
});

अहम जानकारी: आपके बैकएंड सर्7र पर मौजूद एक एंडपॉइंट, ऑथराइज़ेशन कोड को स्वीकार करता है और उसकी पुष्टि करता है. इसके बाद, इसे ऐक्सेस और रीफ़्रेश टोकन के लिए एक्सचेंज करता है.

पॉप-अप मोड

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

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', "https://oauth2.example.com/code", 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 से तय किया गया हैंडलर, उपयोगकर्ता के ब्राउज़र में चलता है. यह ऑथराइज़ेशन कोड को आपके प्लैटफ़ॉर्म पर होस्ट किए गए एंडपॉइंट पर रिले करता है.

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

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

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

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

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

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

RFC 6749 के मुताबिक, क्लाइंट को ऐसे रिस्पॉन्स पैरामीटर को अनदेखा करना होगा जिन्हें पहचाना नहीं जा सकता. भले ही, वे ऊपर दी गई टेबल में शामिल हों या न हों.

example.com पर होस्ट किए गए auth-code नाम के एंडपॉइंट के लिए, यूआरएल पैरामीटर के साथ 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 एंडपॉइंट को सीधे कॉल करके, ऑथराइज़ेशन कोड फ़्लो शुरू करने पर, Google एक POST अनुरोध भेजता है.

एचटीटीपी अनुरोध के मुख्य हिस्से में, पेलोड के तौर पर ऑथराइज़ेशन कोड वाला POST अनुरोध का उदाहरण:

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

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

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

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

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

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

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

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

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

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

ध्यान दें: पॉप-अप मोड का इस्तेमाल करने पर, पांचवें चरण और उसके बाद इस्तेमाल की जाने वाली redirect_uri की वैल्यू, कॉलिंग पेज का ऑरिजिन होती है. उदाहरण के लिए, https://www.example.com/index.html को कॉल करता है initCodeClient और ऑरिजिन: https://www.example.com की वैल्यू है redirect_url.

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

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

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

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