इस रेफ़रंस पेज पर, 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 के साथ इस्तेमाल करें" |
state_cookie_domain
अगर आपको पैरंट डोमेन और उसके सबडोमेन में 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() |
यूज़र इंटरफ़ेस (यूआई) न दिखने की पूरी वजह. ये हैं संभावित वैल्यू:
|
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 |
मौजूदा सेशन में शामिल ऐसा उपयोगकर्ता जिसने पहले सहमति दी थी वन टैप 'इस रूप में जारी रखें' को दबाया गया बटन क्लिक करें. लागू होता है यह सुविधा सिर्फ़ उन ब्राउज़र पर काम करती है जो 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 |
|
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 खाते या ब्राउज़र सेटिंग. 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 |
इस फ़ील्ड में गड़बड़ी के बारे में पूरी जानकारी देने वाला मैसेज वैकल्पिक तौर पर शामिल किया जाता है. |
हो गया
अगर रद्द करने के तरीके का कॉल पूरा हो जाता है, तो यह फ़ील्ड बूलियन वैल्यू होती है या सही पर सेट होती है गड़बड़ी होने पर गलत.
गड़बड़ी
यह फ़ील्ड एक स्ट्रिंग मान है और इसमें एक विस्तृत गड़बड़ी संदेश शामिल होता है, अगर रद्द करें तरीका कॉल नहीं हुआ, इसकी सफलता के बारे में नहीं बताया गया है.