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

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

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

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

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

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

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

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

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

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

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

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

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

सीएसआरएफ़ हमलों को रोकना

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

पुष्टि करने वाला कोड और सीएसआरएफ़ हैंडलिंग वाला कोड स्निपेट देखने के लिए, UX मोड चुनें:

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

ऐसा क्लाइंट शुरू करें जहां 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 से तय किया गया हैंडलर, उपयोगकर्ता के ब्राउज़र में चल रहा है. यह ऑथराइज़ेशन कोड को आपके प्लैटफ़ॉर्म पर होस्ट किए गए एंडपॉइंट पर रिले करता है.

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

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

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

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

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

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

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

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

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

रीडायरेक्ट मोड के लिए, 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 को कॉल करने के लिए लाइब्रेरी को चालू करें.