Google Identity Services को FedCM API पर माइग्रेट किया जा रहा है. संभावित बदलावों की समीक्षा करने और आपकी वेबसाइट में उपयोगकर्ता के साइन-इन करने पर पड़ने वाले बुरे असर से बचने के लिए, माइग्रेशन गाइड में दिए गए निर्देशों का पालन करें.

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

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

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

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

<div> और <span> जैसे दिखने वाले या न दिखने वाले किसी भी एलिमेंट में, 'Google से साइन इन करें' डेटा एट्रिब्यूट डाले जा सकते हैं. इसके लिए ज़रूरी है कि एलिमेंट का आईडी 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`	अगर बताई गई कुकी में कोई वैल्यू मौजूद है, तो One Tap को स्किप कर दिया जाता है.
`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`	ITP ब्राउज़र पर, One Tap के बेहतर यूज़र एक्सपीरियंस की सुविधा चालू करता है.
`data-login_hint`	उपयोगकर्ता को हिंट देकर, खाता चुनने की प्रोसेस को छोड़ें.
`data-hd`	डोमेन के हिसाब से खाता चुनने की सुविधा सीमित करें.
`data-use_fedcm_for_prompt`	ब्राउज़र को उपयोगकर्ता के साइन इन प्रॉम्प्ट को कंट्रोल करने की अनुमति दें. साथ ही, अपनी वेबसाइट और Google के बीच साइन इन फ़्लो को मैनेज करें.
`data-enable_redirect_uri_validation`	बटन रीडायरेक्ट फ़्लो को चालू करें, जो रीडायरेक्ट यूआरआई की पुष्टि करने के नियमों का पालन करता हो.

एट्रिब्यूट के टाइप

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

data-client_id

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

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

data-auto_prompt

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

टाइप	ज़रूरी है	उदाहरण
बूलियन	वैकल्पिक	`data-auto_prompt="true"`

data-auto_select

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

टाइप	ज़रूरी है	उदाहरण
बूलियन	वैकल्पिक	`data-auto_select="true"`

data-login_uri

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

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

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

जब कोई कॉलबैक फ़ंक्शन तय नहीं किया जाता है और कोई उपयोगकर्ता 'Google से साइन इन करें' या OneTap बटन पर क्लिक करता है या अपने-आप साइन इन होता है, तो आईडी टोकन क्रेडेंशियल का रिस्पॉन्स आपके लॉगिन एंडपॉइंट पर पोस्ट किया जाता है.

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

टाइप	वैकल्पिक	उदाहरण
URL	डिफ़ॉल्ट रूप से, यह मौजूदा पेज के यूआरआई या आपकी बताई गई वैल्यू पर सेट होता है. `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

data-callback

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

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	अगर `data-login_uri` सेट नहीं है, तो इसकी वैल्यू देना ज़रूरी है.	`data-callback="handleToken"`

data-login_uri और data-callback, दोनों में से किसी एक एट्रिब्यूट का इस्तेमाल किया जा सकता है. यह इन कॉम्पोनेंट और UX मोड कॉन्फ़िगरेशन पर निर्भर करता है:

data-login_uri एट्रिब्यूट, 'Google से साइन इन करें' बटन redirect के यूज़र एक्सपीरियंस (यूएक्स) मोड के लिए ज़रूरी है. यह 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"`

data-native_callback

यह एट्रिब्यूट, 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 है. ज़्यादा जानकारी के लिए, नीचे दी गई टेबल देखें:

टाइप	ज़रूरी है	उदाहरण
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

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

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

data-skip_prompt_cookie

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

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

data-nonce

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

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

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

data-context

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

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

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

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

data-moment_callback

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

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

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

data-state_cookie_domain

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

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

data-ux_mode

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

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

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

यूएक्स मोड
`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 मोड का 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", example1.com, example2.com डोमेन और example2.com के सबडोमेन से मैच करता है
वाइल्डकार्ड डोमेन, सुरक्षित https:// स्कीम से शुरू होने चाहिए. इसलिए, "*.example.com" को अमान्य माना जाता है.

data-intermediate_iframe_close_callback

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

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

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

data-itp_support

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

टाइप	ज़रूरी है	उदाहरण
बूलियन	वैकल्पिक	`data-itp_support="true"`

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-enable_redirect_uri_validation

रीडायरेक्ट यूआरआई की पुष्टि करने के नियमों का पालन करने वाला बटन रीडायरेक्ट फ़्लो चालू करें.

टाइप	ज़रूरी है	उदाहरण
बूलियन	वैकल्पिक	`data-enable_redirect_uri_validation="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`	स्टैंडर्ड बटन की थीम.
`filled_blue`	नीले रंग से भरी बटन थीम.
`filled_black`	काले रंग से भरी बटन थीम.

data-size

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

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	वैकल्पिक	`data-size="small"`

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

साइज़
`large`	एक बड़ा बटन.
`medium`	मीडियम साइज़ का बटन.
`small`	एक छोटा बटन.

data-text

बटन का टेक्स्ट. डिफ़ॉल्ट वैल्यू signin_with है. अलग-अलग data-text एट्रिब्यूट वाले आइकॉन बटन के टेक्स्ट में, विज़ुअल में कोई अंतर नहीं होता. हालांकि, स्क्रीन ऐक्सेस करने के लिए टेक्स्ट पढ़ने पर ऐसा नहीं होता.

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

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	वैकल्पिक	`data-text="signup_with"`

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

टेक्स्ट
`signin_with`	बटन का टेक्स्ट "Google से साइन इन करें" है.
`signup_with`	बटन का टेक्स्ट "Google से साइन अप करें" है.
`continue_with`	बटन का टेक्स्ट "Google के साथ जारी रखें" है.
`signin`	बटन का टेक्स्ट "साइन इन करें" है.

data-shape

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

टाइप	ज़रूरी है	उदाहरण
स्ट्रिंग	वैकल्पिक	`data-shape="rectangular"`

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

आकार
`rectangular`	रेक्टैंगल आकार का बटन. अगर `icon` button type के लिए इस्तेमाल किया जाता है, तो यह `square` जैसा ही होता है.
`pill`	पिल के आकार वाला बटन. अगर `icon` बटन टाइप के लिए इस्तेमाल किया जाता है, तो यह `circle` जैसा ही होता है.
`circle`	सर्कल के आकार वाला बटन. अगर `standard` button type के लिए इस्तेमाल किया जाता है, तो यह `pill` जैसा ही होता है.
`square`	स्क्वेयर आकार का बटन. अगर `standard` button type के लिए इस्तेमाल किया जाता है, तो यह `rectangular` जैसा ही होता है.

data-logo_alignment

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

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

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

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

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 एट्रिब्यूट का इस्तेमाल करके, 'Google से साइन इन करें' बटन पर क्लिक करने पर, कॉल किए जाने वाले 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 से साइन इन करें बटन पर क्लिक किया गया... मैसेज, Console में तब लॉग किया जाता है, जब '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 के 75 और उसके बाद के वर्शन पर लागू होता है.
`user_2tap`	किसी मौजूदा सेशन के बिना, उपयोगकर्ता ने खाता चुनने के लिए, One Tap 'इसी खाते से जारी रखें' बटन दबाया. इसके बाद, सहमति देने और क्रेडेंशियल शेयर करने के लिए, पॉप-अप विंडो में पुष्टि करें बटन दबाया. यह उन ब्राउज़र पर लागू होता है जो Chromium पर आधारित नहीं हैं.
`btn`	किसी मौजूदा सेशन में मौजूद उपयोगकर्ता ने पहले सहमति दी हो और उसने क्रेडेंशियल शेयर करने के लिए, 'कोई खाता चुनें' से कोई Google खाता चुना हो. इसके बाद, उसने 'Google से साइन इन करें' बटन दबाया हो.
`btn_confirm`	किसी मौजूदा सेशन वाले उपयोगकर्ता ने सहमति देने और क्रेडेंशियल शेयर करने के लिए, Google से साइन इन करें बटन और पुष्टि करें बटन दबाया.
`btn_add_session`	किसी ऐसे उपयोगकर्ता ने 'Google से साइन इन करें' बटन दबाया जिसने पहले सहमति दी थी, लेकिन जिसका कोई मौजूदा सेशन नहीं था. ऐसा करने पर, उसने Google खाता चुना और क्रेडेंशियल शेयर किए.
`btn_confirm_add_session`	किसी मौजूदा सेशन के बिना, उपयोगकर्ता ने Google खाता चुनने के लिए, सबसे पहले 'Google से साइन इन करें' बटन पर दबाया. इसके बाद, सहमति देने और क्रेडेंशियल शेयर करने के लिए, 'पुष्टि करें' बटन पर दबाया.

राज्य

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

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

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

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

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

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