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

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

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

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

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

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

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

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

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

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

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

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

पुष्टि करने का कोड और सीएसआरएफ़ हैंडलिंग दिखाने वाला कोड स्निपेट देखने के लिए, कोई 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, यूआरएल कोड पैरामीटर में ऑथराइज़ेशन कोड शेयर कर रहा है. यहां की यात्रा पर हूं ऑथराइज़ेशन कोड पाएं:

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

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

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

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

नाम मान
पुष्टि करने वाला उपयोगकर्ता के साइन इन की पुष्टि करने का अनुरोध
कोड Google की ओर से जनरेट किया गया OAuth2 ऑथराइज़ेशन कोड
hd उपयोगकर्ता खाते का होस्ट किया गया डोमेन
मैसेज उपयोगकर्ता की सहमति वाला डायलॉग
दायरा अनुमति दिए जाने के लिए एक या ज़्यादा 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.

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

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

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

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

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