इस रेफ़रंस पेज पर, 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 के साथ इस्तेमाल करें" |
state_cookie_domain
अगर आपको पैरंट डोमेन और उसके सबडोमेन में 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() |
यूज़र इंटरफ़ेस (यूआई) न दिखने की पूरी जानकारी. ये वैल्यू हो सकती हैं:
|
isSkippedMoment() |
क्या यह सूचना, स्किप किए गए क्षण के लिए है? |
getSkippedReason() |
स्किप किए गए मोमेंट की वजह के बारे में ज़्यादा जानकारी. ये वैल्यू हो सकती हैं:
|
isDismissedMoment() |
क्या यह सूचना खारिज किए गए पल के लिए है? |
getDismissedReason() |
खारिज करने की वजह के बारे में पूरी जानकारी. ये वैल्यू हो सकती हैं:
|
getMomentType() |
खास पल के लिए स्ट्रिंग दें. ये वैल्यू हो सकती हैं:
|
डेटा टाइप: 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 |
|
signup_with |
|
continue_with |
|
signin |
आकार
बटन का आकार. डिफ़ॉल्ट वैल्यूrectangular
है ज़्यादा जानकारी के लिए,
यह टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | shape: "rectangular" |
नीचे दी गई टेबल में, बटन के उपलब्ध आकार और उनके ब्यौरे दिए गए हैं:
आकार | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
Google लोगो का अलाइनमेंट. डिफ़ॉल्ट वैल्यूleft
है यह एट्रिब्यूट सिर्फ़ standard
बटन टाइप पर लागू होता है. ज़्यादा जानकारी के लिए, यहां दी गई टेबल देखें:
टाइप | ज़रूरी है | उदाहरण |
---|---|---|
स्ट्रिंग | ज़रूरी नहीं | logo_alignment: "center" |
यहां दी गई टेबल में, उपलब्ध अलाइनमेंट और उनके ब्यौरे दिए गए हैं:
logo_alignment | |
---|---|
left |
|
center |
चौड़ाई
बटन की कम से कम चौड़ाई, पिक्सल में. ज़्यादा से ज़्यादा चौड़ाई 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 |
इस फ़ील्ड में, गड़बड़ी के मैसेज के बारे में पूरी जानकारी दी गई है. हालांकि, ऐसा करना ज़रूरी नहीं है. |
हो गया
यह फ़ील्ड एक बूलियन वैल्यू है, जिसे 'सही' पर सेट किया गया है. ऐसा तब होता है, जब 'रद्द करने का तरीका' कॉल पूरा हो गया हो या फ़ेल होने पर गलत हो गया हो.
गड़बड़ी
यह फ़ील्ड एक स्ट्रिंग वैल्यू है. इसमें गड़बड़ी के बारे में पूरी जानकारी देने वाला मैसेज शामिल होता है. अगर 'रद्द करें' कॉल पूरा नहीं हो पाता है, तो इसके सफल होने की कोई जानकारी नहीं होती.