चेतावनी: यह डेटा Google उपयोगकर्ता डेटा नीति के तहत दिया जाता है. कृपया समीक्षा करें और नीति का पालन करें. ऐसा न करने पर, प्रोजेक्ट या खाता निलंबित हो सकता है.

Google HTML API संदर्भ से साइन इन करें

इस रेफ़रंस पेज पर 'Google से साइन इन करें' सुविधा के एचटीएमएल एट्रिब्यूट के डेटा से जुड़े एपीआई की जानकारी दी गई है. आप अपने वेब पेजों पर, एक टैप का अनुरोध या Google से साइन इन करने का बटन दिखाने के लिए, एपीआई का इस्तेमाल कर सकते हैं.

आईडी &gt_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="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="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"

&gt_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 से साइन इन करें” है:
एक मानक बटन &#39;साइन इन करें Google&#39; कोई दिखाई न देने वाला आइकन बटन
signup_with बटन टेक्स्ट “Google के साथ साइन अप करें” है:
एक मानक बटन &#39 लेबल किया गया है, Google के साथ साइन अप करें&#39; कोई दिखाई न देने वाला आइकन बटन
continue_with बटन टेक्स्ट “Google के साथ जारी रखें” है:
एक मानक बटन &#39 लेबल किया गया है, Google के साथ जारी रखें#39; कोई दिखाई न देने वाला आइकन बटन
signin बटन का टेक्स्ट "साइन इन करें" है:
एक मानक बटन &#39;साइन इन करें&#39; कोई दिखाई न देने वाला आइकन बटन

डेटा आकार

बटन का आकार. डिफ़ॉल्ट मान 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 लोगो को बाईं ओर अलाइन करता है:
बाईं ओर G लोगो वाला स्टैंडर्ड बटन
center Google के लोगो को अलाइन करता है:
बीच में G लोगो वाला एक स्टैंडर्ड बटन

डेटा की चौड़ाई

बटन में कम से कम पिक्सल की चौड़ाई. ज़्यादा से ज़्यादा 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 क्रेडेंशियल कैसे चुना जाता है.