Google One Tap को दिखाएं

अपनी साइट पर One Tap प्रॉम्प्ट जोड़ें, ताकि उपयोगकर्ता आपके वेब ऐप्लिकेशन में साइन अप या साइन इन कर सकें. प्रॉम्प्ट को रेंडर और पसंद के मुताबिक बनाने के लिए, एचटीएमएल और JavaScript का इस्तेमाल करें.

ज़रूरी शर्तें

OAuth के लिए सहमति की स्क्रीन वाले सेक्शन को कॉन्फ़िगर करने, क्लाइंट आईडी पाने, और क्लाइंट लाइब्रेरी लोड करने के लिए, सेटअप में बताया गया तरीका अपनाएं.

अपने लॉगिन पेज पर, 'Google से साइन इन करें' बटन जोड़ें.

प्रॉम्प्ट रेंडर करना

कोड स्निपेट को उन सभी पेजों पर रखें जहां आपको One Tap दिखाना है.

HTML

One Tap प्रॉम्प्ट दिखाएं. साथ ही, JWT क्रेडेंशियल को लॉगिन एंडपॉइंट पर वापस भेजें.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

data-login_uri एट्रिब्यूट, आपके वेब ऐप्लिकेशन के लॉगिन एंडपॉइंट का यूआरआई है. आपके पास कस्टम डेटा एट्रिब्यूट जोड़ने का विकल्प होता है. इन्हें Google की ओर से जारी किए गए आईडी टोकन के साथ, आपके लॉगिन एंडपॉइंट पर भेजा जाता है.

ज़रूरी नहीं: data-skip_prompt_cookie एट्रिब्यूट और कुकी का इस्तेमाल करके, यह कंट्रोल करें कि स्टैटिक एचटीएमएल पेजों पर One Tap प्रॉम्प्ट दिखे या नहीं. इन पेजों पर, कॉन्टेंट में बदलाव नहीं किया जा सकता. अगर बताई गई कुकी सेट है, तो प्रॉम्प्ट नहीं दिखता.

प्रॉम्प्ट के टाइटल में इस्तेमाल किए गए टेक्स्ट को बदलने के लिए, data-context एट्रिब्यूट का इस्तेमाल करें. यह एट्रिब्यूट ज़रूरी नहीं है. उदाहरण के लिए, data-context: "signup" से "साइन इन करें" बदलकर "साइन अप करें" हो जाता है.

डिफ़ॉल्ट रूप से, अगर उपयोगकर्ता प्रॉम्प्ट के बाहर क्लिक करता है, तो One Tap प्रॉम्प्ट अपने-आप बंद हो जाता है. अगर data-cancel_on_tap_outside एट्रिब्यूट को 'false' पर सेट किया जाता है, तो इस सेटिंग को बंद किया जा सकता है.

साथ ही, काम करने वाले एट्रिब्यूट की पूरी सूची देखने के लिए, g_id_onload रेफ़रंस देखें.

JavaScript

One Tap प्रॉम्प्ट दिखाएं. साथ ही, JWT क्रेडेंशियल को ब्राउज़र के JavaScript कॉलबैक हैंडलर पर वापस भेजें.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

JavaScript में One Tap प्रॉम्प्ट को कॉन्फ़िगर करने के लिए, आपको सबसे पहले initialize() तरीके को कॉल करना होगा. इसके बाद, प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) दिखाने के लिए, prompt() तरीके को कॉल करें.

प्रॉम्प्ट के टाइटल में इस्तेमाल किए गए टेक्स्ट को बदलने के लिए, context फ़ील्ड का इस्तेमाल करें. यह फ़ील्ड ज़रूरी नहीं है. उदाहरण के लिए, context: 'signup' से "साइन इन करें" बदलकर "साइन अप करें" हो जाता है.

डिफ़ॉल्ट रूप से, अगर उपयोगकर्ता प्रॉम्प्ट के बाहर क्लिक करता है, तो One Tap प्रॉम्प्ट अपने-आप बंद हो जाता है. अगर cancel_on_tap_outside प्रॉपर्टी को 'false' पर सेट किया जाता है, तो इस सेटिंग को बंद किया जा सकता है.

डेटा के विकल्पों की पूरी सूची देखने के लिए, idConfiguration रेफ़रंस देखें.

प्रॉम्प्ट का स्टेटस

प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) के स्टेटस की सूचनाएं पाने के लिए, JavaScript कॉलबैक फ़ंक्शन का इस्तेमाल करें.

सूचनाएं इन स्थितियों में भेजी जाती हैं:

  • प्रॉम्प्ट दिखने की स्थिति: यह स्थिति, prompt() तरीके को कॉल करने के बाद होती है. सूचना में एक बूलियन वैल्यू होती है. इससे पता चलता है कि यूज़र इंटरफ़ेस (यूआई) दिख रहा है या नहीं.

  • प्रॉम्प्ट न दिखने की स्थिति: यह स्थिति तब होती है, जब One Tap प्रॉम्प्ट, अपने-आप या मैन्युअल तरीके से बंद हो जाता है. इसके अलावा, यह स्थिति तब भी होती है, जब Google क्रेडेंशियल जारी नहीं कर पाता. जैसे, चुनी गई सेशन से Google में साइन आउट होने पर.

    ऐसे में, हमारा सुझाव है कि अगर कोई अन्य आइडेंटिटी प्रोवाइडर उपलब्ध है, तो उसके साथ आगे बढ़ें.

  • प्रॉम्प्ट बंद होने की स्थिति: यह स्थिति तब होती है, जब Google क्रेडेंशियल को सफलतापूर्वक वापस पा लेता है या कोई उपयोगकर्ता क्रेडेंशियल वापस पाने की प्रोसेस को रोकना चाहता है. उदाहरण के लिए, जब उपयोगकर्ता लॉगिन डायलॉग में अपना उपयोगकर्ता नाम और पासवर्ड डालना शुरू करता है, तब google.accounts.id.cancel() तरीके को कॉल करके, One Tap प्रॉम्प्ट को बंद किया जा सकता है. साथ ही, प्रॉम्प्ट बंद होने की स्थिति को ट्रिगर किया जा सकता है.

HTML

JavaScript कॉलबैक फ़ंक्शन की जानकारी देने के लिए, data-moment_callback एट्रिब्यूट का इस्तेमाल करें. सूचनाएं पाने के लिए, कॉलबैक हैंडलर ज़रूरी है.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

उपयोगकर्ताओं को साइन इन या साइन अप करने में मदद करने के लिए, उपलब्ध क्रेडेंशियल ढूंढने के लिए, कई आइडेंटिटी प्रोवाइडर से संपर्क किया जा सकता है. आपको हमारे प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) के स्टेटस के बारे में पता होना चाहिए, ताकि अगले आइडेंटिटी प्रोवाइडर को कॉल किया जा सके.

JavaScript

अपने कॉलबैक हैंडलर को google.accounts.id.prompt में पैरामीटर के तौर पर पास करें. यहां सूचनाओं के अपडेट को मैनेज करने के लिए, ऐरो फ़ंक्शन का इस्तेमाल किया गया है.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

बटन और प्रॉम्प्ट

'Google से साइन इन करें' बटन और One Tap प्रॉम्प्ट, एक ही पेज पर एक साथ दिख सकते हैं.

HTML

g_id_onload और g_id_signin एलिमेंट, दोनों को शामिल करके, 'Google से साइन इन करें' बटन और One Tap प्रॉम्प्ट, दोनों को दिखाया जा सकता है.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

'Google से साइन इन करें' बटन और One Tap प्रॉम्प्ट दिखाने के लिए, renderButton() और prompt() फ़ंक्शन, दोनों को एक साथ कॉल करें.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

One Tap को कवर न करें

यह सेक्शन सिर्फ़ तब लागू होता है, जब FedCM बंद हो. अगर FedCM चालू है, तो ब्राउज़र, पेज के कॉन्टेंट के ऊपर उपयोगकर्ता के प्रॉम्प्ट दिखाता है.

यह पक्का करने के लिए कि असली उपयोगकर्ताओं को दिखाई गई सारी जानकारी दिखे, Google One Tap को किसी अन्य कॉन्टेंट से कवर नहीं किया जाना चाहिए. ऐसा न करने पर, कुछ मामलों में पॉप-अप विंडो ट्रिगर हो सकती हैं.

अपने पेज के लेआउट और एलिमेंट की z-इंडेक्स प्रॉपर्टी की दोबारा जांच करें, ताकि यह पक्का किया जा सके कि Google One Tap को किसी भी समय किसी अन्य कॉन्टेंट से कवर न किया जाए. बॉर्डर में सिर्फ़ एक पिक्सल के कवर होने पर भी, यूएक्स फ़्लो में बदलाव ट्रिगर हो सकता है.

क्रेडेंशियल का जवाब

क्रेडेंशियल के जवाब में, Google का साइन किया हुआ JWT शामिल होता है. जवाब को ब्राउज़र पर, JavaScript कॉलबैक फ़ंक्शन का इस्तेमाल करके या आपके प्लैटफ़ॉर्म पर, लॉगिन एंडपॉइंट पर रीडायरेक्ट करके वापस भेजा जाता है.

JS कॉलबैक

कॉलबैक को कॉन्फ़िगर करने के लिए, एचटीएमएल या JavaScript का इस्तेमाल करें.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

उदाहरण के लिए, handleCredentialResponse JWT को डिकोड करता है और आईडी टोकन के कुछ फ़ील्ड को कंसोल पर प्रिंट करता है.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

रीडायरेक्ट

अपने प्लैटफ़ॉर्म के लॉगिन एंडपॉइंट पर क्रेडेंशियल वापस भेजने के लिए, OAuth 2.0 वेब क्लाइंट की अनुमति वाले रीडायरेक्ट यूआरआई सेटिंग में यूआरएल जोड़ें.

रीडायरेक्ट यूआरआई को कॉन्फ़िगर करने के लिए, एचटीएमएल या JavaScript का इस्तेमाल करें.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});