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

इस रेफ़रंस पेज पर, Sign-In JavaScript API के बारे में बताया गया है. इस एपीआई का इस्तेमाल, अपने वेब पेजों पर वन टैप प्रॉम्प्ट या 'Google से साइन इन करें' बटन को दिखाने के लिए किया जा सकता है.

तरीका: 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 तरीके को सिर्फ़ एक बार कॉल करना होगा.
  • अगर 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 की सुविधा वाले कंटेनर एलिमेंट का डीओएम आईडी
nonce आईडी टोकन के लिए एक रैंडम स्ट्रिंग
context One Tap की सुविधा में मौजूद शीर्षक और शब्द
state_cookie_domain अगर आपको पैरंट डोमेन और उसके सबडोमेन में One Tap को कॉल करना है, तो पैरंट डोमेन को इस फ़ील्ड में डालें, ताकि शेयर की गई एक कुकी का इस्तेमाल किया जा सके.
ux_mode 'Google से साइन इन करें' बटन का UX फ़्लो
allowed_parent_origin ऐसे ऑरिजिन जिन्हें इंटरमीडिएट iframe को एम्बेड करने की अनुमति है. यह फ़ील्ड मौजूद होने पर, One Tap की सुविधा इंटरमीडिएट iframe मोड में चलती है.
intermediate_iframe_close_callback जब उपयोगकर्ता मैन्युअल तरीके से One Tap को बंद करते हैं, तो यह इंटरमीडिएट iframe के डिफ़ॉल्ट व्यवहार को बदल देता है.
itp_support आईटीपी ब्राउज़र पर अपग्रेड किया गया One Tap UX चालू करता है.
login_hint उपयोगकर्ता सुझाव देकर खाता नहीं चुनें.
hd डोमेन के हिसाब से खाते चुनने की सीमा तय करें.
use_fedcm_for_prompt ब्राउज़र को, उपयोगकर्ता के साइन इन करने के अनुरोधों को कंट्रोल करने और आपकी वेबसाइट और Google के बीच साइन इन करने की प्रोसेस में मध्यस्थता करने की अनुमति दें.

client_id

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

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

auto_select

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

टाइप ज़रूरी है उदाहरण
boolean ज़रूरी नहीं 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 पर सेट करके, इसे बंद किया जा सकता है. ज़्यादा जानकारी के लिए, यह टेबल देखें:

टाइप ज़रूरी है उदाहरण
boolean ज़रूरी नहीं cancel_on_tap_outside: false

prompt_parent_id

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

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

नॉन्स

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

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

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

संदर्भ

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

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

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

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

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

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

ux_mode

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

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

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

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

intermediate_iframe_close_callback

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

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

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

itp_support

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

टाइप ज़रूरी है उदाहरण
boolean ज़रूरी नहीं itp_support: true

login_hint

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

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

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

एचडी

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

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

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

use_fedcm_for_prompt

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

टाइप ज़रूरी है उदाहरण
boolean ज़रूरी नहीं use_fedcm_for_prompt: true

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

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

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

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

सूचनाएं इन मौकों पर ट्रिगर होती हैं:

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

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

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

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

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

डेटा टाइप: PromptMomentसूचना

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

state

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

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

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

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

click_listener

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

  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 से साइन इन करें' बटन पर क्लिक करने पर, कंसोल में लॉग किया जाता है.

state

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

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

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

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

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

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

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

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

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

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

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 खाते का ईमेल पता या यूनीक आईडी. यह आईडी, क्रेडेंशियल पेलोड की sub प्रॉपर्टी है.
callback फ़ंक्शन RevocationResponse हैंडलर की सुविधा का इस्तेमाल करना ज़रूरी नहीं है.

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

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

डेटा टाइप: RevoversionResponse

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

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

हो गया

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

गड़बड़ी

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