इस रेफ़रंस पेज पर, 'Google से साइन इन करें' सुविधा के एचटीएमएल डेटा एट्रिब्यूट एपीआई के बारे में बताया गया है. इसका इस्तेमाल, वेब पेजों पर 'Google से साइन इन करें' बटन या One Tap प्रॉम्प्ट दिखाने के लिए किया जाता है.
"g_id_onload" आईडी वाला एलिमेंट
'Google से साइन इन करें' सुविधा के डेटा एट्रिब्यूट को किसी भी दिखने वाले या न दिखने वाले एलिमेंट में डाला जा सकता है. जैसे, <div> और <span>. इसके लिए, एलिमेंट आईडी को g_id_onload पर सेट करना ज़रूरी है. इस आईडी को एक से ज़्यादा एलिमेंट पर न डालें.
डेटा एट्रिब्यूट
यहां दी गई टेबल में, डेटा एट्रिब्यूट और उनके ब्यौरे दिए गए हैं:
| एट्रिब्यूट | |
|---|---|
data-client_id |
आपके ऐप्लिकेशन का क्लाइंट आईडी |
data-color_scheme |
One Tap प्रॉम्प्ट पर लागू की गई कलर स्कीम. |
data-auto_prompt |
Google One Tap को दिखाना. |
data-auto_select |
Google One Tap पर अपने-आप चुनने की सुविधा चालू करता है. |
data-login_uri |
आपके लॉगिन एंडपॉइंट का यूआरएल |
data-callback |
JavaScript आईडी टोकन हैंडलर फ़ंक्शन का नाम |
data-native_login_uri |
आपके पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट का यूआरएल |
data-native_callback |
JavaScript पासवर्ड क्रेडेंशियल हैंडलर फ़ंक्शन का नाम |
data-native_id_param |
credential.id वैल्यू के लिए पैरामीटर का नाम |
data-native_password_param |
credential.password वैल्यू के लिए पैरामीटर का नाम |
data-cancel_on_tap_outside |
इससे यह कंट्रोल किया जाता है कि अगर उपयोगकर्ता प्रॉम्प्ट के बाहर क्लिक करता है, तो प्रॉम्प्ट को रद्द करना है या नहीं. |
data-prompt_parent_id |
One Tap प्रॉम्प्ट कंटेनर एलिमेंट का डीओएम आईडी |
data-skip_prompt_cookie |
अगर तय की गई कुकी की वैल्यू खाली नहीं है, तो One Tap को स्किप कर देता है. |
data-nonce |
आईडी टोकन के लिए रैंडम स्ट्रिंग |
data-essential_claims |
Google से मिले आईडी टोकन में शामिल किए जाने वाले अतिरिक्त दावे. |
data-context |
One Tap प्रॉम्प्ट में मौजूद टाइटल और शब्द |
data-moment_callback |
प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) के स्टेटस की सूचना सुनने वाले फ़ंक्शन का नाम |
data-state_cookie_domain |
अगर आपको पैरंट डोमेन और उसके सबडोमेन में One Tap को कॉल करना है, तो इस एट्रिब्यूट में पैरंट डोमेन को पास करें, ताकि शेयर की गई एक कुकी का इस्तेमाल किया जा सके. |
data-ux_mode |
'Google से साइन इन करें' बटन का उपयोगकर्ता अनुभव (UX) फ़्लो |
data-allowed_parent_origin |
ऐसे ऑरिजिन जिन्हें इंटरमीडिएट iframe को एम्बेड करने की अनुमति है. अगर यह एट्रिब्यूट मौजूद है, तो One Tap इंटरमीडिएट iframe मोड में चलता है. |
data-intermediate_iframe_close_callback |
जब उपयोगकर्ता मैन्युअल तरीके से One Tap को बंद करते हैं, तो यह डिफ़ॉल्ट इंटरमीडिएट iframe के व्यवहार को बदल देता है. |
data-itp_support |
आईटीपी ब्राउज़र पर, One Tap के अपग्रेड किए गए उपयोगकर्ता अनुभव को चालू करता है. |
data-login_hint |
उपयोगकर्ता के बारे में जानकारी देकर, खाता चुनने की प्रोसेस को स्किप करें. |
data-hd |
डोमेन के हिसाब से, खाता चुनने की सुविधा को सीमित करें. |
data-use_fedcm_for_prompt |
ब्राउज़र को उपयोगकर्ता के साइन-इन के लिए अनुरोधों को कंट्रोल करने और आपकी वेबसाइट और Google के बीच साइन-इन फ़्लो को मैनेज करने की अनुमति दें. |
data-use_fedcm_for_button |
इस फ़ील्ड से यह तय होता है कि Chrome पर FedCM बटन उपयोगकर्ता अनुभव का इस्तेमाल किया जाना चाहिए या नहीं. यह सुविधा, डेस्कटॉप के लिए Chrome 125 और इसके बाद के वर्शन और Android के लिए Chrome 128 और इसके बाद के वर्शन पर उपलब्ध है. डिफ़ॉल्ट रूप से, false पर सेट होता है. |
data-button_auto_select |
FedCM बटन फ़्लो के लिए, अपने-आप चुनने का विकल्प चालू करना है या नहीं. अगर यह सुविधा चालू है, तो Google सेशन चालू होने पर, लौटने वाले उपयोगकर्ताओं को अपने-आप साइन इन कर दिया जाएगा. इसके लिए, उन्हें खाता चुनने की सुविधा का प्रॉम्प्ट नहीं दिखेगा. डिफ़ॉल्ट वैल्यू false है. |
एट्रिब्यूट टाइप
यहां दिए गए सेक्शन में, हर तरह के एट्रिब्यूट और उनके उदाहरण के बारे में जानकारी दी गई है.
data-client_id
यह एट्रिब्यूट आपके ऐप्लिकेशन का क्लाइंट आईडी होता है. इसे Google Cloud Console में ढूंढा और बनाया जाता है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | हां | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
data-color_scheme
इस फ़ील्ड में, One Tap प्रॉम्प्ट पर लागू की गई कलर स्कीम की जानकारी होती है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | ज़रूरी नहीं. यह डिफ़ॉल्ट रूप से, उपयोगकर्ताओं के सिस्टम की डिफ़ॉल्ट कलर स्कीम पर सेट होता है. | data-color_scheme="dark" |
यहां दी गई टेबल में, उपलब्ध कलर स्कीम और उनके बारे में जानकारी दी गई है.
| कलर स्कीम | |
|---|---|
default |
उपयोगकर्ता के सिस्टम की डिफ़ॉल्ट कलर स्कीम लागू करें. उपयोगकर्ता की पसंद के हिसाब से, स्कीम हल्की या गहरे रंग की हो सकती है. |
light |
हल्के रंग वाली कलर स्कीम लागू करें. |
dark |
गहरे रंग वाली कलर स्कीम लागू करना. |
data-auto_prompt
इस एट्रिब्यूट से यह तय होता है कि One Tap को दिखाना है या नहीं. डिफ़ॉल्ट वैल्यू true है. अगर यह वैल्यू false है, तो Google One टैप नहीं दिखता. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| बूलियन | वैकल्पिक | data-auto_prompt="true" |
data-auto_select
यह एट्रिब्यूट तय करता है कि आईडी टोकन अपने-आप दिखाया जाए या नहीं.
अगर सिर्फ़ एक Google सेशन ने आपके ऐप्लिकेशन को अनुमति दी है, तो उपयोगकर्ता के इंटरैक्शन के बिना ही आईडी टोकन दिखाया जाएगा.
डिफ़ॉल्ट वैल्यू false है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| बूलियन | वैकल्पिक | data-auto_select="true" |
data-login_uri
यह एट्रिब्यूट, आपके लॉगिन एंडपॉइंट का यूआरआई होता है.
यह वैल्यू, OAuth 2.0 क्लाइंट के लिए अनुमति वाले किसी एक रीडायरेक्ट यूआरआई से पूरी तरह मैच होनी चाहिए. इसे आपने Google Auth Platform में कॉन्फ़िगर किया है. साथ ही, यह हमारे रीडायरेक्ट यूआरआई की पुष्टि करने के नियमों के मुताबिक होनी चाहिए.
अगर मौजूदा पेज आपका लॉगिन पेज है, तो इस एट्रिब्यूट को छोड़ा जा सकता है. ऐसे में, क्रेडेंशियल को डिफ़ॉल्ट रूप से इस पेज पर पोस्ट किया जाता है.
जब कोई कॉलबैक फ़ंक्शन तय नहीं किया जाता है और कोई उपयोगकर्ता 'Google से साइन इन करें' या One Tap बटन पर क्लिक करता है या अपने-आप साइन इन होने की सुविधा चालू होती है, तो आईडी टोकन क्रेडेंशियल रिस्पॉन्स आपके लॉगिन एंडपॉइंट पर पोस्ट किया जाता है.
यह ज़रूरी है कि आपका लॉगिन एंडपॉइंट, पोस्ट अनुरोधों को मैनेज कर सके. इन अनुरोधों में, credential पैरामीटर होना चाहिए. साथ ही, इस पैरामीटर की बॉडी में आईडी टोकन की वैल्यू होनी चाहिए.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | वैकल्पिक | उदाहरण |
|---|---|---|
| URL | यह डिफ़ॉल्ट रूप से, मौजूदा पेज के यूआरआई या आपकी तय की गई वैल्यू पर सेट होता है.data-ux_mode="popup" और
data-callback सेट होने पर, इसे अनदेखा किया जाता है. |
data-login_uri="https://www.example.com/login" |
data-callback
यह एट्रिब्यूट, उस JavaScript फ़ंक्शन का नाम है जो मिले आईडी टोकन को मैनेज करता है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | अगर data-login_uri सेट नहीं है, तो यह ज़रूरी है. |
data-callback="handleToken" |
data-login_uri और data-callback एट्रिब्यूट में से किसी एक का इस्तेमाल किया जा सकता है. यह इन कॉम्पोनेंट और यूएक्स मोड कॉन्फ़िगरेशन पर निर्भर करता है:
'Google से साइन इन करें' बटन के
redirectयूएक्स मोड के लिए,data-login_uriएट्रिब्यूट ज़रूरी है. यह मोड,data-callbackएट्रिब्यूट को अनदेखा करता है.Google One Tap और Google साइन-इन बटन
popupयूएक्स मोड के लिए, इनमें से कोई एक एट्रिब्यूट सेट करना ज़रूरी है. अगर दोनों एट्रिब्यूट सेट हैं, तोdata-callbackएट्रिब्यूट को ज़्यादा प्राथमिकता दी जाती है.
एचटीएमएल एपीआई, नेमस्पेस में मौजूद JavaScript फ़ंक्शन के साथ काम नहीं करता.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए, mylib.callback के बजाय mylibCallback का इस्तेमाल करें.
कॉलबैक फ़ंक्शन को पैरामीटर के तौर पर CredentialResponse ऑब्जेक्ट पास किया जाता है.
संभावित रिस्पॉन्स वैल्यू की जानकारी के लिए, CredentialResponse देखें.
data-native_login_uri
यह एट्रिब्यूट, आपके पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट का यूआरएल होता है. अगर आपने data-native_login_uri एट्रिब्यूट या data-native_callback एट्रिब्यूट सेट किया है, तो Google सेशन न होने पर JavaScript लाइब्रेरी, पहले से मौजूद क्रेडेंशियल मैनेजर का इस्तेमाल करती है. data-native_callback और data-native_login_uri, दोनों एट्रिब्यूट की वैल्यू सेट करने की अनुमति नहीं है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-login_uri="https://www.example.com/password_login" |
data-native_callback
यह एट्रिब्यूट, उस JavaScript फ़ंक्शन का नाम है जो ब्राउज़र के पहले से मौजूद Credential Manager से मिले पासवर्ड क्रेडेंशियल को मैनेज करता है. अगर आपने data-native_login_uri एट्रिब्यूट या data-native_callback एट्रिब्यूट में से किसी एक को सेट किया है, तो Google सेशन न होने पर, JavaScript लाइब्रेरी पहले से मौजूद क्रेडेंशियल मैनेजर का इस्तेमाल करती है. आपको data-native_callback और data-native_login_uri, दोनों को सेट करने की अनुमति नहीं है. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-native_callback="handlePasswordCredential" |
एचटीएमएल एपीआई, नेमस्पेस में मौजूद JavaScript फ़ंक्शन के साथ काम नहीं करता.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए, mylib.callback के बजाय mylibCallback का इस्तेमाल करें.
data-native_id_param
पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट पर पासवर्ड क्रेडेंशियल सबमिट करते समय, credential.id फ़ील्ड के लिए पैरामीटर का नाम तय किया जा सकता है. डिफ़ॉल्ट नाम email है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| URL | वैकल्पिक | data-native_id_param="user_id" |
data-native_password_param
पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट पर पासवर्ड क्रेडेंशियल सबमिट करते समय, credential.password वैल्यू के लिए पैरामीटर का नाम तय किया जा सकता है. डिफ़ॉल्ट नाम password है. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| URL | वैकल्पिक | data-native_password_param="pwd" |
data-cancel_on_tap_outside
इस एट्रिब्यूट से यह सेट किया जाता है कि अगर उपयोगकर्ता प्रॉम्प्ट के बाहर क्लिक करता है, तो One Tap अनुरोध को रद्द करना है या नहीं. डिफ़ॉल्ट वैल्यूtrue है इसे बंद करने के लिए, वैल्यू को false पर सेट करें. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| बूलियन | वैकल्पिक | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
यह एट्रिब्यूट, कंटेनर एलिमेंट का डीओएम आईडी सेट करता है. अगर इसे सेट नहीं किया जाता है, तो विंडो के सबसे ऊपर दाएं कोने में One Tap प्रॉम्प्ट दिखता है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
यह कुकी का इस्तेमाल करके, One Tap प्रॉम्प्ट के डिसप्ले को कंट्रोल करता है. अगर इस एट्रिब्यूट से तय की गई कुकी की वैल्यू खाली नहीं है, तो प्रॉम्प्ट नहीं दिखाया जाता. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-skip_prompt_cookie="SID" |
data-nonce
यह एट्रिब्यूट एक रैंडम स्ट्रिंग है. इसका इस्तेमाल आईडी टोकन, रीप्ले अटैक को रोकने के लिए करता है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-nonce="biaqbm70g23" |
नॉन्स की लंबाई, आपके एनवायरमेंट में JWT के लिए तय किए गए ज़्यादा से ज़्यादा साइज़ के हिसाब से सीमित होती है. साथ ही, यह अलग-अलग ब्राउज़र और सर्वर के एचटीटीपी साइज़ की सीमाओं के हिसाब से भी सीमित होती है.
data-essential_claims
यह एट्रिब्यूट एक स्ट्रिंग है. इसका इस्तेमाल, Google से मिले आईडी टोकन में अतिरिक्त दावे शामिल करने का अनुरोध करने के लिए किया जाता है. Google की ओर से स्वीकार किए जाने वाले दावों की पूरी सूची देखने के लिए, स्वीकार किए जाने वाले दावे देखें.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-essential_claims="auth_time, amr" |
डेटा-कॉन्टेक्स्ट
इस फ़ील्ड से, One Tap प्रॉम्प्ट में दिखने वाले टाइटल और मैसेज के टेक्स्ट में बदलाव होता है. हालांकि, आईटीपी ब्राउज़र पर इसका कोई असर नहीं पड़ता. डिफ़ॉल्ट रूप से, यह signin पर सेट होता है.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-context="use" |
यहां दी गई टेबल में, उपलब्ध सभी कॉन्टेक्स्ट और उनके ब्यौरे दिए गए हैं:
| कॉन्टेक्स्ट | |
|---|---|
signin |
"इसमें साइन इन करें" |
signup |
"साइन अप करें" |
use |
"इस्तेमाल करें" |
data-moment_callback
यह एट्रिब्यूट, प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) के स्टेटस की सूचना देने वाले लिसनर का फ़ंक्शन नेम है. ज़्यादा जानकारी के लिए, डेटा टाइप PromptMomentNotification देखें.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-moment_callback="logMomentNotification" |
एचटीएमएल एपीआई, नेमस्पेस में मौजूद JavaScript फ़ंक्शन के साथ काम नहीं करता.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए, mylib.callback के बजाय mylibCallback का इस्तेमाल करें.
data-state_cookie_domain
अगर आपको One Tap को पैरंट डोमेन और उसके सबडोमेन में दिखाना है, तो इस एट्रिब्यूट में पैरंट डोमेन की जानकारी दें. इससे, शेयर की गई एक ही कुकी का इस्तेमाल किया जा सकेगा. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-state_cookie_domain="example.com" |
data-ux_mode
यह एट्रिब्यूट, 'Google से साइन इन करें' बटन के लिए इस्तेमाल किए जाने वाले यूएक्स फ़्लो को सेट करता है. डिफ़ॉल्ट वैल्यू popup होती है. इस एट्रिब्यूट का One Tap यूएक्स पर कोई असर नहीं पड़ता. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-ux_mode="redirect" |
यहां दी गई टेबल में, उपलब्ध यूएक्स मोड और उनके बारे में जानकारी दी गई है.
| UX मोड | |
|---|---|
popup |
पॉप-अप विंडो में साइन-इन यूएक्स फ़्लो को पूरा करता है. |
redirect |
पूरे पेज को रीडायरेक्ट करके, साइन-इन यूएक्स फ़्लो को पूरा करता है. |
data-allowed_parent_origin
ऐसे ऑरिजिन जिन्हें इंटरमीडिएट iframe को एम्बेड करने की अनुमति है. अगर यह एट्रिब्यूट मौजूद है, तो One Tap इंटरमीडिएट iframe मोड में चलता है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग या स्ट्रिंग अरे | वैकल्पिक | data-allowed_parent_origin="https://example.com" |
यहां दी गई टेबल में, इस्तेमाल की जा सकने वाली वैल्यू टाइप और उनके ब्यौरे दिए गए हैं.
| वैल्यू टाइप | ||
|---|---|---|
string |
एक डोमेन यूआरआई. | "https://example.com" |
string array |
कॉमा लगाकर अलग किए गए डोमेन यूआरआई की सूची. | "https://news.example.com,https://local.example.com" |
अगर data-allowed_parent_origin एट्रिब्यूट की वैल्यू अमान्य है, तो इंटरमीडिएट iframe मोड का वन टैप शुरू नहीं हो पाएगा और रुक जाएगा.
वाइल्डकार्ड प्रीफ़िक्स भी इस्तेमाल किए जा सकते हैं. उदाहरण के लिए, "https://*.example.com", example.com और इसके सभी लेवल के सबडोमेन से मैच करता है.जैसे, news.example.com, login.news.example.com. वाइल्डकार्ड का इस्तेमाल करते समय इन बातों का ध्यान रखें:
- पैटर्न स्ट्रिंग में सिर्फ़ वाइल्डकार्ड और टॉप लेवल डोमेन नहीं हो सकता. उदाहरण के लिए,
https://.comऔरhttps://.co.ukअमान्य हैं, क्योंकि"https://.example.com",example.comऔर इसके सभी सबडोमेन से मैच करता है. दो अलग-अलग डोमेन दिखाने के लिए, कॉमा लगाकर अलग की गई सूची का इस्तेमाल करें. उदाहरण के लिए,"https://example1.com,https://.example2.com",example1.com,example2.comडोमेन औरexample2.comके सबडोमेन से मेल खाता है - वाइल्डकार्ड डोमेन, सुरक्षित https:// स्कीम से शुरू होने चाहिए. इसलिए,
"*.example.com"को अमान्य माना जाता है.
data-intermediate_iframe_close_callback
जब उपयोगकर्ता One Tap के यूज़र इंटरफ़ेस (यूआई) में 'X' बटन पर टैप करके, One Tap को मैन्युअल तरीके से बंद करते हैं, तब यह इंटरमीडिएट iframe के डिफ़ॉल्ट व्यवहार को बदल देता है. डिफ़ॉल्ट रूप से, इंटरमीडिएट iframe को डीओएम से तुरंत हटा दिया जाता है.
data-intermediate_iframe_close_callback फ़ील्ड सिर्फ़ इंटरमीडिएट iframe मोड में लागू होता है. साथ ही, इसका असर सिर्फ़ इंटरमीडिएट iframe पर पड़ता है, न कि One Tap iframe पर. कॉलबैक को शुरू करने से पहले, One Tap यूज़र इंटरफ़ेस (यूआई) को हटा दिया जाता है.
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| फ़ंक्शन | वैकल्पिक | data-intermediate_iframe_close_callback="logBeforeClose" |
एचटीएमएल एपीआई, नेमस्पेस में मौजूद JavaScript फ़ंक्शन के साथ काम नहीं करता.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए, mylib.callback के बजाय mylibCallback का इस्तेमाल करें.
data-itp_support
इस फ़ील्ड से यह तय होता है कि इंटेलिजेंट ट्रैकिंग प्रिवेंशन (आईटीपी) की सुविधा के साथ काम करने वाले ब्राउज़र पर, अपग्रेड किया गया One Tap यूएक्स चालू किया जाना चाहिए या नहीं. डिफ़ॉल्ट वैल्यू false है. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| बूलियन | वैकल्पिक | data-itp_support="false" |
data-login_hint
अगर आपके ऐप्लिकेशन को पहले से पता है कि किस उपयोगकर्ता को साइन इन करना चाहिए, तो वह Google को लॉगिन करने का संकेत दे सकता है. अगर यह प्रोसेस पूरी हो जाती है, तो खाता चुनने की प्रोसेस को स्किप कर दिया जाता है. स्वीकार की जाने वाली वैल्यू: कोई ईमेल पता या आईडी टोकन का sub फ़ील्ड.
ज़्यादा जानकारी के लिए, login_hint के लिए OpenID Connect का दस्तावेज़ देखें.
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
स्ट्रिंग. यह कोई ईमेल पता या आईडी टोकन के sub फ़ील्ड की वैल्यू हो सकती है. |
वैकल्पिक | data-login_hint="elisa.beckett@gmail.com" |
data-hd
अगर किसी उपयोगकर्ता के पास एक से ज़्यादा खाते हैं और उसे सिर्फ़ अपने Workspace खाते से साइन-इन करना है, तो Google को डोमेन नेम का हिंट देने के लिए इसका इस्तेमाल करें. ऐसा होने पर, खाता चुनते समय दिखने वाले उपयोगकर्ता खाते, दिए गए डोमेन तक ही सीमित होते हैं.
वाइल्डकार्ड वैल्यू: *, उपयोगकर्ता को सिर्फ़ Workspace खाते उपलब्ध कराती है. साथ ही, खाता चुनते समय उपभोक्ता खातों (user@gmail.com) को शामिल नहीं करती.
ज़्यादा जानकारी के लिए, hd के लिए OpenID Connect का दस्तावेज़ देखें.
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग. पूरी तरह क्वालिफ़ाइड डोमेन नेम या *. | वैकल्पिक | data-hd="*" |
data-use_fedcm_for_prompt
ब्राउज़र को उपयोगकर्ता के साइन-इन के अनुरोधों को कंट्रोल करने और आपकी वेबसाइट और Google के बीच साइन-इन फ़्लो को मैनेज करने की अनुमति दें. डिफ़ॉल्ट तौर पर, यह 'गलत' पर सेट होती है. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करें पेज देखें.
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| बूलियन | बहिष्कृत | data-use_fedcm_for_prompt="true" |
data-use_fedcm_for_button
इस फ़ील्ड से यह तय होता है कि Chrome (डेस्कटॉप M125 और इसके बाद के वर्शन और Android M128 और इसके बाद के वर्शन) पर, FedCM बटन उपयोगकर्ता अनुभव का इस्तेमाल किया जाना चाहिए या नहीं. डिफ़ॉल्ट रूप से, false पर सेट होता है. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| बूलियन | वैकल्पिक | data-use_fedcm_for_button="true" |
data-button_auto_select
इस फ़ील्ड से यह तय होता है कि FedCM बटन फ़्लो के लिए, अपने-आप चुनने का विकल्प चालू करना है या नहीं. अगर यह सुविधा चालू है, तो Google सेशन में पहले से साइन इन कर चुके लौटने वाले उपयोगकर्ता, अपने-आप साइन इन हो जाएंगे. उन्हें खाता चुनने की सुविधा वाला प्रॉम्प्ट नहीं दिखेगा. डिफ़ॉल्ट रूप से, यह false पर सेट होता है. ऑप्ट-इन लॉन्च के दौरान, आपको बटन की मदद से ऑटो-साइन-इन की सुविधा को साफ़ तौर पर चालू करना होगा. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| बूलियन | वैकल्पिक | data-button_auto_select="true" |
"g_id_signin" क्लास वाला एलिमेंट
अगर किसी एलिमेंट के class एट्रिब्यूट में g_id_signin जोड़ा जाता है, तो वह एलिमेंट 'Google से साइन इन करें' बटन के तौर पर रेंडर होता है.
एक ही पेज पर, 'Google से साइन इन करें' सुविधा के कई बटन रेंडर किए जा सकते हैं. हर बटन की अपनी विज़ुअल सेटिंग हो सकती हैं. इन सेटिंग को डेटा के इन एट्रिब्यूट से तय किया जाता है.
विज़ुअल डेटा एट्रिब्यूट
यहां दी गई टेबल में, विज़ुअल डेटा एट्रिब्यूट और उनके ब्यौरे दिए गए हैं:
| एट्रिब्यूट | |
|---|---|
data-type |
बटन का टाइप: आइकॉन या स्टैंडर्ड बटन. |
data-theme |
बटन की थीम. उदाहरण के लिए, filled_blue या filled_black. |
data-size |
बटन का साइज़. उदाहरण के लिए, छोटा या बड़ा. |
data-text |
बटन का टेक्स्ट. उदाहरण के लिए, "Google से साइन इन करें" या "Google से साइन अप करें". |
data-shape |
बटन का आकार. उदाहरण के लिए, रेक्टैंगल या सर्कल. |
data-logo_alignment |
Google के लोगो का अलाइनमेंट: बाईं ओर या बीच में. |
data-width |
पिक्सल में बटन की चौड़ाई. |
data-locale |
बटन का टेक्स्ट, इस एट्रिब्यूट में सेट की गई भाषा में रेंडर होता है. |
data-click_listener |
अगर यह सेट है, तो 'Google से साइन इन करें' बटन पर क्लिक करने पर, यह फ़ंक्शन कॉल किया जाता है. |
data-state |
अगर यह स्ट्रिंग सेट की जाती है, तो यह आईडी टोकन के साथ दिखती है. |
एट्रिब्यूट टाइप
यहां दिए गए सेक्शन में, हर एट्रिब्यूट के टाइप और उदाहरण के बारे में जानकारी दी गई है.
data-type
बटन का टाइप. डिफ़ॉल्ट वैल्यूstandard है ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | हां | data-type="icon" |
इस टेबल में, उपलब्ध सभी बटन टाइप और उनकी जानकारी दी गई है:
| टाइप | |
|---|---|
standard |
|
icon |
|
data-theme
बटन की थीम. डिफ़ॉल्ट वैल्यूoutline है ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-theme="filled_blue" |
यहां दी गई टेबल में, उपलब्ध थीम और उनके बारे में जानकारी दी गई है:
| थीम | सैंपल | विशेषताएं |
|---|---|---|
outline |
|
Fill: #FFFFFF Stroke: #747775 | 1px | inside Font: #1F1F1F | Roboto Medium | 14/20 Personalized: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13 |
filled_blue |
|
Fill: #0B57D0 Stroke: #OB57D0 | 1px | inside Font: #FFFFFF | Google Sans Medium | 14/20 Personalized: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13 |
filled_black |
|
फ़िल: #202124 स्ट्रोक: #OB57D0 | 1px | अंदर फ़ॉन्ट: #FFFFFF | Google Sans Medium | 14/20 पसंद के मुताबिक: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13 |
outline_dark |
|
Fill: #131314 Stroke: #8E918F | 1px | inside Font: #FFFFFF | Google Sans Medium | 14/20 Personalized: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13 |
डेटा-साइज़
बटन का साइज़. डिफ़ॉल्ट वैल्यूlarge है ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-size="small" |
यहां दी गई टेबल में, बटन के उपलब्ध साइज़ और उनके ब्यौरे दिए गए हैं.
| साइज़ | |
|---|---|
large |
|
medium |
|
small |
|
डेटा-टेक्स्ट
बटन का टेक्स्ट. डिफ़ॉल्ट वैल्यूsignin_with है अलग-अलग data-text एट्रिब्यूट वाले आइकॉन बटन के टेक्स्ट में, विज़ुअल के तौर पर कोई अंतर नहीं होता. हालांकि, स्क्रीन सुलभता के लिए टेक्स्ट को पढ़ने के दौरान ऐसा नहीं होता.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-text="signup_with" |
यहां दी गई टेबल में, बटन के लिए उपलब्ध टेक्स्ट और उनके बारे में जानकारी दी गई है:
| टेक्स्ट | |
|---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
|
डेटा-शेप
बटन का आकार. डिफ़ॉल्ट वैल्यूrectangular है ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-shape="rectangular" |
यहां दी गई टेबल में, बटन के उपलब्ध शेप और उनके बारे में जानकारी दी गई है:
| आकार | |
|---|---|
rectangular |
icon बटन टाइप के लिए किया जाता है, तो यह square जैसा ही होता है.
|
pill |
icon बटन टाइप के लिए किया जाता है, तो यह circle जैसा ही होता है.
|
circle |
standard बटन टाइप के लिए किया जाता है, तो यह pill जैसा ही होता है.
|
square |
standard बटन टाइप के लिए किया जाता है, तो यह rectangular जैसा ही होता है.
|
data-logo_alignment
Google के लोगो का अलाइनमेंट. डिफ़ॉल्ट वैल्यूleft है यह एट्रिब्यूट सिर्फ़ standard बटन टाइप पर लागू होता है. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-logo_alignment="center" |
यहां दी गई टेबल में, उपलब्ध अलाइनमेंट और उनके ब्यौरे दिए गए हैं:
| logo_alignment | |
|---|---|
left |
|
center |
|
data-width
पिक्सल में, बटन की कम से कम चौड़ाई. ज़्यादा से ज़्यादा 400 पिक्सल की चौड़ाई उपलब्ध है.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-width=400 |
data-locale
ज़रूरी नहीं. बटन का टेक्स्ट, तय की गई स्थान-भाषा के हिसाब से दिखाएं. ऐसा न होने पर, उपयोगकर्ता के Google खाते या ब्राउज़र सेटिंग के हिसाब से डिफ़ॉल्ट रूप से दिखाएं. लाइब्रेरी लोड करते समय, src डायरेक्टिव में hl पैरामीटर और भाषा कोड जोड़ें. उदाहरण के लिए: gsi/client?hl=<iso-639-code>.
अगर इसे सेट नहीं किया जाता है, तो ब्राउज़र की डिफ़ॉल्ट भाषा या Google सेशन के उपयोगकर्ता की पसंद का इस्तेमाल किया जाता है. इसलिए, अलग-अलग उपयोगकर्ताओं को स्थानीय भाषा में बटन के अलग-अलग वर्शन दिख सकते हैं. साथ ही, हो सकता है कि बटन के साइज़ भी अलग-अलग हों.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-locale="zh_CN" |
data-click_listener
data-click_listener एट्रिब्यूट का इस्तेमाल करके, JavaScript फ़ंक्शन को तय किया जा सकता है. इससे, 'Google से साइन इन करें' बटन पर क्लिक करने पर, यह फ़ंक्शन कॉल किया जाएगा.
<script>
function onClickHandler(){
console.log("Sign in with Google button clicked...")
}
</script>
.....
<div class="g_id_signin"
data-size="large"
data-theme="outline"
data-click_listener="onClickHandler">
</div>इस उदाहरण में, 'Google से साइन इन करें' बटन पर क्लिक करने पर, कंसोल में 'Google से साइन इन करें' बटन पर क्लिक किया गया... मैसेज लॉग किया जाता है.
data-state
ज़रूरी नहीं है. एक ही पेज पर, 'Google से साइन इन करें' सुविधा के कई बटन रेंडर किए जा सकते हैं. हर बटन को एक यूनीक स्ट्रिंग असाइन की जा सकती है. आईडी टोकन के साथ वही स्ट्रिंग दिखेगी. इससे आपको यह पहचानने में मदद मिलेगी कि उपयोगकर्ता ने साइन इन करने के लिए किस बटन पर क्लिक किया था.
ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
| टाइप | ज़रूरी है | उदाहरण |
|---|---|---|
| स्ट्रिंग | वैकल्पिक | data-state="button 1" |
सर्वर-साइड इंटिग्रेशन
आपके सर्वर-साइड एंडपॉइंट को इन एचटीटीपी POST अनुरोधों को मैनेज करना होगा.
आईडी टोकन हैंडलर एंडपॉइंट
आईडी टोकन हैंडलर एंडपॉइंट, आईडी टोकन को प्रोसेस करता है. संबंधित खाते की स्थिति के आधार पर, उपयोगकर्ता को साइन इन कराया जा सकता है. इसके बाद, उसे साइन-अप पेज पर रीडायरेक्ट किया जा सकता है. इसके अलावा, ज़्यादा जानकारी के लिए उसे खाते को लिंक करने वाले पेज पर भी रीडायरेक्ट किया जा सकता है. क्लाइंट को ऐसे रिस्पॉन्स पैरामीटर को अनदेखा करना चाहिए जिनकी पहचान नहीं हुई है.
आपके लॉगिन एंडपॉइंट के लिए अनुरोध का एक उदाहरण:
POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com
credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>
एचटीटीपी POST अनुरोध में यह जानकारी शामिल होती है:
| फ़ॉर्मैट | नाम | ब्यौरा |
|---|---|---|
| कुकी | g_csrf_token |
एक रैंडम स्ट्रिंग जो data-login_uri से तय किए गए लॉगिन एंडपॉइंट के हर अनुरोध के साथ बदलती है. यह स्ट्रिंग, g_csrf_token अनुरोध पैरामीटर की वैल्यू से मैच होनी चाहिए. |
| अनुरोध का पैरामीटर | g_csrf_token |
एक रैंडम स्ट्रिंग जो data-login_uri से तय किए गए लॉगिन एंडपॉइंट के हर अनुरोध के साथ बदलती है. यह स्ट्रिंग, g_csrf_token कुकी की वैल्यू से मैच होनी चाहिए. |
| अनुरोध का पैरामीटर | credential |
Google की ओर से जारी किया गया एन्कोड किया गया JWT आईडी टोकन. |
| अनुरोध का पैरामीटर | state |
यह पैरामीटर सिर्फ़ तब तय किया जाता है, जब उपयोगकर्ता साइन इन करने के लिए, 'Google से साइन इन करें' बटन पर क्लिक करता है और बटन का state एट्रिब्यूट तय किया जाता है. |
क्रेडेंशियल
डिकोड किए जाने पर, आईडी टोकन यहां दिए गए उदाहरण की तरह दिखता है:
header { "alg": "RS256", "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature "typ": "JWT" } payload { "iss": "https://accounts.google.com", // The JWT's issuer "nbf": 161803398874, "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID "sub": "3141592653589793238", // The unique ID of the user's Google Account "hd": "gmail.com", // If present, the host domain of the user's Google Workspace email address "auth_time": 1748875426, "amr": ["mfa", "pwd", "tel"], "email": "elisa.g.beckett@gmail.com", // The user's email address "email_verified": true, // true, if Google has verified the email address "azp": "314159265-pi.apps.googleusercontent.com", "name": "Elisa Beckett", // If present, a URL to user's profile picture "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler", "given_name": "Eliza", "family_name": "Beckett", "iat": 1596474000, // Unix timestamp of the assertion creation time "exp": 1596477600, // Unix timestamp of the assertion expiration time "jti": "abc161803398874def" }
क्लाइंट को ऐसे JWT दावों को अनदेखा करना चाहिए जिनकी पहचान नहीं की जा सकी.
sub फ़ील्ड, Google खाते के लिए दुनिया भर में इस्तेमाल होने वाला यूनीक आइडेंटिफ़ायर है. उपयोगकर्ता के आइडेंटिफ़ायर के तौर पर सिर्फ़ sub फ़ील्ड का इस्तेमाल करें. ऐसा इसलिए, क्योंकि यह सभी Google खातों के लिए यूनीक होता है और इसे कभी दोबारा इस्तेमाल नहीं किया जाता.
email, email_verified, और hd फ़ील्ड का इस्तेमाल करके, यह पता लगाया जा सकता है कि Google किसी ईमेल पते को होस्ट करता है और उसके पास उस ईमेल पते का मालिकाना हक है या नहीं. जिन मामलों में Google के पास अधिकार होता है उनमें यह पुष्टि की जाती है कि उपयोगकर्ता ही खाते का असली मालिक है.
ऐसे मामले जिनमें Google के पास अधिकार है:
emailके सफ़िक्स में@gmail.comहै, तो यह एक Gmail खाता है.email_verifiedसही है औरhdसेट है, तो यह Google Workspace खाता है.
उपयोगकर्ता, Gmail या Google Workspace का इस्तेमाल किए बिना भी Google खातों के लिए रजिस्टर कर सकते हैं.
जब email में @gmail.com सफ़िक्स शामिल न हो और hd मौजूद न हो, तो Google के पास अधिकार नहीं होता. ऐसे में, उपयोगकर्ता की पुष्टि करने के लिए, पासवर्ड या पुष्टि करने के अन्य तरीकों का सुझाव दिया जाता है. email_verified भी सही हो सकता है, क्योंकि Google ने Google खाता बनाते समय उपयोगकर्ता की पुष्टि की थी. हालांकि, हो सकता है कि तीसरे पक्ष के ईमेल खाते का मालिकाना हक बदल गया हो.
exp फ़ील्ड से पता चलता है कि सर्वर साइड पर टोकन की पुष्टि करने की समयसीमा कब खत्म होगी. 'Google से साइन इन करें' सुविधा से मिले आईडी टोकन के लिए, यह समयसीमा एक घंटे की होती है. आपको समयसीमा खत्म होने से पहले, टोकन की पुष्टि करनी होगी. सेशन मैनेजमेंट के लिए exp का इस्तेमाल न करें. आईडी टोकन की समयसीमा खत्म होने का मतलब यह नहीं है कि उपयोगकर्ता ने साइन आउट कर दिया है. आपके ऐप्लिकेशन की ज़िम्मेदारी है कि वह उपयोगकर्ताओं के सेशन को मैनेज करे.
g_csrf_token
धोखाधड़ी से बचाने वाला स्टेट टोकन. यह किसी दूसरी साइट से किए गए फ़र्ज़ी अनुरोध (सीएसआरएफ़) का टोकन है. इसे gsi/client लाइब्रेरी ने बनाया है. POST पेलोड बॉडी में, कुकी और अनुरोध पैरामीटर, दोनों के तौर पर एक रैंडम वैल्यू शामिल की जाती है. अगर आपके सर्वर पर अनुरोध को प्रोसेस करते समय ये दोनों वैल्यू मैच नहीं होती हैं, तो अनुरोध को अमान्य माना जाना चाहिए.
राज्य
यह पैरामीटर सिर्फ़ तब तय किया जाता है, जब उपयोगकर्ता साइन इन करने के लिए, 'Google से साइन इन करें' बटन पर क्लिक करता है. साथ ही, क्लिक किए गए बटन का data-state एट्रिब्यूट तय किया जाता है. इस फ़ील्ड की वैल्यू, बटन के data-state एट्रिब्यूट में बताई गई वैल्यू से मेल खाती है.
एक ही पेज पर, 'Google से साइन इन करें' सुविधा के कई बटन रेंडर किए जा सकते हैं. इसलिए, हर बटन को एक यूनीक स्ट्रिंग असाइन की जा सकती है. इसलिए, इस state पैरामीटर का इस्तेमाल करके यह पता लगाया जा सकता है कि उपयोगकर्ता ने साइन इन करने के लिए किस बटन पर क्लिक किया.
पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट
पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट, उन पासवर्ड क्रेडेंशियल को प्रोसेस करता है जिन्हें पहले से मौजूद क्रेडेंशियल मैनेजर वापस लाता है.
एचटीटीपी POST अनुरोध में यह जानकारी शामिल होती है:
| फ़ॉर्मैट | नाम | ब्यौरा |
|---|---|---|
| कुकी | g_csrf_token |
एक रैंडम स्ट्रिंग जो data-native_login_uri से तय किए गए लॉगिन एंडपॉइंट के हर अनुरोध के साथ बदलती है. यह स्ट्रिंग, g_csrf_token अनुरोध पैरामीटर की वैल्यू से मैच होनी चाहिए. |
| अनुरोध का पैरामीटर | g_csrf_token |
एक रैंडम स्ट्रिंग जो data-native_login_uri से तय किए गए लॉगिन एंडपॉइंट के हर अनुरोध के साथ बदलती है. यह स्ट्रिंग, g_csrf_token कुकी की वैल्यू से मैच होनी चाहिए. |
| अनुरोध का पैरामीटर | email |
यह आईडी टोकन, Google जारी करता है. |
| अनुरोध का पैरामीटर | password |
क्रेडेंशियल कैसे चुना जाता है. |