Google One Tap को दिखाएं

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

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

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

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

प्रॉम्प्ट रेंडरिंग

उन सभी पेजों पर कोड स्निपेट डालें जहां आपको 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-context एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए, data-context: "signup" "इसमें साइन इन करें" को "इसमें साइन अप करें" में बदल देता है.

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

JavaScript

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

<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' "इसमें साइन इन करें" को "इसमें साइन अप करें" में बदल देता है.

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

प्रॉम्प्ट की स्थिति

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

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

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

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

    ऐसे में, हमारा सुझाव है कि आप अगले आइडेंटिटी प्रोवाइडर का इस्तेमाल करें.

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

एचटीएमएल

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 प्रॉम्प्ट, एक ही पेज पर एक साथ दिखाए जा सकते हैं.

एचटीएमएल

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

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

<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-index प्रॉपर्टी की दोबारा जांच करें, ताकि यह पक्का किया जा सके कि Google One Tap किसी भी समय किसी दूसरे कॉन्टेंट से ढका न हो. यूज़र एक्सपीरियंस फ़्लो में बदलाव तब भी ट्रिगर हो सकता है, जब बॉर्डर में सिर्फ़ एक पिक्सल कवर हो.

क्रेडेंशियल का रिस्पॉन्स

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

JS कॉलबैक

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

एचटीएमएल

<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 में से किसी एक का इस्तेमाल करें.

एचटीएमएल

<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'
});