Sign in with Google JavaScript API के बारे में जानकारी

इस रेफ़रंस पेज पर, 'Google से साइन इन करें' JavaScript API के बारे में बताया गया है. इसका इस्तेमाल, वेब पेजों पर 'Google से साइन इन करें' बटन या One Tap प्रॉम्प्ट दिखाने के लिए किया जाता है.

तरीका: google.accounts.id.initialize

google.accounts.id.initialize वाला तरीका, कॉन्फ़िगरेशन ऑब्जेक्ट के आधार पर, 'Google से साइन इन करें' क्लाइंट को शुरू करता है. इस तरीके का कोड उदाहरण यहां दिया गया है:

google.accounts.id.initialize(IdConfiguration)

यहां दिए गए कोड के उदाहरण में, google.accounts.id.initialize फ़ंक्शन के साथ google.accounts.id.initialize तरीके को लागू करने का तरीका बताया गया है:onload

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

google.accounts.id.initialize तरीके से, 'Google से साइन इन करें' सुविधा का क्लाइंट इंस्टेंस बनाया जाता है. इसका इस्तेमाल एक ही वेब पेज के सभी मॉड्यूल में किया जा सकता है.

  • अगर एक ही वेब पेज पर एक से ज़्यादा मॉड्यूल (जैसे कि One Tap, मनमुताबिक बनाया गया बटन, रद्द करना वगैरह) का इस्तेमाल किया जाता है, तब भी आपको google.accounts.id.initialize तरीके को सिर्फ़ एक बार कॉल करना होगा.
  • अगर google.accounts.id.initialize तरीके को कई बार कॉल किया जाता है, तो सिर्फ़ आखिरी कॉल में मौजूद कॉन्फ़िगरेशन को याद रखा जाता है और उसका इस्तेमाल किया जाता है.

google.accounts.id.initialize तरीके को कॉल करने पर, कॉन्फ़िगरेशन रीसेट हो जाते हैं. इसके बाद, उसी वेब पेज पर मौजूद सभी तरीके तुरंत नए कॉन्फ़िगरेशन का इस्तेमाल करते हैं.

डेटा टाइप: IdConfiguration

यहां दी गई टेबल में, IdConfiguration डेटा टाइप के फ़ील्ड और उनके बारे में जानकारी दी गई है:

फ़ील्ड
client_id आपके ऐप्लिकेशन का क्लाइंट आईडी
color_scheme यह One Tap प्रॉम्प्ट पर लागू की गई कलर स्कीम है.
auto_select इससे अपने-आप चुनने की सुविधा चालू हो जाती है.
callback आईडी टोकन को मैनेज करने वाला JavaScript फ़ंक्शन. Google One Tap और 'Google से साइन इन करें' बटन popup यूज़र एक्सपीरियंस मोड, इस एट्रिब्यूट का इस्तेमाल करते हैं.
login_uri आपके लॉगिन एंडपॉइंट का यूआरएल. 'Google से साइन इन करें' बटन redirect यूज़र एक्सपीरियंस मोड इस एट्रिब्यूट का इस्तेमाल करता है.
native_callback यह JavaScript फ़ंक्शन, पासवर्ड क्रेडेंशियल को मैनेज करता है.
cancel_on_tap_outside अगर उपयोगकर्ता प्रॉम्प्ट के बाहर क्लिक करता है, तो यह कुकी प्रॉम्प्ट को रद्द कर देती है.
prompt_parent_id यह One Tap प्रॉम्प्ट कंटेनर एलिमेंट का डीओएम आईडी है
nonce आईडी टोकन के लिए रैंडम स्ट्रिंग
essential_claims Google से मिले आईडी टोकन में शामिल करने के लिए अतिरिक्त दावे.
context One Tap प्रॉम्प्ट में मौजूद टाइटल और शब्द
state_cookie_domain अगर आपको पैरंट डोमेन और उसके सबडोमेन में One Tap को कॉल करना है, तो इस फ़ील्ड में पैरंट डोमेन पास करें, ताकि एक ही शेयर की गई कुकी का इस्तेमाल किया जा सके.
ux_mode 'Google से साइन इन करें' बटन का उपयोगकर्ता अनुभव (यूएक्स) फ़्लो
allowed_parent_origin ऐसे ऑरिजिन जिन्हें इंटरमीडिएट iframe को एम्बेड करने की अनुमति है. अगर यह फ़ील्ड मौजूद है, तो One Tap, इंटरमीडिएट iframe मोड में चलता है.
intermediate_iframe_close_callback जब उपयोगकर्ता मैन्युअल तरीके से One Tap बंद करते हैं, तब यह कुकी डिफ़ॉल्ट इंटरमीडिएट iframe के व्यवहार को बदल देती है.
itp_support यह कुकी, ITP ब्राउज़र पर अपग्रेड किए गए One Tap UX को चालू करती है.
login_hint उपयोगकर्ता के बारे में जानकारी देकर, खाता चुनने की प्रोसेस को स्किप करें.
hd डोमेन के हिसाब से खाता चुनने की सुविधा को सीमित करें.
use_fedcm_for_prompt इस कुकी से ब्राउज़र को, उपयोगकर्ता के साइन-इन प्रॉम्प्ट को कंट्रोल करने की अनुमति मिलती है. साथ ही, यह आपकी वेबसाइट और Google के बीच साइन-इन फ़्लो को मैनेज करती है.
use_fedcm_for_button इस फ़ील्ड से यह तय होता है कि Chrome पर FedCM बटन UX का इस्तेमाल किया जाना चाहिए या नहीं. Chrome के डेस्कटॉप वर्शन M125 और Android वर्शन M128 या इसके बाद के वर्शन पर इसका इस्तेमाल किया जा सकता है. इसकी डिफ़ॉल्ट वैल्यू false होती है.
button_auto_select FedCM बटन फ़्लो के लिए, अपने-आप चुनने की सुविधा विकल्प को चालू करना है या नहीं. अगर यह सुविधा चालू है, तो Google के चालू सेशन वाले वापस आने वाले उपयोगकर्ताओं को अपने-आप साइन इन कर दिया जाएगा. उन्हें खाता चुनने की सुविधा का प्रॉम्प्ट नहीं दिखेगा. डिफ़ॉल्ट वैल्यू false है.

client_id

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

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

color_scheme

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

टाइप ज़रूरी है उदाहरण
स्ट्रिंग ज़रूरी नहीं. यह उपयोगकर्ताओं के सिस्टम की डिफ़ॉल्ट कलर स्कीम पर सेट होता है. color_scheme: "dark"

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

कलर स्कीम
default उपयोगकर्ता के सिस्टम की डिफ़ॉल्ट कलर स्कीम लागू करता है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता की पसंद के हिसाब से स्कीम हल्की है या गहरे रंग की.
light हल्के रंग वाली कलर स्कीम लागू करें.
dark गहरे रंग वाली कलर स्कीम लागू करें.

auto_select

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

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

कॉलबैक

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

टाइप ज़रूरी है उदाहरण
फ़ंक्शन One Tap और popup UX मोड के लिए ज़रूरी है callback: handleResponse

login_uri

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

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

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

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

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

टाइप वैकल्पिक उदाहरण
URL यह मौजूदा पेज के यूआरआई या आपकी तय की गई वैल्यू पर डिफ़ॉल्ट रूप से सेट होता है.
इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब ux_mode: "redirect" सेट किया गया हो.		 login_uri: "https://www.example.com/login"

आपके लॉगिन एंडपॉइंट को, ऐसे POST अनुरोधों को मैनेज करना होगा जिनमें बॉडी में आईडी टोकन वैल्यू के साथ credential पैरामीटर शामिल हो.

native_callback

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

टाइप ज़रूरी है उदाहरण
फ़ंक्शन वैकल्पिक native_callback: handleResponse

cancel_on_tap_outside

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

टाइप ज़रूरी है उदाहरण
बूलियन वैकल्पिक cancel_on_tap_outside: false

prompt_parent_id

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

टाइप ज़रूरी है उदाहरण
स्ट्रिंग वैकल्पिक prompt_parent_id: 'parent_id'

नॉन्स

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

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

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

essential_claims

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

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

टाइप ज़रूरी है उदाहरण
स्ट्रिंग वैकल्पिक essential_claims: "auth_time, amr"

कॉन्टेक्स्ट

इस फ़ील्ड से, One Tap प्रॉम्प्ट में दिखने वाले टाइटल और मैसेज का टेक्स्ट बदल जाता है. हालांकि, इसका असर ITP ब्राउज़र पर नहीं पड़ता. डिफ़ॉल्ट रूप से, यह signin पर सेट होता है.

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

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

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

कॉन्टेक्स्ट
signin "इसमें साइन इन करें"
signup "इसके लिए साइन अप करें"
use "इस्तेमाल करें"

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

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

ux_mode

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

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

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

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

allowed_parent_origin

ऐसे ऑरिजिन जिन्हें इंटरमीडिएट iframe को एम्बेड करने की अनुमति है. अगर यह फ़ील्ड मौजूद है, तो One Tap, इंटरमीडिएट iframe मोड में काम करता है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:

टाइप ज़रूरी है उदाहरण
स्ट्रिंग या स्ट्रिंग अरे वैकल्पिक allowed_parent_origin: "https://example.com"

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

वैल्यू टाइप
string एक डोमेन यूआरआई. "https://example.com"
string array डोमेन यूआरआई का कलेक्शन. ["https://news.example.com", "https://local.example.com"]

वाइल्डकार्ड प्रीफ़िक्स भी काम करते हैं. उदाहरण के लिए, "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" को अमान्य माना जाता है.

अगर allowed_parent_origin फ़ील्ड की वैल्यू अमान्य है, तो इंटरमीडिएट iframe मोड का One Tap शुरू नहीं हो पाएगा और बंद हो जाएगा.

intermediate_iframe_close_callback

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

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

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

itp_support

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

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

login_hint

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

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

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

hd

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

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

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

use_fedcm_for_prompt

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

टाइप ज़रूरी है उदाहरण
बूलियन बहिष्कृत use_fedcm_for_prompt: true

use_fedcm_for_button

इस फ़ील्ड से यह तय होता है कि Chrome (डेस्कटॉप M125+ और Android M128+) पर FedCM बटन UX का इस्तेमाल किया जाना चाहिए या नहीं. इसकी डिफ़ॉल्ट वैल्यू false होती है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:

टाइप ज़रूरी है उदाहरण
बूलियन वैकल्पिक use_fedcm_for_button: true

button_auto_select

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

टाइप ज़रूरी है उदाहरण
बूलियन वैकल्पिक button_auto_select: true

तरीका: google.accounts.id.prompt

google.accounts.id.prompt तरीके को लागू करने के बाद, google.accounts.id.prompt तरीके से One Tap प्रॉम्प्ट या ब्राउज़र में पहले से मौजूद Credential Manager दिखता है.initialize() इस तरीके का कोड उदाहरण यहां दिया गया है:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

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

सूचनाएं इन स्थितियों में भेजी जाती हैं:

  • डिसप्ले मोमेंट: यह prompt() तरीके को कॉल करने के बाद होता है. सूचना में एक बूलियन वैल्यू होती है. इससे यह पता चलता है कि यूज़र इंटरफ़ेस (यूआई) दिखाया गया है या नहीं.

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

    ऐसे मामलों में, हमारा सुझाव है कि आप अगले आइडेंटिटी प्रोवाइडर पर जाएं.

  • सूचना खारिज की गई: ऐसा तब होता है, जब Google किसी क्रेडेंशियल को वापस पा लेता है या कोई उपयोगकर्ता क्रेडेंशियल वापस पाने की प्रोसेस को रोकना चाहता है. उदाहरण के लिए, जब उपयोगकर्ता आपके लॉगिन डायलॉग में अपना उपयोगकर्ता नाम और पासवर्ड डालना शुरू करता है, तब google.accounts.id.cancel() तरीके को कॉल करके, One Tap प्रॉम्प्ट को बंद किया जा सकता है. साथ ही, खारिज किए गए पल को ट्रिगर किया जा सकता है.

यहां दिए गए कोड के उदाहरण में, स्किप किए गए पल को लागू करने का तरीका बताया गया है:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

डेटा टाइप: PromptMomentNotification

यहां दी गई टेबल में, PromptMomentNotification डेटा टाइप के तरीकों और उनके बारे में जानकारी दी गई है:

तरीका
isDisplayMoment() अगर One Tap प्रॉम्प्ट दिखता है, तो true दिखाता है.

ध्यान दें: FedCM चालू होने पर, यह सूचना नहीं भेजी जाती. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
isDisplayed() अगर मोमेंट टाइप true है और एक टैप वाला प्रॉम्प्ट दिखता है, तो true दिखाता है.PromptMoment.DISPLAY

ध्यान दें: FedCM चालू होने पर, यह सूचना नहीं भेजी जाती. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
isNotDisplayed() अगर मोमेंट टाइप PromptMoment.DISPLAY है और One Tap प्रॉम्प्ट नहीं दिखाया जाता है, तो true दिखाता है.

ध्यान दें: FedCM चालू होने पर, यह सूचना नहीं भेजी जा सकती. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
getNotDisplayedReason()

यूआई न दिखने की वजह के बारे में पूरी जानकारी. ये वैल्यू इस्तेमाल की जा सकती हैं:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
ध्यान दें: FedCM चालू होने पर, इस सूचना का इस्तेमाल नहीं किया जा सकता. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
isSkippedMoment() अगर मोमेंट टाइप PromptMoment.SKIPPED

है, तो true दिखाता है PromptMoment.SKIPPED

ध्यान दें: FedCM चालू होने पर, यह तरीका कुछ हद तक काम करता है. खास तौर पर, यह user_cancel के स्किप किए जाने की वजह के बारे में नहीं बताता. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
getSkippedReason()

छोड़े गए पल की वजह के बारे में ज़्यादा जानकारी. ये वैल्यू इस्तेमाल की जा सकती हैं:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
ध्यान दें: FedCM के चालू होने पर, यह तरीका कुछ हद तक काम करता है. खास तौर पर, यह user_cancel के लिए, स्किप किए जाने की वजह नहीं बताता. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
isDismissedMoment() अगर मोमेंट का टाइप PromptMoment.DISMISSED है, तो true दिखाता है.

ध्यान दें: FedCM चालू होने पर, यह तरीका पूरी तरह से काम करता है. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
getDismissedReason()

शिकायत खारिज किए जाने की वजह के बारे में पूरी जानकारी. ये वैल्यू इस्तेमाल की जा सकती हैं:

  • credential_returned
  • cancel_called
  • flow_restarted
ध्यान दें: FedCM चालू होने पर, यह तरीका पूरी तरह से काम करता है. ज़्यादा जानकारी के लिए, FedCM पर माइग्रेट करना पेज देखें.
getMomentType()

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

  • display
  • skipped
  • dismissed

डेटा टाइप: CredentialResponse

callback फ़ंक्शन को शुरू करने पर, CredentialResponse ऑब्जेक्ट को पैरामीटर के तौर पर पास किया जाता है. यहां दी गई टेबल में, क्रेडेंशियल रिस्पॉन्स ऑब्जेक्ट में मौजूद फ़ील्ड की सूची दी गई है:

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

क्रेडेंशियल

यह फ़ील्ड, base64-एनकोडेड JSON Web Token (JWT) स्ट्रिंग के तौर पर आईडी टोकन होता है.

डिकोड करने पर, JWT कुछ ऐसा दिखता है: 

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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "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": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

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

राज्य

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

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

तरीका: google.accounts.id.renderButton

google.accounts.id.renderButton तरीके से, आपके वेब पेजों में 'Google से साइन इन करें' बटन रेंडर होता है.

इस तरीके का कोड उदाहरण यहां दिया गया है:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

डेटा टाइप: GsiButtonConfiguration

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

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

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

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

टाइप

बटन का टाइप. डिफ़ॉल्ट वैल्यूstandard है

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

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

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

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

थीम

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

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

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

थीम सैंपल विशेषताएं
outline
standard-button-white icon-button-white personalized-button-white
यह स्टैंडर्ड बटन थीम है.
Fill: #FFFFFF
Stroke: #747775 | 1px | inside
Font: #1F1F1F | Roboto Medium | 14/20
Personalized: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13
filled_blue
नीले रंग से भरे बटन वाली थीम.
भरे हुए रंग का कोड: #0B57D0
स्ट्रोक: #OB57D0 | 1 पिक्सल | अंदर की ओर
फ़ॉन्ट: #FFFFFF | Google Sans Medium | 14/20
व्यक्तिगत जानकारी के हिसाब से बनाए गए: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
filled_black
काले रंग से भरा बटन, जिसमें कंट्रास्ट वाला लोगो है.
Fill: #202124
Stroke: #OB57D0 | 1px | inside
Font: #FFFFFF | Google Sans Medium | 14/20
Personalized: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
outline_dark
काले रंग से भरा हुआ बटन थीम.
Fill: #131314
Stroke: #8E918F | 1px | inside
Font: #FFFFFF | Google Sans Medium | 14/20
Personalized: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13

साइज़

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

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

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

साइज़
large
बड़ा स्टैंडर्ड बटन बड़ा आइकॉन बटन बड़ा, मनमुताबिक बनाया गया बटन
बड़े साइज़ का बटन.
medium
मीडियम स्टैंडर्ड बटन मीडियम आइकॉन वाला बटन
यह मीडियम साइज़ का बटन है.
small
साइन इन करने का छोटा बटन साइन इन करने का छोटा बटन
यह छोटे साइज़ का बटन है.

टेक्स्ट

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

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

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

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

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

आकार

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

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

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

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

logo_alignment

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

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

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

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

चौड़ाई

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

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

टाइप ज़रूरी है उदाहरण
स्ट्रिंग वैकल्पिक width: "400"

locale

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

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

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

टाइप ज़रूरी है उदाहरण
स्ट्रिंग वैकल्पिक locale: "zh_CN"

click_listener

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }

इस उदाहरण में, जब 'Google से साइन इन करें' बटन पर क्लिक किया जाता है, तब 'Google से साइन इन करें' बटन पर क्लिक किया गया... मैसेज को कंसोल में लॉग किया जाता है.

राज्य

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

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

टाइप ज़रूरी है उदाहरण
स्ट्रिंग वैकल्पिक data-state: "button 1"

डेटा टाइप: क्रेडेंशियल

native_callback फ़ंक्शन को शुरू करने पर, Credential ऑब्जेक्ट को पैरामीटर के तौर पर पास किया जाता है. नीचे दी गई टेबल में, ऑब्जेक्ट में मौजूद फ़ील्ड की सूची दी गई है:

फ़ील्ड
id यह कुकी, उपयोगकर्ता की पहचान करती है.
password पासवर्ड

तरीका: google.accounts.id.disableAutoSelect

जब उपयोगकर्ता आपकी वेबसाइट से साइन आउट करता है, तो आपको कुकी में स्थिति रिकॉर्ड करने के लिए, google.accounts.id.disableAutoSelect तरीके को कॉल करना होगा. इससे यूज़र एक्सपीरियंस (यूएक्स) के डेड लूप को रोका जा सकता है. यहां दिए गए तरीके का कोड स्निपेट देखें:

google.accounts.id.disableAutoSelect()

यहां दिए गए कोड के उदाहरण में, onSignout() फ़ंक्शन के साथ google.accounts.id.disableAutoSelect तरीके को लागू करने का तरीका बताया गया है:

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

तरीका: google.accounts.id.storeCredential

यह तरीका, ब्राउज़र में पहले से मौजूद क्रेडेंशियल मैनेजर एपीआई के store() तरीके के लिए रैपर है. इसलिए, इसका इस्तेमाल सिर्फ़ पासवर्ड क्रेडेंशियल को सेव करने के लिए किया जा सकता है. इस तरीके का कोड उदाहरण यहां दिया गया है:

google.accounts.id.storeCredential(Credential, callback)

यहां दिए गए कोड के उदाहरण में, onSignIn() फ़ंक्शन के साथ google.accounts.id.storeCredential तरीके को लागू करने का तरीका बताया गया है:

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

तरीका: google.accounts.id.cancel

अगर आपने Relying Party के DOM से प्रॉम्प्ट हटा दिया है, तो One Tap फ़्लो को रद्द किया जा सकता है. अगर कोई क्रेडेंशियल पहले से चुना गया है, तो रद्द करने की कार्रवाई को अनदेखा कर दिया जाता है. इस तरीके का कोड उदाहरण यहां दिया गया है:

google.accounts.id.cancel()

यहां दिए गए कोड के उदाहरण में, google.accounts.id.cancel() फ़ंक्शन के साथ google.accounts.id.cancel() तरीके को लागू करने का तरीका बताया गया है:onNextButtonClicked()

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

लाइब्रेरी लोड होने पर कॉल किया जाने वाला फ़ंक्शन: onGoogleLibraryLoad

onGoogleLibraryLoad कॉलबैक रजिस्टर किया जा सकता है. इसकी सूचना, 'Google से साइन इन करें' सुविधा की JavaScript लाइब्रेरी लोड होने के बाद दी जाती है:

window.onGoogleLibraryLoad = () => {
    ...
};

यह कॉलबैक, window.onload कॉलबैक का शॉर्टकट है. इनमें कोई अंतर नहीं है.

यहां दिए गए कोड के उदाहरण में, onGoogleLibraryLoad कॉलबैक को लागू करने का तरीका बताया गया है:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

तरीका: google.accounts.id.revoke

google.accounts.id.revoke तरीका, उस OAuth के इस्तेमाल की अनुमति को रद्द करता है जिसका इस्तेमाल, बताए गए उपयोगकर्ता के लिए आईडी टोकन शेयर करने के लिए किया गया था. इस तरीके का कोड स्निपेट यहां दिया गया है: javascript google.accounts.id.revoke(login_hint, callback)

पैरामीटर टाइप ब्यौरा
login_hint स्ट्रिंग उपयोगकर्ता के Google खाते का ईमेल पता या यूनीक आईडी. आईडी, credential पेलोड की sub प्रॉपर्टी है.
callback फ़ंक्शन ज़रूरी नहीं है कि RevocationResponse हैंडलर मौजूद हो.

नीचे दिए गए कोड सैंपल में, आईडी के साथ revoke तरीके का इस्तेमाल करने का तरीका बताया गया है. 

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

डेटा टाइप: RevocationResponse

callback फ़ंक्शन को शुरू करने पर, RevocationResponse ऑब्जेक्ट को पैरामीटर के तौर पर पास किया जाता है. यहां दी गई टेबल में, रद्द करने के अनुरोध के जवाब वाले ऑब्जेक्ट में मौजूद फ़ील्ड दिए गए हैं:

फ़ील्ड
successful यह फ़ील्ड, तरीके को कॉल करने पर मिलने वाली वैल्यू है.
error इस फ़ील्ड में, गड़बड़ी के जवाब का पूरा मैसेज शामिल होता है. हालांकि, यह ज़रूरी नहीं है.

हो गया

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

गड़बड़ी

यह फ़ील्ड एक स्ट्रिंग वैल्यू है. अगर revoke करने का तरीका कॉल पूरा नहीं होता है, तो इसमें गड़बड़ी का मैसेज होता है. अगर कॉल पूरा हो जाता है, तो यह अपरिभाषित होता है.