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

इस पेज का अनुवाद 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`	अगर बताई गई कुकी की वैल्यू खाली नहीं है, तो 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"`

डेटा-अपने-आप_प्रॉम्प्ट

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

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

data-auto_select

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

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

data-login_uri

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

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

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

जब कोई कॉलबैक फ़ंक्शन तय नहीं किया जाता है और कोई उपयोगकर्ता '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

डेटा-कॉलबैक

यह एट्रिब्यूट, 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"`

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

यह एट्रिब्यूट, 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="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"`

डेटा-ux_mode

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

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

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

यूएक्स मोड
`popup`	पॉप-अप विंडो में साइन-इन यूज़र एक्सपीरियंस (यूएक्स) फ़्लो को पूरा करता है.
`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", 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"`

नेमस्पेस में मौजूद JavaScript फ़ंक्शन, HTML API के साथ काम नहीं करते. इसके बजाय, नेमस्पेस के बिना ग्लोबल JavaScript फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए, mylib.callback के बजाय mylibCallback का इस्तेमाल करें.

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`	बिना टेक्स्ट वाला आइकॉन बटन.

डेटा-थीम

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

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

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

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

डेटा-साइज़

बटन का साइज़. डिफ़ॉल्ट वैल्यू 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` जैसा ही होता है.

डेटा-लोगो_संरेखण

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

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

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

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

डेटा-चौड़ाई

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