चेतावनी: यह डेटा Google उपयोगकर्ता डेटा नीति के तहत दिया जाता है. कृपया समीक्षा करें और नीति का पालन करें. ऐसा न करने पर, प्रोजेक्ट या खाता निलंबित हो सकता है.

Google JavaScript एपीआई से साइन इन करें

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

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

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

google.accounts.id.initialize(IdConfiguration)

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

<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 डेटा टाइप के फ़ील्ड और जानकारी की सूची दी गई है:

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

client_id

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

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

अपने-आप चुनने की सुविधा

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

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

कॉलबैक

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

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

Login_uri

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

जब उपयोगकर्ता '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

नेटिव_कॉलबैक

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

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

रद्द करें_on_tap_outसाइड

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

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

प्रॉम्प्ट_parent_id

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

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

नॉन्स

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

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

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

संदर्भ

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

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

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

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

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

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

ux_mode

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

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

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

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

allow_parent_origin

ऐसे ऑरिजिन जिन्हें बीच के iframe को एम्बेड करने की अनुमति है. अगर यह फ़ील्ड दिखता है, तो एक टैप करके इंटरमीडिएट 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 मोड की 'एक टैप' शुरू नहीं हो पाएगी.

मध्यवर्ती_iframe_closed_callback

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

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

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

आईटीपी_सहायता

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

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

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

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

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

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

सूचनाएं इन पलों में मिलती हैं:

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

    ऐसे मामलों में, हमारा सुझाव है कि आप पहचान देने वाली अगली कंपनियों पर जारी रखें अगर कोई हो.

  • खारिज किया गया मोमेंट: ऐसा तब होता है, जब Google किसी क्रेडेंशियल को वापस हासिल कर लेता है या कोई उपयोगकर्ता क्रेडेंशियल वापस पाने के फ़्लो को रोकना चाहता है. उदाहरण के लिए, जब उपयोगकर्ता आपके लॉगिन डायलॉग में उपयोगकर्ता नाम और पासवर्ड डालना शुरू करता है, तो आप एक टैप वाले अनुरोध को बंद करने और खारिज किए गए पल को ट्रिगर करने के लिए 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() क्या यह सूचना डिसप्ले के समय के लिए है?
isDisplayed() क्या यह सूचना डिसप्ले के दौरान दिखती है और यूज़र इंटरफ़ेस (यूआई) दिखती है?
isNotDisplayed() क्या यह सूचना डिसप्ले समय पर लागू होती है और यूज़र इंटरफ़ेस (यूआई) नहीं दिखता?
getNotDisplayedReason()

यूज़र इंटरफ़ेस (यूआई) के डिसप्ले न होने की पूरी वजह. ये वैल्यू इस तरह की हो सकती हैं:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
isSkippedMoment() क्या यह सूचना स्किप किए गए किसी खास पल के लिए है?
getSkippedReason()

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

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
isDismissedMoment() क्या यह सूचना खारिज किए गए पल के लिए है?
getDismissedReason()

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

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

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

  • display
  • skipped
  • dismissed

डेटा टाइप: credentialResponse

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

फ़ील्ड
credential यह फ़ील्ड, लौटाए गए आईडी का टोकन है.
select_by इस फ़ील्ड में, क्रेडेंशियल चुने जाने का तरीका सेट किया जाता है.

क्रेडेंशियल

यह फ़ील्ड, आईडी टोकन है, जो base64-एनकोडेड JSON वेब टोकन (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 खाते के लिए दुनिया भर में इस्तेमाल होने वाला यूनीक आइडेंटिफ़ायर शामिल है.

email, email_verified, और hd फ़ील्ड का इस्तेमाल करके, यह पता लगाया जा सकता है कि Google, ईमेल पते को होस्ट कर सकता है या नहीं. जिन मामलों में Google, आधिकारिक होता है और जिन्हें इस समय खाते का असली मालिक माना जाता है.

ऐसे मामलों में जहां Google को अनुमति मिली है:

  • email का @gmail.com सफ़िक्स है. यह एक Gmail खाता है.
  • email_verified सही है और hd सेट है, यह G Suite खाता है.

उपयोगकर्ता, Gmail या G Suite का इस्तेमाल किए बिना Google खातों के लिए रजिस्टर कर सकते हैं. जब email में @gmail.com सफ़िक्स शामिल न हो और hd न हो, तो Google को आधिकारिक पासवर्ड नहीं माना जाता. उपयोगकर्ता को पुष्टि करने के अन्य तरीकों का सुझाव भी दिया जाता है. email_verfied को भी सही माना जा सकता है, क्योंकि Google खाता बनाते समय, Google ने उपयोगकर्ता की पुष्टि पहले ही की थी, हालांकि हो सकता है कि तीसरे पक्ष के ईमेल खाते के मालिकाना हक में बदलाव हो गया हो.

Select_by

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

  • उपयोगकर्ता ने एक बार टैप करके या Google से साइन इन करें बटन को दबाया या टच किए बिना अपने-आप साइन इन करने की सुविधा का इस्तेमाल किया.

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

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

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

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

वैल्यू ब्यौरा
auto किसी मौजूदा सेशन वाले उपयोगकर्ता का अपने-आप साइन इन होना, जिसने पहले क्रेडेंशियल शेयर करने की सहमति दी थी.
user पहले से सहमति दे चुके मौजूदा उपयोगकर्ता ने One टैप और #39; इस रूप में जारी रखें' बटन दबाकर क्रेडेंशियल शेयर किए.
user_1tap मौजूदा सेशन वाले उपयोगकर्ता ने One टैप करके #39;इस रूप में जारी रखें' बटन दबाया, ताकि सहमति दी जा सके और क्रेडेंशियल शेयर किए जा सकें. सिर्फ़ Chrome v75 और इसके बाद वाले वर्शन पर लागू होता है.
user_2tap किसी मौजूदा सेशन के बिना उपयोगकर्ता ने One टैप करके #39; इस रूप में जारी रखें' बटन दबाया. फिर सहमति देने और शेयर करने के लिए पॉप-अप विंडो में 'पुष्टि करें' बटन दबाएं. गैर-Chromium पर आधारित ब्राउज़र पर लागू होता है.
btn पहले से सहमति देने वाले मौजूदा सेशन के उपयोगकर्ता ने 'Google से साइन इन करें' बटन दबाया और क्रेडेंशियल शेयर करने के लिए, ''कोई खाता चुनें' में से कोई Google खाता चुना.
btn_confirm किसी मौजूदा सेशन वाले उपयोगकर्ता ने 'Google से साइन इन करें' बटन दबाया और सहमति देने और क्रेडेंशियल शेयर करने के लिए, 'पुष्टि करें' बटन दबाया.
btn_add_session पहले से सहमति दे चुके किसी उपयोगकर्ता ने Google खाते को चुनने और क्रेडेंशियल शेयर करने के लिए 'Google से साइन इन करें' बटन दबाया है.
btn_confirm_add_session बिना सेशन वाले किसी उपयोगकर्ता ने पहले Google खाता चुनने के लिए, 'Google से साइन इन करें' बटन दबाया. इसके बाद, क्रेडेंशियल शेयर करने और सहमति देने के लिए, 'पुष्टि करें' बटन दबाएं.

तरीका: 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 इस नीति को सेट करने पर, बटन की भाषा रेंडर होती है.

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

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

टाइप

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

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

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

नीचे दी गई सूची में, बटन के टाइप और उनकी जानकारी दी गई है:

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

theme

बटन की थीम. डिफ़ॉल्ट वैल्यू 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 की तरह ही होगा.

लोगो_ संरेखण

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

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

नीचे दी गई टेबल में, अलाइनमेंट के बारे में जानकारी दी गई है और उसकी जानकारी दी गई है:

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

width

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

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

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

स्थान-भाषा

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

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

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

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

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

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

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

जब उपयोगकर्ता आपकी वेबसाइट से साइन आउट हो जाता है, तब कुकी में स्टेटस रिकॉर्ड करने के लिए, आपको 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

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

google.accounts.id.cancel()

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

<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.revok

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

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

कोड के इस नमूने में आईडी के साथ revoke तरीके का इस्तेमाल करने का तरीका बताया गया है.

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

डेटा टाइप: RevocationResponse

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

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

हो गया

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

गड़बड़ी

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