'Google से साइन इन करें' JavaScript API का रेफ़रंस

इस रेफ़रंस पेज पर, Sign-In JavaScript API के बारे में बताया गया है. इस एपीआई का इस्तेमाल किया जा सकता है का इस्तेमाल करें.

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

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

google.accounts.id.initialize(IdConfiguration)

कोड का यह उदाहरण, 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 से साइन इन करें' क्लाइंट बनाया जाता है जिसे उसी वेब पेज के सभी मॉड्यूल द्वारा अस्पष्ट रूप से उपयोग किया जा सके.

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

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

डेटा टाइप: IdConfiguration

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

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

client_id

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

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

auto_select

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

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

कॉलबैक

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

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

login_uri

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

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

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

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

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

टाइप वैकल्पिक उदाहरण
यूआरएल डिफ़ॉल्ट तौर पर, यह मौजूदा पेज के यूआरआई या आपकी तय की गई वैल्यू पर सेट होता है.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब ux_mode: "redirect" सेट हो.		 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

native_callback

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

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

cancel_on_tap_outside

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

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

prompt_parent_id

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

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

नॉन्स

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

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

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

संदर्भ

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

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

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

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

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

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

ux_mode

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

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

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

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

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 फ़ील्ड की वैल्यू अमान्य है, तो One Tap की सुविधा को इंटरमीडिएट iframe मोड शुरू नहीं हो पाएगा और रुक जाएगा.

intermediate_iframe_close_callback

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

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 को लॉगिन संकेत दें. सफल होने पर, खाता चुनना छोड़ दिया जाता है. स्वीकार की जाने वाली वैल्यू ये हैं: ईमेल पता या आईडी टोकन सब फ़ील्ड वैल्यू.

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

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

hd

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

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

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

use_fedcm_for_prompt

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

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

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

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

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

आम तौर पर, पेज लोड होने पर prompt() तरीके को कॉल किया जाता है. सेशन की वजह से स्थिति और उपयोगकर्ता सेटिंग दिखाई देती हैं, तो हो सकता है कि 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() क्या यह सूचना, डिसप्ले मोमेंट के लिए है?

ध्यान दें: जब FedCM चालू है, तो यह सूचना चालू नहीं होगी. यहां जाएं: FedCM पर माइग्रेट करें ज़्यादा जानकारी के लिए, हमारे पेज पर जाएं.
isDisplayed() क्या यह सूचना, डिसप्ले मोमेंट के लिए है और यूज़र इंटरफ़ेस (यूआई) दिखाया जा रहा है?

ध्यान दें: जब FedCM चालू है, तो यह सूचना चालू नहीं होगी. यहां जाएं: FedCM पर माइग्रेट करें ज़्यादा जानकारी के लिए, हमारे पेज पर जाएं.
isNotDisplayed() क्या यह सूचना, डिसप्ले मोमेंट के लिए है और यूज़र इंटरफ़ेस (यूआई) को दिखाया जा रहा है?

ध्यान दें: जब 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() क्या यह सूचना, स्किप किए गए पल के लिए है?
getSkippedReason()

स्किप किए जाने की वजह की पूरी जानकारी. ये हैं संभावित वैल्यू:

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

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

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

मोमेंट के टाइप के लिए स्ट्रिंग दिखाएं. इस तरह की समस्याएं हो सकती हैं मान:

  • display
  • skipped
  • dismissed

डेटा टाइप: CredentialResponse

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

फ़ील्ड
credential यह फ़ील्ड, लौटाया गया आईडी टोकन होता है.
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 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": "Elisa",
  "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_verfied भी सही हो सकता है, क्योंकि Google ने शुरुआत में इसकी पुष्टि की है Google खाता बनाए जाने के समय उपयोगकर्ता, हालांकि तीसरे पक्ष के मालिकाना हक पार्टी का ईमेल खाता शायद बदल गया हो.

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

select_by

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

  • उपयोगकर्ता ने One Tap या 'Google से साइन इन करें' बटन पर टैप किया या किसी का इस्तेमाल करें.

  • कोई मौजूदा सत्र मिला या उपयोगकर्ता ने किसी नया सेशन शुरू करने के लिए Google खाता.

  • आपके ऐप्लिकेशन के साथ आईडी टोकन के क्रेडेंशियल शेयर करने से पहले, उपयोगकर्ता या तो

    • क्रेडेंशियल शेयर करने की सहमति देने के लिए, 'पुष्टि करें' बटन पर टैप किया. या
    • ने पहले सहमति दी थी और Google खाता.

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

मान ब्यौरा
auto मौजूदा सेशन वाले ऐसे उपयोगकर्ता का अपने-आप साइन-इन होना जिसने को पहले क्रेडेंशियल शेयर करने की सहमति दी थी. केवल इस पर लागू होता है ऐसे ब्राउज़र जिनमें FedCM का इस्तेमाल नहीं किया जा सकता.
user मौजूदा सेशन में शामिल ऐसा उपयोगकर्ता जिसने पहले सहमति दी थी वन टैप 'इस रूप में जारी रखें' को दबाया गया बटन क्लिक करें. लागू होता है यह सुविधा सिर्फ़ उन ब्राउज़र पर काम करती है जो FedCM के साथ काम नहीं करते.
fedcm किसी उपयोगकर्ता ने एक टैप 'इस रूप में जारी रखें' दबाया शेयर करने के लिए बटन का इस्तेमाल कर रहे हैं. सिर्फ़ FedCM पर लागू होता है काम करता है ब्राउज़र खोलें.
fedcm_auto मौजूदा सेशन वाले ऐसे उपयोगकर्ता का अपने-आप साइन-इन होना जिसने पहले FedCM One Tap का इस्तेमाल करके, क्रेडेंशियल शेयर करने की सहमति दी थी. सिर्फ़ FedCM पर लागू होता है काम करता है ब्राउज़र खोलें.
user_1tap पहले से मौजूद सेशन वाले उपयोगकर्ता ने एक टैप 'इस रूप में जारी रखें' दबाया सहमति देने और क्रेडेंशियल शेयर करने के लिए बटन. केवल Chrome पर लागू होता है वर्शन 75 और उसके बाद के वर्शन हैं.
user_2tap ऐसे उपयोगकर्ता ने एक टैप किया है जिसका कोई सेशन पहले से मौजूद नहीं है. इस बटन पर टैप करने के बाद, 'इस रूप में जारी रखें' बटन दबाएं बटन चुनने के बाद, 'पुष्टि करें' बटन पर क्लिक करके सहमति देने और क्रेडेंशियल शेयर करने के लिए पॉप-अप विंडो. इस पर लागू होती है बिना Chromium पर आधारित ब्राउज़र.
btn मौजूदा सेशन में इस्तेमाल करने वाला ऐसा उपयोगकर्ता जिसने पहले सहमति दी थी 'Google से साइन इन करें' बटन पर क्लिक किया है और यहां से एक Google खाता चुना है 'कोई खाता चुनें' पर जाएं.
btn_confirm पहले से मौजूद सेशन में शामिल उपयोगकर्ता ने 'Google से साइन इन करें' बटन पर टैप किया है और सहमति देने और क्रेडेंशियल शेयर करने के लिए, 'पुष्टि करें' बटन पर टैप करें.
btn_add_session ऐसा उपयोगकर्ता जिसके पास पहले से कोई सेशन नहीं है, जिसने पहले अनुमति दी थी Google खाता चुनने के लिए, 'Google से साइन इन करें' बटन पर क्लिक किया गया और क्रेडेंशियल शेयर करें.
btn_confirm_add_session ऐसे उपयोगकर्ता ने पहली बार 'Google से साइन इन करें' बटन दबाया है जिसका कोई सेशन पहले से मौजूद नहीं है 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 बटन की थीम. उदाहरण के लिए, फ़िल्टर किया गया नीला या भरा हुआ नीला रंग.
size बटन का साइज़. उदाहरण के लिए, छोटा या बड़ा.
text बटन का टेक्स्ट. उदाहरण के लिए, "Google से साइन इन करें" या "Google से साइन अप करें".
shape बटन का आकार. उदाहरण के लिए, आयताकार या सर्कुलर.
logo_alignment Google लोगो संरेखण: बाईं ओर या बीच में.
width बटन की चौड़ाई, पिक्सल में.
locale अगर यह नीति सेट है, तो बटन की भाषा रेंडर की जाती है.
click_listener अगर यह फ़ंक्शन सेट है, तो 'Google से साइन इन करें' सुविधा इस्तेमाल करने पर यह फ़ंक्शन कॉल किया जाता है बटन पर क्लिक किया जाता है.
state अगर यह नीति सेट की जाती है, तो यह स्ट्रिंग आईडी टोकन के साथ दिखती है.

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

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

टाइप

बटन किस तरह का है. डिफ़ॉल्ट वैल्यू standard है.

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

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

नीचे दी गई टेबल में, उपलब्ध बटन और उनके बटन दिए गए हैं विवरण:

टाइप
standard
टेक्स्ट या मनमुताबिक जानकारी दिखाने वाला बटन.
icon
बिना टेक्स्ट वाला आइकॉन बटन.

थीम

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

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

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

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

साइज़

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

स्थान-भाषा

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

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

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

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

click_listener

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

  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. यह UX को लूप में चलाने से रोकता है. इस तरीके का यहां दिया गया कोड स्निपेट देखें:

google.accounts.id.disableAutoSelect()

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

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

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

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

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

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

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

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

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

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 तरीका, चुनिंदा उपयोगकर्ता के लिए आईडी टोकन. इस तरीके का यहां दिया गया कोड स्निपेट देखें: javascript google.accounts.id.revoke(login_hint, callback) अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

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

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

डेटा टाइप: RevocationResponse

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

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

हो गया

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

गड़बड़ी

यह फ़ील्ड एक स्ट्रिंग मान है और इसमें एक विस्तृत गड़बड़ी संदेश शामिल होता है, अगर रद्द करें तरीका कॉल नहीं हुआ, इसकी सफलता के बारे में नहीं बताया गया है.