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

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

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

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

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

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

  • GET अनुरोधों और यूआरएल पैरामीटर को स्वीकार करने के लिए, अपने मौजूदा एंडपॉइंट को अपडेट करें. इससे पहले, पेलोड में ऑथराइज़ेशन कोड की वैल्यू के साथ 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 एंडपॉइंट पर सीधे कॉल करके शुरू किया जाता है, तब POST अनुरोध का इस्तेमाल किया जाता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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