इस रेफ़रंस पेज पर 'Google से साइन इन करें' सुविधा के एचटीएमएल एट्रिब्यूट के डेटा से जुड़े एपीआई की जानकारी दी गई है. आप अपने वेब पेजों पर, एक टैप का अनुरोध या Google से साइन इन करने का बटन दिखाने के लिए, एपीआई का इस्तेमाल कर सकते हैं.
आईडी >_g_id_onload&कोटेशन वाला एलिमेंट;
आप <div>
और <span>
जैसे नज़र आने वाले या न दिखने वाले एलिमेंट में 'Google से साइन इन करें' डेटा एट्रिब्यूट जोड़ सकते हैं. सिर्फ़ एलिमेंट के आईडी को g_id_onload
पर सेट करना ज़रूरी है. इस आईडी को कई एलिमेंट पर न डालें.
डेटा एट्रिब्यूट
नीचे दी गई टेबल में डेटा एट्रिब्यूट के साथ उनके ब्यौरे भी दिए गए हैं:
एट्रिब्यूट | |
---|---|
data-client_id |
आपका ऐप्लिकेशन का क्लाइंट आईडी |
data-auto_prompt |
Google One टैप करें. |
data-auto_select |
Google One टैप पर अपने-आप चुने जाने की सुविधा चालू करता है. |
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 |
एक टैप में प्रॉम्प्ट कंटेनर एलिमेंट का डीओएम आईडी |
data-skip_prompt_cookie |
अगर दी गई कुकी में कोई मान खाली नहीं है, तो 'एक टैप' को छोड़ देता है. |
data-nonce |
आईडी टोकन के लिए एक रैंडम स्ट्रिंग |
data-context |
एक टैप में शीर्षक और शब्द |
data-moment_callback |
प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) की स्थिति की सूचना देने वाले टूल का फ़ंक्शन नाम |
data-state_cookie_domain |
अगर आपको पैरंट डोमेन और इसके सबडोमेन में, एक टैप में कॉल करना है, तो पैरंट डोमेन को इस एट्रिब्यूट में पास करें, ताकि शेयर की गई एक ही कुकी का इस्तेमाल किया जा सके. |
data-ux_mode |
'Google से साइन इन करें' बटन UX फ़्लो |
data-allowed_parent_origin |
ऐसे ऑरिजिन जिन्हें इंटरमीडिएट iframe को एम्बेड करने की अनुमति है. अगर यह एट्रिब्यूट मौजूद होता है, तो बीच में लगने वाले iframe मोड में एक टैप चलेगा. |
data-intermediate_iframe_close_callback |
जब उपयोगकर्ता 'एक टैप' बंद करता है, तो डिफ़ॉल्ट iframe के डिफ़ॉल्ट व्यवहार को बदल देता है. |
data-itp_support |
ITP ब्राउज़र पर अपग्रेड किया गया One Tap UX चालू करता है. |
एट्रिब्यूट टाइप
नीचे दिए गए सेक्शन में हर एट्रिब्यूट और #39; के प्रकार के बारे में जानकारी दी गई है.
डेटा-क्लाइंट_आईडी
यह एट्रिब्यूट आपका ऐप्लिकेशन का क्लाइंट आईडी है, जो Google Developers Console पर मिलता है और बनाया जाता है. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | हां | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
data-auto_prompt
यह एट्रिब्यूट तय करता है कि एक टैप करना है या नहीं. डिफ़ॉल्ट मान
true
है. false
की वैल्यू होने पर, Google One का टैप नहीं दिखेगा. ज़्यादा जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
बूलियन | ज़रूरी नहीं | data-auto_prompt="true" |
data-auto_select
अगर सिर्फ़ एक Google सेशन से आपके ऐप्लिकेशन को अनुमति मिलती है, तो यह एट्रिब्यूट यह तय करता है कि किसी उपयोगकर्ता इंटरैक्शन के बिना उसके आईडी टोकन को अपने-आप दिखाना है या नहीं.
डिफ़ॉल्ट मान false
है. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
बूलियन | ज़रूरी नहीं | data-auto_select="true" |
data-login_uri
यह एट्रिब्यूट आपके लॉगिन एंडपॉइंट का यूआरआई है. अगर मौजूदा पेज आपका लॉगिन पेज है, तो उसे छोड़ा जा सकता है. ऐसे में, क्रेडेंशियल इस पेज पर डिफ़ॉल्ट रूप से पोस्ट हो जाता है.
आईडी टोकन क्रेडेंशियल का जवाब आपके लॉगिन एंडपॉइंट पर तब पोस्ट किया जाता है, जब कोई कॉलबैक फ़ंक्शन तय नहीं किया जाता है और कोई उपयोगकर्ता 'Google से साइन इन करें' या 'एक टैप करें' बटन या अपने-आप साइन होने की सुविधा पर क्लिक करता है.
ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी नहीं | उदाहरण |
---|---|---|
यूआरएल | डिफ़ॉल्ट रूप से मौजूदा पेज का यूआरआई या आपकी बताई गई वैल्यू होती है.data-ux_mode="popup" और
data-callback सेट होने पर अनदेखा किया जाता है. |
data-login_uri="https://www.example.com/login" |
आपके लॉगिन एंडपॉइंट को,
ऐसे पोस्ट अनुरोधों को मैनेज करना चाहिए जिनमें बॉडी टोकन की वैल्यू के साथ, credential
कुंजी शामिल हो.
लॉगिन लॉगिन एंडपॉइंट के लिए अनुरोध का एक उदाहरण यह है:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
डेटा-कॉलबैक
यह एट्रिब्यूट, JavaScript फ़ंक्शन का नाम है, जो लौटाए गए आईडी टोकन को मैनेज करता है. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | अगर data-login_uri सेट नहीं है, तो ज़रूरी है. |
data-callback="handleToken" |
data-login_uri
और data-callback
में से किसी एक एट्रिब्यूट का इस्तेमाल किया जा सकता है. यह
इन कॉम्पोनेंट और UX मोड के कॉन्फ़िगरेशन पर निर्भर करता है:
'Google से साइन इन करें' बटन के लिए,
data-login_uri
एट्रिब्यूट ज़रूरी हैredirect
UX मोड, जोdata-callback
एट्रिब्यूट को अनदेखा करता है.इन दो एट्रिब्यूट में से किसी एक को Google One टैप और 'Google साइन इन' बटन
popup
UX मोड के लिए सेट करना ज़रूरी है. अगर दोनों सेट की गई हैं, तोdata-callback
एट्रिब्यूट को ज़्यादा प्राथमिकता दी जाती है.
किसी नेमस्पेस में JavaScript फ़ंक्शन, एचटीएमएल एपीआई के साथ काम नहीं करते.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए,
mylib.callback
के बजाय mylibCallback
का इस्तेमाल करें.
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 के उस फ़ंक्शन का नाम है जो ब्राउज़र के मूल क्रेडेंशियल मैनेजर से मिले पासवर्ड
क्रेडेंशियल को हैंडल करता है. अगर आप data-native_login_uri
एट्रिब्यूट या data-native_callback
एट्रिब्यूट सेट करते हैं, तो JavaScript सेशन के खत्म होने पर JavaScript लाइब्रेरी, नेटिव क्रेडेंशियल मैनेजर पर वापस
जाती है. आपको data-native_callback
और data-native_login_uri
दोनों सेट करने की अनुमति नहीं है. आगे की जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-native_callback="handlePasswordCredential" |
किसी नेमस्पेस में JavaScript फ़ंक्शन, एचटीएमएल एपीआई के साथ काम नहीं करते.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए,
mylib.callback
के बजाय mylibCallback
का इस्तेमाल करें.
data-Native_id_param
जब आप पासवर्ड क्रेडेंशियल हैंडलर में पासवर्ड क्रेडेंशियल सबमिट करते हैं, तो आप credential.id
फ़ील्ड के लिए पैरामीटर नाम बता सकते हैं. डिफ़ॉल्ट नाम
email
है. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
यूआरएल | ज़रूरी नहीं | data-native_id_param="user_id" |
data-Native_password_param
जब आप पासवर्ड क्रेडेंशियल हैंडलर में पासवर्ड क्रेडेंशियल सबमिट करते हैं, तो आप credential.password
मान के लिए पैरामीटर का नाम बता सकते हैं. डिफ़ॉल्ट नाम password
है. ज़्यादा जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
यूआरएल | ज़रूरी नहीं | data-native_password_param="pwd" |
data-cancel_on_tap_outसाइड
अगर उपयोगकर्ता प्रॉम्प्ट के बाहर क्लिक करता है, तो यह एट्रिब्यूट सेट करता है कि One One अनुरोध को रद्द करना है या नहीं. डिफ़ॉल्ट मान true
है. इसे बंद करने के लिए, वैल्यू को false
पर सेट करें. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
बूलियन | ज़रूरी नहीं | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
यह एट्रिब्यूट, कंटेनर एलिमेंट का डीओएम आईडी सेट करता है. अगर इस नीति को सेट नहीं किया जाता है, तो विंडो के सबसे ऊपर दाएं कोने में एक टैप का अनुरोध दिखेगा. ज़्यादा जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
अगर दी गई कुकी में ऐसा मान है जो खाली नहीं है, तो यह एट्रिब्यूट वन टैप को छोड़ देता है. ज़्यादा जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-skip_prompt_cookie="SID" |
कोई डेटा नहीं
यह एट्रिब्यूट, रैंडम टोकन का इस्तेमाल करके आईडी टोकन का इस्तेमाल करता है, ताकि रीप्ले हमले से बचा जा सके. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-nonce="biaqbm70g23" |
ग़ैर-ज़रूरी लंबाई, आपके नेटवर्क के साथ काम करने वाले ज़्यादा से ज़्यादा JWT आकार और अलग-अलग ब्राउज़र और सर्वर एचटीटीपी आकार के प्रतिबंधों तक सीमित है.
डेटा-संदर्भ
यह एट्रिब्यूट, One टैप के अनुरोध में दिखाए गए शीर्षक और मैसेज के टेक्स्ट को बदल देता है. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-context="use" |
नीचे दी गई टेबल में, उपलब्ध कॉन्टेक्स्ट और उनकी जानकारी दी गई है:
संदर्भ | |
---|---|
signin |
& &कोटेशन; |
signup |
& &कोटेशन; |
use |
& &कोटेशन; |
data-moment_callback
यह एट्रिब्यूट, प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) की स्थिति की सूचना देने वाले के फ़ंक्शन का नाम है. ज़्यादा जानकारी के लिए, डेटा टाइप देखें
PromptMomentNotification
.
ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-moment_callback="logMomentNotification" |
किसी नेमस्पेस में JavaScript फ़ंक्शन, एचटीएमएल एपीआई के साथ काम नहीं करते.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए,
mylib.callback
के बजाय mylibCallback
का इस्तेमाल करें.
data-state_cookie_domain
अगर आपको किसी पैरंट डोमेन और उसके सबडोमेन में 'एक टैप' दिखाना है, तो इस डोमेन को पैरंट डोमेन पास करें, ताकि शेयर की गई एक राज्य की कुकी का इस्तेमाल किया जा सके. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-state_cookie_domain="example.com" |
data-ux_mode
यह एट्रिब्यूट, साइन इन करने के लिए इस्तेमाल होने वाले Google बटन के लिए इस्तेमाल किए जाने वाले UX फ़्लो को सेट करता है. डिफ़ॉल्ट मान
popup
होता है. इस एट्रिब्यूट का One टैप UX पर कोई असर नहीं पड़ता. ज़्यादा जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-ux_mode="redirect" |
नीचे दी गई टेबल में, उपलब्ध UX मोड और उनके ब्यौरे की सूची दी गई है.
UX मोड | |
---|---|
popup |
पॉप-अप विंडो में साइन-इन UX फ़्लो करता है. |
redirect |
पूरे पेज को रीडायरेक्ट करके, UX फ़्लो को पूरा करता है. |
data-allowed_parent_origin
ऐसे ऑरिजिन जिन्हें इंटरमीडिएट iframe को एम्बेड करने की अनुमति है. अगर यह एट्रिब्यूट मौजूद होता है, तो इंटरमीडिएट 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"
सभी लेवल (जैसे कि news.example.com
, login.news.example.com
) पर 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
जब उपयोगकर्ता मैन्युअल रूप से एक टैप में एक टैप यूज़र इंटरफ़ेस (यूआई) में 'X' बटन पर टैप करता है, तो डिफ़ॉल्ट मध्यम iframe व्यवहार को बदल देता है. डिफ़ॉल्ट व्यवहार डीओएम से बीच के iframe को तुरंत हटाना होता है.
data-intermediate_iframe_close_callback
फ़ील्ड सिर्फ़ बीच के iframe मोड में लागू होता है. और इसका असर सिर्फ़ एक टैप वाले iframe के बजाय
बीच के iframe पर पड़ता है. कॉलबैक को शुरू करने से पहले, एक टैप वाला यूज़र इंटरफ़ेस (यूआई) हटा दिया जाता है.
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
फ़ंक्शन | ज़रूरी नहीं | data-intermediate_iframe_close_callback="logBeforeClose" |
किसी नेमस्पेस में JavaScript फ़ंक्शन, एचटीएमएल एपीआई के साथ काम नहीं करते.
इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए,
mylib.callback
के बजाय mylibCallback
का इस्तेमाल करें.
data-itp_support
इस फ़ील्ड से यह तय होता है कि
अपग्रेड किए गए एक टैप UX को उन ब्राउज़र पर चालू किया जाना चाहिए जो इंटेलिजेंट ट्रैकिंग प्रिवेंशन (आईटीपी) के साथ काम करते हैं. डिफ़ॉल्ट वैल्यू
false
होती है. ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
बूलियन | ज़रूरी नहीं | data-itp_support="true" |
>_g_id_signin&ott क्लास वाला एलिमेंट;
अगर आप किसी एलिमेंट को किसी g_id_signin
's class
एट्रिब्यूट में जोड़ते हैं, तो एलिमेंट
'Google से साइन इन करें' बटन के तौर पर रेंडर होता है.
आप एक ही पेज पर कई 'Google से साइन इन करें' बटन रेंडर कर सकते हैं. हर बटन की अपनी विज़ुअल सेटिंग हो सकती है. सेटिंग नीचे दी गई डेटा विशेषताओं से तय होती हैं.
विज़ुअल डेटा के एट्रिब्यूट
नीचे दी गई टेबल में विज़ुअल डेटा के एट्रिब्यूट और उनके ब्यौरे शामिल हैं:
एट्रिब्यूट | |
---|---|
data-type |
बटन का टाइप: आइकॉन या स्टैंडर्ड बटन. |
data-theme |
बटन की थीम. उदाहरण के लिए, फ़ुलस्क्रीन_नीला या भर गया_काला. |
data-size |
बटन का साइज़. उदाहरण के लिए, छोटा या बड़ा. |
data-text |
बटन टेक्स्ट. उदाहरण के लिए, & &कोटेशन Google में साइन इन करें या & &कोटेशन के साथ साइन अप करें; |
data-shape |
बटन का आकार. उदाहरण के लिए, आयताकार या गोलाकार. |
data-logo_alignment |
Google लोगो अलाइनमेंट: बाएं या बीच में. |
data-width |
बटन की चौड़ाई, पिक्सल में. |
data-locale |
इस एट्रिब्यूट में सेट की गई भाषा में, बटन का टेक्स्ट रेंडर होता है. |
एट्रिब्यूट टाइप
नीचे दिए गए सेक्शन में हर एट्रिब्यूट और #39; के प्रकार के बारे में जानकारी दी गई है.
डेटा-टाइप
बटन किस तरह का है. डिफ़ॉल्ट मान standard
है. आगे की जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | हां | data-type="icon" |
नीचे दी गई टेबल में, अलग-अलग तरह के बटन और उनके ब्यौरे दिए गए हैं:
टाइप | |
---|---|
standard |
टेक्स्ट या आपके हिसाब से दी गई जानकारी वाला बटन:
![]() ![]() |
icon |
बिना टेक्स्ट वाला आइकॉन बटन:
![]() |
डेटा-थीम
बटन की थीम. डिफ़ॉल्ट मान outline
है. आगे की जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-theme="filled_blue" |
नीचे दी गई टेबल में उपलब्ध थीम और उनके बारे में जानकारी दी गई है:
थीम | |
---|---|
outline |
स्टैंडर्ड बटन की थीम:
![]() ![]() ![]() |
filled_blue |
नीले रंग के बटन की थीम:
![]() ![]() ![]() |
filled_black |
काले रंग की बटन वाली थीम:
![]() ![]() ![]() |
डेटा-साइज़
बटन का साइज़. डिफ़ॉल्ट मान large
है. आगे की जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-size="small" |
नीचे दिए गए टेबल में बटन के साइज़ और उनकी जानकारी के बारे में बताया गया है.
साइज़ | |
---|---|
large |
बड़ा बटन:
![]() ![]() ![]() |
medium |
मीडियम साइज़ का बटन:
![]() ![]() |
small |
एक छोटा बटन:
![]() ![]() |
डेटा-टेक्स्ट
बटन टेक्स्ट. डिफ़ॉल्ट मान signin_with
है. आइकॉन बटन के टेक्स्ट में कोई
विज़ुअल अंतर नहीं होता. इन बटन के data-text
एट्रिब्यूट अलग-अलग होते हैं. इसका अपवाद सिर्फ़ तब होता है, जब स्क्रीन की सुलभता सुविधाओं के लिए टेक्स्ट पढ़ा जाता है.
ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-text="signup_with" |
नीचे दी गई टेबल में, उपलब्ध बटन के टेक्स्ट और उनकी जानकारी दी गई है:
टेक्स्ट | |
---|---|
signin_with |
बटन का टेक्स्ट “Google से साइन इन करें” है:
![]() ![]() |
signup_with |
बटन टेक्स्ट “Google के साथ साइन अप करें” है:
![]() ![]() |
continue_with |
बटन टेक्स्ट “Google के साथ जारी रखें” है:
![]() ![]() |
signin |
बटन का टेक्स्ट "साइन इन करें" है:
![]() ![]() |
डेटा आकार
बटन का आकार. डिफ़ॉल्ट मान rectangular
है. ज़्यादा जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-shape="rectangular" |
नीचे दिए गए टेबल में बटन के अलग-अलग साइज़ और उनकी जानकारी दी गई है:
आकार | |
---|---|
rectangular |
आयताकार बटन. अगर इसका इस्तेमाल icon
बटन के टाइप के लिए किया जाता है, तो यह #33; square जैसा ही होता है.
![]() ![]() ![]() |
pill |
पिल के आकार का बटन. अगर इस तरह के icon बटन के लिए इस्तेमाल किया जाता है, तो यह' circle जैसा ही होता है.
![]() ![]() ![]() |
circle |
गोले के आकार का बटन. अगर इस तरह के standard बटन के लिए इस्तेमाल किया जाता है, तो यह' pill की तरह ही होता है.
![]() ![]() ![]() |
square |
चौकोर आकार का बटन. अगर इस तरह के standard बटन के लिए इस्तेमाल किया जाता है, तो यह' rectangular की तरह ही होता है.
![]() ![]() ![]() |
data-logo_alignment
Google के लोगो का अलाइनमेंट. डिफ़ॉल्ट मान left
है. यह एट्रिब्यूट सिर्फ़ standard
बटन टाइप पर लागू होता है. ज़्यादा जानकारी के लिए नीचे दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-logo_alignment="center" |
नीचे दी गई टेबल में अलाइनमेंट और उनकी जानकारी की सूची दी गई है:
लोगो की जगह | |
---|---|
left |
Google लोगो को बाईं ओर अलाइन करता है:
![]() |
center |
Google के लोगो को अलाइन करता है:
![]() |
डेटा की चौड़ाई
बटन में कम से कम पिक्सल की चौड़ाई. ज़्यादा से ज़्यादा 400 पिक्सल की चौड़ाई हो सकती है.
ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-width=400 |
data-local
बटन टेक्स्ट की पहले से सेट की गई स्थान-भाषा. अगर यह सेट नहीं है, तो ब्राउज़र का डिफ़ॉल्ट स्थान-भाषा या Google सेशन के उपयोगकर्ता की पसंद का इस्तेमाल किया जाता है. इसलिए, अलग-अलग उपयोगकर्ताओं को स्थानीय भाषा में लिखे गए बटन के अलग-अलग वर्शन दिख सकते हैं. साथ ही, उन्हें अलग-अलग साइज़ में ये वर्शन दिख सकते हैं.
ज़्यादा जानकारी के लिए यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | data-locale="zh_CN" |
सर्वर-साइड इंटिग्रेशन
आपके सर्वर साइड एंडपॉइंट को इन एचटीटीपी POST
अनुरोधों को हैंडल करना होगा.
आईडी टोकन हैंडलर एंडपॉइंट
आईडी टोकन हैंडलर एंडपॉइंट, आईडी टोकन को प्रोसेस करता है. इससे जुड़े खाते की स्थिति के आधार पर, आप उपयोगकर्ता को साइन इन करके साइन अप पेज पर भेज सकते हैं. इसके अलावा, उसे ज़्यादा जानकारी के लिए खाता जोड़ने वाले पेज पर भेज सकते हैं.
एचटीटीपी अनुरोध POST
में यह जानकारी होती है:
फ़ॉर्मैट | नाम | ब्यौरा |
---|---|---|
कुकी | g_csrf_token |
हैंडलर एंडपॉइंट के हर अनुरोध के साथ बदलने वाली एक स्ट्रिंग. |
अनुरोध का पैरामीटर | g_csrf_token |
एक स्ट्रिंग जो #39; पिछली कुकी वैल्यू के समान है,
g_csrf_token |
अनुरोध का पैरामीटर | credential |
वह आईडी टोकन जिसे Google जारी करता है. |
अनुरोध का पैरामीटर | select_by |
क्रेडेंशियल कैसे चुना जाता है. |
डीकोड किया गया होने पर, आईडी टोकन नीचे दिए गए उदाहरण की तरह दिखेगा:
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 GSuite email address "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's creation time "exp": 1596477600, // Unix timestamp of the assertion's expiration time "jti": "abc161803398874def" }
इस टेबल में select_by
फ़ील्ड के लिए संभावित वैल्यू दी गई हैं. सत्र और सहमति की स्थिति के साथ इस्तेमाल हुए बटन का इस्तेमाल, मान को सेट करने के लिए किया जाता है.
उपयोगकर्ता ने 'एक टैप करें या 'Google से साइन इन करें' बटन दबाया या टच किए बिना अपने-आप साइन-इन होने की सुविधा का इस्तेमाल किया.
कोई मौजूदा सेशन मिला था या उपयोगकर्ता ने कोई नया सेशन शुरू करने के लिए, Google खाते में चुना और साइन इन किया था.
अपने ऐप्लिकेशन के साथ उपयोगकर्ता के आईडी आईडी टोकन के क्रेडेंशियल शेयर करने से पहले
- क्रेडेंशियल शेयर करने की सहमति देने के लिए, 'पुष्टि करें' बटन दबाया गया या
- पहले ही सहमति दी गई थी और Google खाता चुनने के लिए 'खाता चुनें' का इस्तेमाल किया था.
इस फ़ील्ड की वैल्यू, इनमें से किसी एक टाइप पर सेट है,
वैल्यू | ब्यौरा |
---|---|
auto |
मौजूदा सेशन वाले ऐसे उपयोगकर्ता का अपने-आप साइन इन होना जिसने पहले क्रेडेंशियल शेयर करने की सहमति दी थी. |
user |
उपयोगकर्ता, जो पहले से ही सेशन के लिए सहमति दे चुका है उसके उपयोगकर्ता ने One Tap 'जारी रखें' बटन दबाकर क्रेडेंशियल शेयर किए हैं. |
user_1tap |
मौजूदा सेशन वाले उपयोगकर्ता ने सहमति देने और क्रेडेंशियल शेयर करने के लिए, एक टैप में #39;जारी रखें' बटन दबाया. सिर्फ़ Chrome v75 और इसके बाद के वर्शन पर लागू होता है. |
user_2tap |
किसी मौजूदा सेशन के बिना किसी उपयोगकर्ता ने One टैप 'इस रूप में जारी रखें' बटन दबाया और फिर सहमति देने और क्रेडेंशियल शेयर करने के लिए एक पॉप-अप विंडो में पुष्टि करें बटन दबाया. गैर-Chromium आधारित ब्राउज़र पर लागू होता है. |
btn |
मौजूदा सेशन वाले जिस उपयोगकर्ता ने पहले सहमति दी थी उसने 'Google से साइन इन करें' बटन दबाया और क्रेडेंशियल शेयर करने के लिए, 'एक खाता चुनें' में से Google खाता चुना. |
btn_confirm |
किसी मौजूदा सेशन वाले उपयोगकर्ता ने 'Google से साइन इन करें' बटन दबाया है और सहमति देने और क्रेडेंशियल शेयर करने के लिए, 'पुष्टि करें' बटन दबाया है. |
btn_add_session |
ऐसा उपयोगकर्ता जिसके पास पहले से कोई सेशन नहीं है, जिसने पहले सहमति दी थी, उसने 'Google से साइन इन करें' बटन दबाकर, Google खाता चुना और क्रेडेंशियल शेयर किए. |
btn_confirm_add_session |
किसी मौजूदा सेशन के नहीं होने वाले उपयोगकर्ता ने पहले Google खाता चुनने के लिए, 'Google से साइन इन करें' बटन दबाया और फिर सहमति देने और क्रेडेंशियल शेयर करने के लिए, 'पुष्टि करें' बटन दबाया. |
पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट
पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट, पासवर्ड क्रेडेंशियल को प्रोसेस करता है, जिसे नेटिव क्रेडेंशियल मैनेजर फिर से पाता है.
एचटीटीपी अनुरोध POST
में यह जानकारी होती है:
फ़ॉर्मैट | नाम | ब्यौरा |
---|---|---|
कुकी | g_csrf_token |
हैंडलर एंडपॉइंट के हर अनुरोध के साथ बदलने वाली एक स्ट्रिंग. |
अनुरोध का पैरामीटर | g_csrf_token |
एक स्ट्रिंग जो #39; पिछली कुकी वैल्यू, g_csrf_token की तरह ही है. |
अनुरोध का पैरामीटर | email |
यह आईडी टोकन जिसे Google जारी करता है. |
अनुरोध का पैरामीटर | password |
क्रेडेंशियल कैसे चुना जाता है. |