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

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

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

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

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

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

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

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

ऐसे क्लाइंट को शुरू करें जहां 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'
});

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

पॉप-अप मोड

ऐसे क्लाइंट को शुरू करें जहां उपयोगकर्ता, पॉप-अप डायलॉग में अनुमति देने की प्रोसेस शुरू करता है. सहमति मिलने के बाद, Google, उपयोगकर्ता के ब्राउज़र को अनुमति देने वाला कोड वापस भेजता है. इसके लिए, वह कॉलबैक फ़ंक्शन का इस्तेमाल करता है. JS कॉलबैक हैंडलर से मिला 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	उपयोगकर्ता के साइन-इन की पुष्टि करने का अनुरोध
कोड	Google से जनरेट किया गया OAuth2 ऑथराइज़ेशन कोड
hd	उपयोगकर्ता खाते का होस्ट किया गया डोमेन
prompt	उपयोगकर्ता की सहमति वाला डायलॉग बॉक्स
दायरा	OAuth2 के एक या उससे ज़्यादा स्कोप की स्पेस से अलग की गई सूची, जिन्हें अनुमति देनी है
राज्य	CRSF स्टेट वैरिएबल

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

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, दोनों तरह के अनुरोध स्वीकार कर सके. इसके अलावा, अगर आपको पुरानी JS लाइब्रेरी का इस्तेमाल जारी रखना है या Google Identity Services लाइब्रेरी का इस्तेमाल करते समय, सीधे 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 API को कॉल करेगा. अगर आपका वेब ऐप्लिकेशन, उपयोगकर्ता के ब्राउज़र से सीधे Google API को कॉल करेगा, तो आपको अपने वेब ऐप्लिकेशन के साथ ऐक्सेस टोकन शेयर करने का तरीका लागू करना होगा. ऐसा करना, इस गाइड के दायरे से बाहर है. इस तरीके का इस्तेमाल करते समय, JavaScript के लिए Google API क्लाइंट लाइब्रेरी का इस्तेमाल करें. साथ ही, gapi.client.SetToken() का इस्तेमाल करके, ब्राउज़र की मेमोरी में ऐक्सेस टोकन को कुछ समय के लिए सेव करें. इससे लाइब्रेरी, Google API को कॉल कर पाएगी.