Chrome तीसरे पक्ष की कुकी के इस्तेमाल पर रोक, 2024 की पहली तिमाही से लागू होगी. संभावित बदलावों को देखने के लिए, माइग्रेशन गाइड में दिए गए निर्देशों का पालन करें. साथ ही, अपनी वेबसाइट पर उपयोगकर्ता के साइन इन पर पड़ने वाले नेगेटिव असर से बचें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

'Google से साइन इन करें' एचटीएमएल एपीआई का रेफ़रंस

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

"g_id_onload" आईडी वाला एलिमेंट

'Google से साइन इन करें' डेटा एट्रिब्यूट को, दिखने वाले या नहीं दिखने वाले एलिमेंट में जोड़ा जा सकता है, जैसे कि <div> और <span>. सिर्फ़ एलिमेंट आईडी को g_id_onload पर सेट करना ज़रूरी है. इस आईडी को एक से ज़्यादा एलिमेंट पर न रखें.

डेटा एट्रिब्यूट

यहां दी गई टेबल में, डेटा एट्रिब्यूट की जानकारी के साथ उनकी सूची दी गई है:

एट्रिब्यूट
`data-client_id`	आपके ऐप्लिकेशन का क्लाइंट आईडी
`data-auto_prompt`	Google One पर टैप करने की सुविधा दिखाएं.
`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`	अगर किसी कुकी की वैल्यू खाली नहीं है, तो 'वन टैप' को स्किप कर दिया जाता है.
`data-nonce`	आईडी टोकन के लिए एक रैंडम स्ट्रिंग
`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 UX चालू करता है.
`data-login_hint`	उपयोगकर्ता सुझाव देकर खाता नहीं चुनें.
`data-hd`	डोमेन के हिसाब से खाते चुनने की सीमा तय करें.
`data-use_fedcm_for_prompt`	ब्राउज़र को उपयोगकर्ता के साइन इन करने के अनुरोधों को कंट्रोल करने और आपकी वेबसाइट और Google के बीच साइन इन करने की प्रोसेस में मध्यस्थता करने की अनुमति दें.

विशेषता प्रकार

नीचे दिए सेक्शन में, हर एट्रिब्यूट के टाइप की जानकारी और एक उदाहरण दिया गया है.

डेटा-client_id

यह एट्रिब्यूट आपके ऐप्लिकेशन का क्लाइंट आईडी है, जो Google Cloud कंसोल में पाया और बनाया जाता है. ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	हां	`data-client_id="CLIENT_ID.apps.googleusercontent.com"`

डेटा-auto_prompt

इस एट्रिब्यूट की मदद से यह तय किया जाता है कि एक टैप करके दिखाना है या नहीं. डिफ़ॉल्ट वैल्यू true है. वैल्यू false होने पर, Google One पर टैप नहीं किया जा सकता. ज़्यादा जानकारी के लिए यहां दी गई टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
boolean	ज़रूरी नहीं	`data-auto_prompt="true"`

डेटा-अपने-आप चुनने की सुविधा

इस एट्रिब्यूट से तय होता है कि अगर सिर्फ़ एक Google सेशन से आपके ऐप्लिकेशन को मंज़ूरी मिली है, तो किसी भी उपयोगकर्ता इंटरैक्शन के बिना, आईडी टोकन अपने-आप दिखाया जाएगा या नहीं. डिफ़ॉल्ट वैल्यू false है. ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
boolean	ज़रूरी नहीं	`data-auto_select="true"`

data-login_uri

यह एट्रिब्यूट आपके लॉगिन एंडपॉइंट का यूआरआई है.

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

अगर मौजूदा पेज आपका लॉगिन पेज है, तो इस एट्रिब्यूट को हटाया जा सकता है. ऐसा करने पर, इस पेज पर क्रेडेंशियल डिफ़ॉल्ट रूप से पोस्ट होते हैं.

जब कोई कॉलबैक फ़ंक्शन तय नहीं किया गया होता है और उपयोगकर्ता '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 से साइन इन करें' बटन redirect UX मोड के लिए, data-login_uri एट्रिब्यूट की ज़रूरत होती है. इस मोड में, data-callback एट्रिब्यूट को अनदेखा किया जाता है.
इन दोनों में से एक एट्रिब्यूट को Google One Tap और 'Google साइन-इन' बटन popup UX मोड के लिए सेट करना ज़रूरी है. अगर दोनों सेट किए जाते हैं, तो data-callback एट्रिब्यूट को ज़्यादा प्राथमिकता दी जाती है.

नेमस्पेस में JavaScript फ़ंक्शन, HTML API के साथ काम नहीं करते. इसके बजाय, बिना नेमस्पेस के ग्लोबल 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"`

डेटा-नेटिव_कॉलबैक

यह एट्रिब्यूट उस JavaScript फ़ंक्शन का नाम है जो ब्राउज़र के नेटिव क्रेडेंशियल मैनेजर से मिले पासवर्ड क्रेडेंशियल को मैनेज करता है. अगर data-native_login_uri एट्रिब्यूट या data-native_callback एट्रिब्यूट को सेट किया जाता है, तो Google सेशन न होने पर JavaScript लाइब्रेरी, नेटिव क्रेडेंशियल मैनेजर के पास वापस चली जाती है. आपको data-native_callback और data-native_login_uri, दोनों को सेट करने की अनुमति नहीं है. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-native_callback="handlePasswordCredential"`

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_outside

यह एट्रिब्यूट तय करता है कि अगर उपयोगकर्ता प्रॉम्प्ट के बाहर क्लिक करता है, तो One Tap का अनुरोध रद्द किया जाए या नहीं. डिफ़ॉल्ट वैल्यूtrue है इसे बंद करने के लिए, वैल्यू को false पर सेट करें. ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
boolean	ज़रूरी नहीं	`data-cancel_on_tap_outside="false"`

data-prompt_parent_id

यह एट्रिब्यूट, कंटेनर एलिमेंट का DOM आईडी सेट करता है. अगर इसे सेट नहीं किया जाता है, तो विंडो के सबसे ऊपर दाएं कोने में One Tap की सुविधा का प्रॉम्प्ट दिखेगा. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-prompt_parent_id="parent_id"`

data-skip_prompt_cookie

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

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-skip_prompt_cookie="SID"`

डेटा-नॉन्स

यह एट्रिब्यूट एक रैंडम स्ट्रिंग है जिसका इस्तेमाल आईडी टोकन, रीप्ले हमले को रोकने के लिए करता है. ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-nonce="biaqbm70g23"`

नोंस साइज़, आपके एनवायरमेंट के साथ काम करने वाले JWT के ज़्यादा से ज़्यादा साइज़ और अलग-अलग ब्राउज़र और सर्वर के एचटीटीपी साइज़ तक सीमित होता है.

डेटा के कॉन्टेक्स्ट

यह एट्रिब्यूट, One Tap की सुविधा में दिखने वाले शीर्षक और मैसेज के टेक्स्ट को बदलता है. ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-context="use"`

यहां दी गई टेबल में, सभी उपलब्ध कॉन्टेक्स्ट और उनकी जानकारी दी गई है:

संदर्भ
`signin`	"Google से साइन इन करें"
`signup`	"Google से साइन अप करें"
`use`	"Google के साथ इस्तेमाल करें"

डेटा-मोमेंट_कॉलबैक

यह एट्रिब्यूट, प्रॉम्प्ट यूज़र इंटरफ़ेस (यूआई) के स्टेटस की सूचना सुनने वाले के फ़ंक्शन का नाम है. ज़्यादा जानकारी के लिए, डेटा टाइप PromptMomentNotification देखें.

ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-moment_callback="logMomentNotification"`

data-state_cookie_domain

अगर आपको One Tap को पैरंट डोमेन और उसके सबडोमेन में दिखाना है, तो इस एट्रिब्यूट के लिए पैरंट डोमेन को पास करें, ताकि शेयर की गई एक स्टेट कुकी का इस्तेमाल किया जा सके. ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-state_cookie_domain="example.com"`

data-ux_mode

यह एट्रिब्यूट, 'Google से साइन इन करें' बटन के लिए इस्तेमाल किया जाने वाला उपयोगकर्ता अनुभव सेट करता है. डिफ़ॉल्ट वैल्यू popup है. इस एट्रिब्यूट का One Tap UX पर कोई असर नहीं पड़ता है. ज़्यादा जानकारी के लिए यहां दी गई टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-ux_mode="redirect"`

यहां दी गई टेबल में, उपलब्ध UX मोड और उनके ब्यौरे दिए गए हैं.

उपयोगकर्ता अनुभव (UX) मोड
`popup`	पॉप-अप विंडो में साइन इन करने के लिए UX फ़्लो करता है.
`redirect`	पेज को पूरे रीडायरेक्ट के ज़रिए साइन इन करने के लिए UX फ़्लो करता है.

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 मोड को One Tap की सुविधा से शुरू करने की प्रक्रिया पूरी नहीं हो पाएगी और बंद हो जाएगी.

वाइल्डकार्ड प्रीफ़िक्स भी इस्तेमाल किए जा सकते हैं. उदाहरण के लिए, "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", example2.com के डोमेन example1.com, example2.com, और सबडोमेन से मेल खाता है
वाइल्डकार्ड डोमेन की शुरुआत एक सुरक्षित https:// स्कीम से होनी चाहिए. इसलिए, "*.example.com" को अमान्य माना जाता है.

data-intermediate_iframe_close_callback

जब उपयोगकर्ता मैन्युअल तरीके से One Tap को बंद करते हैं, तब यह डिफ़ॉल्ट इंटरमीडिएट iframe व्यवहार को बदल देता है One Tap यूज़र इंटरफ़ेस (यूआई) में 'X' बटन पर टैप करके. डिफ़ॉल्ट तरीका यह है कि इंटरमीडिएट iframe को DOM से तुरंत हटा दिया जाए.

data-intermediate_iframe_close_callback फ़ील्ड सिर्फ़ इंटरमीडिएट iframe मोड पर लागू होता है. और इसका असर One Tap iframe के बजाय, सिर्फ़ इंटरमीडिएट iframe पर पड़ता है. कॉलबैक चालू करने से पहले, One Tap का यूज़र इंटरफ़ेस (यूआई) हटा दिया जाता है.

टाइप	ज़रूरी है	उदाहरण
फ़ंक्शन	ज़रूरी नहीं	`data-intermediate_iframe_close_callback="logBeforeClose"`

डेटा-itp_support

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

टाइप	ज़रूरी है	उदाहरण
boolean	ज़रूरी नहीं	`data-itp_support="true"`

data-login_hint

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

ज़्यादा जानकारी के लिए, login_hint के लिए Open Connect दस्तावेज़ देखें.

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग. यह कोई ईमेल पता या आईडी टोकन की `sub` फ़ील्ड वैल्यू हो सकता है.	ज़रूरी नहीं	`data-login_hint="elisa.beckett@gmail.com"`

डेटा-एचडी

अगर किसी उपयोगकर्ता के पास एक से ज़्यादा खाते हैं और उसे सिर्फ़ अपने Workspace खाते से साइन-इन करना चाहिए, तो Google को डोमेन नेम का संकेत देने के लिए इसका इस्तेमाल करें. सफल होने पर, खाता चुनने के दौरान दिखाए जाने वाले उपयोगकर्ता खाते, दिए गए डोमेन तक ही सीमित हो जाते हैं. वाइल्डकार्ड वैल्यू: *, उपयोगकर्ता को सिर्फ़ Workspace खाते उपलब्ध कराता है. खाता चुनने के दौरान, उसमें उपभोक्ता खाते (user@gmail.com) शामिल नहीं होते.

ज़्यादा जानकारी के लिए, hd के लिए Open Connect दस्तावेज़ देखें.

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग. पूरी तरह क्वालिफ़ाइड डोमेन नेम या *.	ज़रूरी नहीं	`data-hd="*"`

data-use_fedcm_for_prompt

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

टाइप	ज़रूरी है	उदाहरण
boolean	ज़रूरी नहीं	`data-use_fedcm_for_prompt="true"`

"g_id_signin" क्लास वाला एलिमेंट

अगर g_id_signin को किसी एलिमेंट के class एट्रिब्यूट में जोड़ा जाता है, तो वह एलिमेंट 'Google से साइन इन करें' बटन के तौर पर रेंडर होता है.

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

विज़ुअल डेटा के एट्रिब्यूट

यहां दी गई टेबल में, विज़ुअल डेटा के एट्रिब्यूट और उनकी जानकारी दी गई है:

एट्रिब्यूट
`data-type`	बटन का टाइप: आइकॉन या स्टैंडर्ड बटन.
`data-theme`	बटन की थीम. उदाहरण के लिए, fill_blue या fill_black.
`data-size`	बटन का साइज़. उदाहरण के लिए, छोटा या बड़ा.
`data-text`	बटन का टेक्स्ट. उदाहरण के लिए, "Google से साइन इन करें" या "Google से साइन अप करें".
`data-shape`	बटन का आकार. उदाहरण के लिए, आयताकार या गोल.
`data-logo_alignment`	Google लोगो का अलाइनमेंट: बाईं या बीच में.
`data-width`	बटन की चौड़ाई, पिक्सल में.
`data-locale`	बटन का टेक्स्ट, इस एट्रिब्यूट में दी गई भाषा में रेंडर होता है.
`data-click_listener`	अगर यह फ़ंक्शन सेट किया जाता है, तो 'Google से साइन इन करें' बटन पर क्लिक करने पर, इसे कॉल किया जाता है.
`data-state`	अगर नीति को सेट किया जाता है, तो यह स्ट्रिंग आईडी टोकन के साथ दिखती है.

विशेषता प्रकार

डेटा-टाइप

बटन का टाइप. डिफ़ॉल्ट वैल्यूstandard है ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	हां	`data-type="icon"`

इस टेबल में, उपलब्ध सभी बटन और उनसे जुड़ी जानकारी दी गई है:

टाइप
`standard`	एक बटन, जिसमें टेक्स्ट या आपके हिसाब से जानकारी दी गई है.
`icon`	बिना टेक्स्ट वाला आइकॉन बटन.

डेटा-थीम

बटन की थीम. डिफ़ॉल्ट वैल्यूoutline है ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-theme="filled_blue"`

यहां दी गई टेबल में, उपलब्ध थीम और उनके ब्यौरे दिए गए हैं:

थीम
`outline`	बटन की स्टैंडर्ड थीम.
`filled_blue`	नीले रंग के बटन वाली थीम.
`filled_black`	काले रंग के बटन वाली थीम.

data-size

बटन का साइज़. डिफ़ॉल्ट वैल्यू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` बटन टाइप के लिए इस्तेमाल किया जाता है, तो यह `square` जैसा होता है.
`pill`	गोली के आकार का बटन. अगर `icon` बटन के लिए इस्तेमाल किया जाता है, तो यह `circle` के जैसा होगा.
`circle`	गोल आकार का बटन. अगर `standard` बटन टाइप के लिए इस्तेमाल किया जाता है, तो यह `pill` जैसा होगा.
`square`	स्क्वेयर के आकार का बटन. अगर `standard` बटन टाइप के लिए इस्तेमाल किया जाता है, तो यह `rectangular` जैसा होगा.

डेटा-logo_alignment

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

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-logo_alignment="center"`

यहां दी गई टेबल में, उपलब्ध अलाइनमेंट और उनके ब्यौरे दिए गए हैं:

logo_alignment
`left`	Google लोगो को बाईं ओर अलाइन करता है.
`center`	Google के लोगो को बीच में अलाइन करें.

डेटा-चौड़ाई

बटन की कम से कम चौड़ाई, पिक्सल में. ज़्यादा से ज़्यादा 400 पिक्सल की चौड़ाई उपलब्ध हो सकती है.

ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-width=400`

डेटा-स्थान-भाषा

ज़रूरी नहीं. तय की गई स्थान-भाषा का इस्तेमाल करके, बटन का टेक्स्ट दिखाएं. अगर ऐसा नहीं है, तो डिफ़ॉल्ट रूप से उपयोगकर्ताओं के Google खाते या ब्राउज़र सेटिंग का इस्तेमाल किया जा सकता है. लाइब्रेरी लोड करते समय, src डायरेक्टिव में hl पैरामीटर और भाषा का कोड जोड़ें, उदाहरण के लिए: gsi/client?hl=<iso-639-code>.

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

ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	ज़रूरी नहीं	`data-locale="zh_CN"`

डेटा-क्लिक_लिसनर

जब 'Google से साइन इन करें' बटन पर क्लिक किया जाता है, तब data-click_listener एट्रिब्यूट का इस्तेमाल करके JavaScript फ़ंक्शन तय किया जा सकता है.

  <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 अनुरोध में, यह जानकारी शामिल है:

फ़ॉर्मैट	नाम	ब्यौरा
कुकी	`g_csrf_token`	एक रैंडम स्ट्रिंग, जो हैंडलर एंडपॉइंट के हर अनुरोध के साथ बदलती है.
पैरामीटर का अनुरोध करें	`g_csrf_token`	ऐसी स्ट्रिंग जो पिछली कुकी वैल्यू `g_csrf_token` जैसी है.
पैरामीटर का अनुरोध करें	`credential`	वह आईडी टोकन जिसे Google जारी करता है.
पैरामीटर का अनुरोध करें	`select_by`	क्रेडेंशियल चुनने का तरीका.
पैरामीटर का अनुरोध करें	`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 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"
}

sub फ़ील्ड, Google खाते के लिए दुनिया भर में इस्तेमाल होने वाला यूनीक आइडेंटिफ़ायर होता है. सिर्फ़ उपयोगकर्ता के आइडेंटिफ़ायर के तौर पर sub फ़ील्ड का इस्तेमाल करें, क्योंकि यह सभी Google खातों में यूनीक होता है और कभी भी इसका इस्तेमाल नहीं किया जाता. ईमेल पते को आइडेंटिफ़ायर के तौर पर इस्तेमाल न करें, क्योंकि किसी 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 का इस्तेमाल न करें. आईडी टोकन की समयसीमा खत्म हो जाने का मतलब यह नहीं है कि उपयोगकर्ता ने साइन आउट कर दिया है. उपयोगकर्ताओं के सेशन मैनेजमेंट की ज़िम्मेदारी आपका ऐप्लिकेशन है.

select_by

नीचे दी गई टेबल में, select_by फ़ील्ड के लिए संभावित वैल्यू की सूची दी गई है. सेशन और सहमति की स्थिति के साथ इस्तेमाल किए जाने वाले बटन के टाइप का इस्तेमाल, वैल्यू सेट करने,

उपयोगकर्ता ने या तो One Tap या 'Google से साइन इन करें' बटन दबाया या बिना टच किए अपने-आप साइन-इन होने की प्रोसेस का इस्तेमाल किया.
एक मौजूदा सेशन मिला या उपयोगकर्ता ने नया सेशन सेट अप करने के लिए, Google खाते को चुनकर उसमें साइन इन किया.
आपके ऐप्लिकेशन के साथ आईडी टोकन क्रेडेंशियल शेयर करने से पहले, उपयोगकर्ता ने इनमें से कोई एक काम किया
- अपनी सहमति देने के लिए, 'पुष्टि करें' बटन दबाया गया या
- पहले सहमति दी थी और Google खाता चुनने के लिए 'खाता चुनें' का इस्तेमाल किया था.

इस फ़ील्ड की वैल्यू इनमें से किसी एक टाइप पर सेट है,

वैल्यू	ब्यौरा
`auto`	ऐसे मौजूदा सेशन वाले उपयोगकर्ता का अपने-आप साइन-इन होने की सुविधा जिसने पहले क्रेडेंशियल शेयर करने की सहमति दी थी. सिर्फ़ ऐसे ब्राउज़र पर लागू होता है जो FedCM के साथ काम नहीं करते.
`user`	अगर किसी ऐसे उपयोगकर्ता ने मौजूदा सेशन में साइन इन किया है जिसने पहले सहमति दी थी, तो क्रेडेंशियल शेयर करने के लिए, One Tap 'इस रूप में जारी रखें' बटन को दबाया गया. सिर्फ़ ऐसे ब्राउज़र पर लागू होता है जो FedCM के साथ काम नहीं करते.
`fedcm`	किसी उपयोगकर्ता ने FedCM का इस्तेमाल करके क्रेडेंशियल शेयर करने के लिए, One Tap का 'इस रूप में जारी रखें' बटन दबाया है. सिर्फ़ FedCM साथ काम करने वाले ब्राउज़र पर लागू होता है.
`fedcm_auto`	ऐसे उपयोगकर्ता के मौजूदा सेशन में अपने-आप साइन-इन होने की सुविधा जिसने पहले, FedCM One Tap का इस्तेमाल करके, क्रेडेंशियल शेयर करने की सहमति दी थी. सिर्फ़ FedCM साथ काम करने वाले ब्राउज़र पर लागू होता है.
`user_1tap`	जिस उपयोगकर्ता के पास मौजूदा सेशन है उसने सहमति देने और क्रेडेंशियल शेयर करने के लिए, One Tap 'इस रूप में जारी रखें' बटन को दबाया है. सिर्फ़ Chrome v75 और इसके बाद के वर्शन पर लागू होता है.
`user_2tap`	जिस उपयोगकर्ता के पास पहले से कोई सेशन नहीं है उसने खाता चुनने के लिए, वन टैप 'इस रूप में जारी रखें' बटन दबाया. इसके बाद, पॉप-अप विंडो में 'पुष्टि करें' बटन को दबाया गया, ताकि सहमति दी जा सके और क्रेडेंशियल शेयर किए जा सकें. गैर-Chromium आधारित ब्राउज़र पर लागू होता है.
`btn`	अगर किसी मौजूदा सेशन में पहले ही सहमति दे दी गई हो और उपयोगकर्ता ने 'Google से साइन इन करें' बटन दबाया हो और क्रेडेंशियल शेयर करने के लिए, 'कोई खाता चुनें' से एक Google खाता चुना हो.
`btn_confirm`	किसी मौजूदा सेशन वाले उपयोगकर्ता ने 'Google से साइन इन करें' बटन दबाया है. साथ ही, सहमति देने और क्रेडेंशियल शेयर करने के लिए, 'पुष्टि करें' बटन दबाया है.
`btn_add_session`	ऐसा उपयोगकर्ता जिसके पास पहले से कोई सेशन न हो और जिसने पहले सहमति दी हो, उसने Google खाता चुनने और क्रेडेंशियल शेयर करने के लिए, 'Google से साइन इन करें' बटन दबाया हो.
`btn_confirm_add_session`	जिस उपयोगकर्ता के पास पहले से कोई सेशन नहीं है उसने Google खाता चुनने के लिए, पहले 'Google से साइन इन करें' बटन दबाया. इसके बाद, उपयोगकर्ता से सहमति देने और क्रेडेंशियल शेयर करने के लिए, 'पुष्टि करें' बटन दबाया गया.

state

यह पैरामीटर सिर्फ़ तब तय किया जाता है, जब उपयोगकर्ता साइन इन करने के लिए, 'Google से साइन इन करें' बटन पर क्लिक करता है और क्लिक किए गए बटन का data-state एट्रिब्यूट तय करता है. इस फ़ील्ड की वैल्यू वही है जो आपने बटन के data-state एट्रिब्यूट में दी है.

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

पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट

पासवर्ड क्रेडेंशियल हैंडलर एंडपॉइंट उन पासवर्ड क्रेडेंशियल को प्रोसेस करता है जिन्हें नेटिव क्रेडेंशियल मैनेजर से हासिल किया जाता है.

एचटीटीपी POST अनुरोध में, यह जानकारी शामिल है:

फ़ॉर्मैट	नाम	ब्यौरा
कुकी	`g_csrf_token`	एक रैंडम स्ट्रिंग, जो हैंडलर एंडपॉइंट के हर अनुरोध के साथ बदलती है.
पैरामीटर का अनुरोध करें	`g_csrf_token`	ऐसी स्ट्रिंग जो पिछली कुकी वैल्यू `g_csrf_token` जैसी है.
पैरामीटर का अनुरोध करें	`email`	यह आईडी टोकन, Google जारी करता है.
पैरामीटर का अनुरोध करें	`password`	क्रेडेंशियल चुनने का तरीका.