इंटिग्रेशन के बारे में ज़रूरी जानकारी

इस सिलसिलेवार निर्देश से आपको इंटिग्रेशन से जुड़ी सभी बड़ी समस्याओं के बारे में फ़ैसले लेने में मदद मिलती है.

ऐब्स्ट्रैक्ट में Google से साइन इन करें

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

1. उपयोगकर्ता Google की वेबसाइट में साइन इन करते हैं.

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

2. लोग आपके वेब पेज ब्राउज़ करते हैं, जहां One Tap, अपने-आप साइन-इन या 'Google से साइन इन करें' बटन एम्बेड किया गया है.

3. उपयोगकर्ता One Tap, 'Google से साइन इन करें' बटन, और बाद के UX फ़्लो के साथ इंटरैक्ट करते हैं, ताकि:

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

   जब ब्राउज़र में सिर्फ़ एक ही Google सेशन चालू हो, तो

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

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

   

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

4. JSON वेब टोकन (इसे आईडी टोकन भी कहा जाता है) का क्रेडेंशियल, JavaScript कॉलबैक हैंडलर या आपकी बैकएंड सेवा को पोस्ट सबमिट करके शेयर किया जाता है. इसमें उपयोगकर्ता का नाम, ईमेल पता, और प्रोफ़ाइल फ़ोटो शामिल होती है.

   क्लाइंट साइड पर JavaScript कॉलबैक हैंडलर को आईडी टोकन देने का मकसद, आपको इसे JavaScript कोड में डिकोड करने की अनुमति नहीं देना है. इसका मकसद यह है कि आप इसे अपने सर्वर पर अपने तरीके से सबमिट करें. इसका एक अच्छा उदाहरण है XmlHttpRequest का इस्तेमाल करना, ताकि पोस्ट सबमिशन की वजह से पेज को फिर से लोड होने से रोका जा सके.

5. आपके सर्वर पर, Google से जारी किए गए JWT क्रेडेंशियल की पुष्टि की जाती है. साथ ही, इसका इस्तेमाल करके नया खाता बनाया जाता है या आपकी वेबसाइट पर पुष्टि किया गया सेशन बनाया जाता है.

   उपयोगकर्ता की साइन-इन की स्थिति को खुद मैनेज किया जा सकता है.

   उपयोगकर्ता के Google खाते में साइन इन करने की स्थिति और आपका ऐप्लिकेशन, दोनों एक-दूसरे से अलग होते हैं. हालांकि, साइन-इन के दौरान जब आपको यह पता चल जाता है कि उपयोगकर्ता की पुष्टि हो गई है और उसने अपने Google खाते में साइन इन कर लिया है, तब यह नहीं होता. आपकी वेबसाइट पर, साइन इन रहने वाले उपयोगकर्ताओं के सेशन चालू रहने के दौरान, वे साइन इन रहकर, साइन आउट कर सकते हैं या किसी दूसरे Google खाते पर स्विच कर सकते हैं.

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

Google API और सेवाएं ऐक्सेस करें

ऊपर बताए गए तरीके के मुताबिक, आपने पुष्टि करने वाले एपीआई को इंटिग्रेट कर लिया है. हालांकि, अगर आपकी साइट को पुष्टि किए गए उपयोगकर्ताओं की ओर से Google API और सेवाओं को ऐक्सेस करना है, तो आपको ऑथराइज़ेशन एपीआई को भी इंटिग्रेट करना पड़ सकता है. पुष्टि करने से आपकी साइट पर उपयोगकर्ताओं की पुष्टि की जाती है. हालांकि, अनुमति देने से आपकी साइट को Google API और सेवाओं का इस्तेमाल करने के लिए (अलग से) ऐक्सेस टोकन और अनुमतियां मिलती हैं. ज़्यादा जानकारी के लिए, वेब के लिए अनुमति देना देखें.

पुष्टि करने और अनुमति देने के लिए उपयोगकर्ता अनुभव को अलग-अलग करना

अगर आपकी वेबसाइट को पुष्टि करने और अनुमति देने वाले एपीआई, दोनों को कॉल करना है, तो आपको उन्हें अलग-अलग समय पर अलग-अलग कॉल करना होगा. पुष्टि करने और अनुमति देने के पलों को अलग-अलग करना देखें.

अगर आपकी वेबसाइट ने पहले कभी पुष्टि करने और अनुमति वाले टोकन का अनुरोध एक साथ किया है, तो Google Identity Services की JavaScript लाइब्रेरी का इस्तेमाल करते समय, आपको अपने UX में बदलाव करना होगा. इससे पुष्टि करने के समय और अनुमति देने के समय को अलग करने के लिए, आपको अपने UX में बदलाव करना होगा.

• पुष्टि करते समय, आपकी वेबसाइट को One Tap, अपने-आप साइन इन या 'Google से साइन इन करें' बटन के साथ इंटिग्रेट किया जा सकता है. इससे लोगों को आपकी वेबसाइट पर साइन इन या साइन अप करने की सुविधा मिलती है.
• अनुमति देते समय, आपकी वेबसाइट Google API या सेवाओं को ऐक्सेस करने की अनुमतियां और टोकन पाने के लिए, ऑथराइज़ेशन API को शुरू कर सकती है.

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

1. पुष्टि करने और अनुमति देने के समय को अलग करने के लिए, UX को फिर से व्यवस्थित करें.

2. Google Identity Services की JavaScript लाइब्रेरी पर माइग्रेट करें.

HTML API बनाम JavaScript API

अपने वेब पेजों में One Tap, अपने-आप साइन इन या 'Google से साइन इन करें' बटन को इंटिग्रेट करने के लिए, HTML API या JavaScript API का इस्तेमाल किया जा सकता है.

HTML API में आपको पहले से ज़्यादा सुविधाएं मिलती हैं. उदाहरण के लिए,

• पेज लोड होने पर, One Tap या 'Google से साइन इन करें' बटन को रेंडर करना.
• लौटाए गए क्रेडेंशियल को सर्वर साइड एंडपॉइंट पर सबमिट करें. इसकी जानकारी data-login_uri एट्रिब्यूट से दी जाती है. एक टैप के बाद, अपने-आप साइन-इन होने या बटन का पॉप-अप/रीडायरेक्ट UX हो जाने पर.
• डबल सबमिट कुकी की मदद से सीएसआरएफ़ हमलों से बचें.
• एचटीएमएल कोड जनरेट करने के लिए, कोड जनरेटर का इस्तेमाल करें. इसके बाद, उसे अपने एचटीएमएल पेजों में कॉपी करें.

एचटीएमएल एपीआई की मदद से, व्यवहार को पसंद के मुताबिक बनाने के लिए कुछ JavaScript भी लिखी जा सकती है.

• इसके लिए, अपना कॉलबैक हैंडलर लिखें. इसके बाद, फ़ंक्शन का नाम data-callback एट्रिब्यूट पर सेट करें. इसका एक अच्छा उदाहरण यह है कि आपके सर्वर पर लौटाए गए क्रेडेंशियल को सबमिट करने के लिए XmlHttpRequest का इस्तेमाल करें, ताकि डिफ़ॉल्ट पोस्ट सबमिशन की वजह से पेज को फिर से लोड होने से रोका जा सके.

JavaScript API का इस्तेमाल करने पर, आपको नीचे दी गई कुछ स्थितियों में ज़्यादा सुविधाएं मिलती हैं.

• बाद में, One Tap और 'Google से साइन इन करें' बटन को रेंडर करना. उदाहरण के लिए, उपयोगकर्ताओं के मेन्यू से लॉगिन चुनने के बाद.
• एपीआई को कई बार कॉल किया जा रहा है. उदाहरण के लिए, हर बार लॉगिन डायलॉग रेंडर होने पर, 'Google से साइन इन करें' बटन को रेंडर करना ज़रूरी होता है.
• आपके एचटीएमएल पेजों को डाइनैमिक तरीके से जनरेट करना, ताकि उनमें एपीआई-कॉलिंग कोड को एम्बेड करना मुश्किल हो जाए.
• Google Identity Services की JavaScript लाइब्रेरी को काफ़ी बाद में लोड किया जाता है.

एचटीएमएल एपीआई कोड को पेज के ऑनलोड इवेंट या Google Identity Services की JavaScript लाइब्रेरी के ऑनलोड इवेंट में से सिर्फ़ एक बार इस्तेमाल किया जा सकता है. इनमें से जो भी बाद में होगा, यह कोड लागू होगा. अगर एचटीएमएल एपीआई का काम करने का तरीका आपकी उम्मीद के मुताबिक नहीं है, तो आपको JavaScript API का इस्तेमाल करना चाहिए.

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

• अगर आपके एचटीएमएल कोड में <div id='g_id_onload' ... ><id> या <div class='g_id_signin' ...></div> के एक या एक से ज़्यादा एलिमेंट मौजूद हैं, तो आप एचटीएमएल API का इस्तेमाल कर रहे हैं.
• अगर आपके JavaScript कोड में initialize(), prompt() या render() के एक या एक से ज़्यादा तरीकों को इस्तेमाल किया जाता है, तो आप JavaScript API का इस्तेमाल कर रहे हैं. भले ही, वे इनलाइन या अलग की गई JavaScript फ़ाइल से लोड किए गए हों.

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

• revoke
• cancel
• disableAutoSelect
• storeCredential

'Google से साइन इन करें' बटन के बारे में ज़रूरी बातें

पॉप-अप बनाम रीडायरेक्ट

OAuth 2.0 के स्पेसिफ़िकेशन में, एचटीटीपी रीडायरेक्ट करने पर ध्यान दिया जाता है. हालांकि, पॉप-अप डायलॉग को रेंडर करने के लिए कोई दिशा-निर्देश नहीं होता. पॉप-अप UX से, खास तौर पर डेस्कटॉप वेब पर असली उपयोगकर्ताओं को बेहतर UX मिल सकता है. ऐसा इसलिए होता है, क्योंकि उपयोगकर्ताओं को तीसरे पक्ष के पेजों से रीडायरेक्ट नहीं किया जाता. इस वजह से, एक डायलॉग बॉक्स की तरह दिखने वाली पॉप-अप विंडो, अनुमति देने का अनुभव देती है.

पॉप-अप उपयोगकर्ता अनुभव के साथ, आइडेंटिटी प्रोवाइडर को क्लाइंट-साइड क्रॉस-ऑरिजिन कम्यूनिकेशन चैनल बिल्ड करने होंगे, ताकि पॉप-अप विंडो से OAuth के रिस्पॉन्स भेजे जा सकें. इस विंडो में आइडेंटिटी प्रोवाइडर की सहमति वाला पेज उस मुख्य विंडो पर भेजा जाता है जहां तीसरे पक्ष का पेज दिख रहा हो. आम तौर पर, सभी विंडो में OAuth रिस्पॉन्स भेजने और पाने के लिए दोनों ओर JavaScript कोड की ज़रूरत होती है.

पॉप-अप और रीडायरेक्ट UX, दोनों 'Google से साइन इन करें' बटन के साथ काम करते हैं. डिफ़ॉल्ट रूप से, पॉप-अप UX का इस्तेमाल किया जाता है. data-ux_mode एट्रिब्यूट को सेट करके, UX को बदला जा सकता है.

'Google से साइन इन करें' बटन के रीडायरेक्ट फ़्लो और OAuth रीडायरेक्ट फ़्लो में कुछ अंतर होते हैं.

• 'Google से साइन इन करें' बटन के रीडायरेक्ट फ़्लो में, आपके वेब सर्वर पर क्रेडेंशियल सबमिट करने के लिए हमेशा POST तरीके का इस्तेमाल किया जाता है. हालांकि, OAuth रीडायरेक्ट में आम तौर पर GET तरीके का इस्तेमाल किया जाता है.
• 'Google से साइन इन करें' बटन के रीडायरेक्ट फ़्लो से सबमिट किए गए पैरामीटर, OAuth रीडायरेक्ट फ़्लो के पैरामीटर से अलग होते हैं.

एचटीएमएल एपीआई का इस्तेमाल करने वाले डेवलपर के लिए, चाहे किसी भी UX का इस्तेमाल किया गया हो, क्रेडेंशियल को हमेशा data-login_uri में POST तरीके और एक जैसे पैरामीटर के साथ सबमिट किया जाता है. इससे आपको कोड में दूसरे बदलाव किए बिना UX मोड पर स्विच किया जा सकता है. रीडायरेक्ट UX के लिए, data-login_uri को Google API कंसोल में आपके क्लाइंट के लिए अनुमति वाले रीडायरेक्ट यूआरआई में जोड़ना ज़रूरी है.

बटन को पसंद के मुताबिक बनाना

अपने बटन का इस्तेमाल करने की सुविधा उपलब्ध नहीं है. प्रोग्राम के हिसाब से बटन फ़्लो शुरू करने के लिए, कोई एपीआई नहीं है.

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

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

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

एक ही वेब पेज में एक से ज़्यादा बटन जोड़े जा सकते हैं. कोड जनरेटर हर बार सिर्फ़ एक बटन बना सकता है. इसे कई बार चलाया जा सकता है और जनरेट किए गए <div class='g_id_signin' ...></div> कोड को वेब पेज पर कॉपी किया जा सकता है.

बटन को रेंडर करने के सबसे सही तरीके

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

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

यहां 'Google से साइन इन करें' बटन के फ़्लो बटन को दिखाने में लगने वाले समय को कम करने के कुछ सबसे सही तरीके बताए गए हैं.

• Google Identity Services की JavaScript लाइब्रेरी को जल्द से जल्द लोड करें. कुछ दूसरी बड़ी लाइब्रेरी से पहले, खास तौर पर मोबाइल वेब पर JavaScript लाइब्रेरी लोड करने पर विचार करें.

• अगर 'Google से साइन इन करें' बटन सिर्फ़ तब रेंडर होता है, जब उपयोगकर्ता मेन्यू से लॉगिन चुनता है. 'Google से साइन इन करें' बटन को पहले किसी छिपे हुए एलिमेंट में रेंडर किया जा सकता है. इसके बाद, मेन्यू से लॉगिन चुनने के बाद, उपयोगकर्ता को यह बटन दिखने लगेगा.

One Tap का इस्तेमाल करने से पहले ध्यान देने वाली बातें

स्वचालित प्रवेश

अपने-आप साइन इन होने की सुविधा को रद्द करने की सुविधा के ये फ़ायदे हैं.

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

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

One Tap यूज़र इंटरफ़ेस (यूआई) कब दिखाएं

एचटीएमएल एपीआई के साथ, One Tap की मदद से पेज लोड होने पर ही मैसेज दिखता है. JavaScript API की मदद से, आपके पास यह कंट्रोल करने का विकल्प होता है कि One Tap की सुविधा का यूज़र इंटरफ़ेस (यूआई) कब दिखे. ध्यान दें ऐसा हो सकता है कि एपीआई शुरू करने के बाद, One Tap का यूज़र इंटरफ़ेस (यूआई) हमेशा न दिखे. ऐसा नीचे बताई गई कुछ वजहों से हो सकता है.

• ब्राउज़र में कोई Google सेशन चालू नहीं है.
• सभी चालू Google सेशन से ऑप्ट-आउट कर दिया गया है.
• कूलडाउन जारी है.

किसी बटन क्लिक इवेंट पर सिर्फ़ One Tap यूज़र इंटरफ़ेस (यूआई) दिखाने की कोशिश न करें. ऐसा हो सकता है कि One Tap का यूज़र इंटरफ़ेस (यूआई) ऊपर दी गई वजहों से न दिखे. साथ ही, ऐसा भी हो सकता है कि उसका UX ठीक से काम न करे. ऐसा इसलिए, क्योंकि उपयोगकर्ता की कार्रवाई के बाद कुछ भी नहीं दिखेगा. किसी बटन पर क्लिक इवेंट:

सुझाया गया

• अपना लॉगिन डायलॉग दिखाने के लिए, पासवर्ड लॉगिन और 'Google से साइन इन करें' बटन का इस्तेमाल करें. साथ ही, एक ही समय पर One Tap API को कॉल करें. इससे यह पक्का होता है कि उपयोगकर्ताओं को आपकी वेबसाइट पर साइन इन करने के लिए, हमेशा कोई न कोई तरीका उपलब्ध कराया गया है.

इसका सुझाव नहीं दिया जाता

• One Tap की सुविधा के चालू न होने पर, सिर्फ़ One Tap की सुविधा को चालू करके, साइन-इन करने में समस्या आ सकती है.
• One Tap न दिखने पर दूसरा यूज़र इंटरफ़ेस (यूआई) दिखाने के लिए, यूज़र इंटरफ़ेस (यूआई) स्टेटस कॉलबैक का इस्तेमाल करना. इसका सुझाव नहीं दिया जाता, क्योंकि हो सकता है कि यूआई स्टेटस कॉलबैक, आने वाले समय में होने वाली रिलीज़ में फ़ेडरेटेड क्रेडेंशियल मैनेजमेंट के साथ ठीक से काम न करे.

ITP ब्राउज़र पर One Tap

इंटेलिजेंट ट्रैकिंग प्रिवेंशन (आईटीपी) की वजह से, सामान्य One Tap UX, आईटीपी ब्राउज़र पर काम नहीं करता. जैसे- iOS पर Chrome, Safari, और Firefox. इसके बजाय, इन ब्राउज़र पर वेलकम पेज से शुरू होने वाला एक अलग UX उपलब्ध होता है.

अगर आप चाहें, तो आईटीपी ब्राउज़र पर One Tap UX को बंद किया जा सकता है. ज़्यादा जानकारी के लिए, आईटीपी ब्राउज़र पर एक टैप में सहायता लेख पढ़ें.

इस UX को बिना आईटीपी वाले ब्राउज़र पर चालू करने का कोई तरीका नहीं है. जैसे, Android/macOS/Linux और Edge पर Chrome.

अगर उपयोगकर्ता क्लिक करता है, तो सूचना को रद्द करें

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

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

One Tap UX की जगह बदलना

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

साइन-इन करने का कॉन्टेक्स्ट बदलना

One Tap की सुविधा को आपकी वेबसाइट के बड़े UX फ़्लो का हिस्सा होना चाहिए. डिफ़ॉल्ट रूप से, One Tap यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल साइन इन करते समय किया जाता है. यूज़र इंटरफ़ेस (यूआई) की भाषा में कुछ खास शब्द होते हैं, जैसे कि "साइन इन करें." शब्दों का कोई दूसरा सेट बनाने के लिए, संदर्भ एट्रिब्यूट को बदला जा सकता है. आपके पास One Tap हेडर में से कोई एक चुनने का विकल्प होता है, जो आपके UX फ़्लो के हिसाब से सबसे सही हो.

One Tap की यूज़र इंटरफ़ेस (यूआई) स्थिति पर सुनें

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

सबडोमेन में One Tap की सुविधा

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

स्टैटिक एचटीएमएल पेजों में One Tap

डिफ़ॉल्ट रूप से, GIS लाइब्रेरी यह मान लेती है कि आपके वेब पेज डाइनैमिक तरीके से जनरेट हुए हैं. एचटीएमएल कोड जनरेट करते समय, आपका एचटीटीपी सर्वर यह जांच करता है कि उपयोगकर्ता के लॉगिन का स्टेटस क्या है.

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

ऐसे में, One Tap एचटीएमएल एपीआई कोड को जोड़ना या हटाना आपके वेब सर्वर की ज़िम्मेदारी है.

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

• सेशन कुकी मौजूद न होने पर, One Tap फ़्लो ट्रिगर हो जाता है.
• अगर सेशन कुकी मौजूद है, तो One Tap फ़्लो को छोड़ दिया जाता है.

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

सर्वर साइड इंटिग्रेशन

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

उपयोगकर्ता अनुभव से जुड़ी ज़रूरी बातें

आम तौर पर, आपको अपने सर्वर साइड पर रिस्पॉन्स को मैनेज करने के लिए, अपने ऑरिजिन में एक एचटीटीपी एंडपॉइंट जोड़ना होता है. उपयोगकर्ता अनुभव पर इन बातों का असर हो सकता है.

• One Tap या 'Google से साइन इन करें' सुविधा ट्रिगर होती है.
• एचटीएमएल एपीआई या JavaScript API का इस्तेमाल किया जाता है या नहीं.
• रिस्पॉन्स को हैंडल करने के लिए, लॉगिन यूआरआई या JavaScript कॉलबैक फ़ंक्शन का इस्तेमाल किया जाता है या नहीं.

आपको मिलने वाले असल UX के बारे में यहां बताया गया है.

1. 'Google से साइन इन करें' बटन पर UX मोड को रीडायरेक्ट करने के लिए:

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

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

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

3. या फिर (लॉगिन यूआरआई केस वाला एचटीएमएल एपीआई):

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

आपको सुझाव दिया जाता है कि One Tap के जवाब और 'Google से साइन इन करें' बटन के जवाबों को एक ही तरीके से सबमिट करें.

सुरक्षा से जुड़ी बातें

क्रॉस-साइट अनुरोध की जालसाज़ी के हमलों को रोकने के लिए,

• Google Identity Service की क्लाइंट JavaScript लाइब्रेरी से ट्रिगर हुए पोस्ट सबमिशन के लिए, पहले से मौजूद डबल-सबमिट-कुकी पैटर्न का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, अपने सर्वर साइड पर Google आईडी टोकन की पुष्टि करें देखें.
• XmlHttpRequest का इस्तेमाल करके, अपनी साइट का ऑरिजिन सबमिट करने के लिए, कस्टम एचटीटीपी हेडर या ऐसे सुरक्षा तरीकों का इस्तेमाल किया जा सकता है जिन्हें आपकी सुरक्षा टीम ने मंज़ूरी दी हो.

पुष्टि करने के रिस्पॉन्स में आईडी टोकन की पुष्टि करने के लिए, आपको अपने प्लैटफ़ॉर्म के लिए Google API क्लाइंट लाइब्रेरी या अलग-अलग कामों के लिए इस्तेमाल की जाने वाली JWT लाइब्रेरी इस्तेमाल करने का सुझाव दिया जाता है.

अक्सर पूछे जाने वाले सवाल

• क्या वेबव्यू में One Tap and 'Google से साइन इन करें' बटन उपलब्ध है?

  नहीं. सुरक्षा की वजहों से, उपयोगकर्ताओं को वेबव्यू में Google सेशन नहीं जोड़ने चाहिए. इसलिए, वेबव्यू में GIS को बंद कर दिया जाता है, क्योंकि इसमें कोई Google सेशन शामिल नहीं होना चाहिए.

• क्या 'Google से साइन इन करें' बटन का इस्तेमाल किया जा सकता है? नहीं. OAuth सर्वर साइड फ़्लो या 'Google साइन इन' JavaScript की लाइब्रेरी के पुराने वर्शन की मदद से, भरोसा करने वाले पक्ष 'Google साइन इन' बटन के अपने वर्शन बनाने के लिए साइन-इन ब्रैंडिंग के दिशा-निर्देशों का इस्तेमाल कर सकते थे.

  हालांकि, 'Google से साइन इन करें' सुविधा ने इस सुविधा को हटा दिया है. 'Google से साइन इन करें' वाले सभी बटन, Google Identity Services की JavaScript लाइब्रेरी से जनरेट होने चाहिए. इस बदलाव की दो वजहें हैं.

  • कुछ भरोसेमंद पक्षों ने दिशा-निर्देशों का पालन नहीं किया. इसकी वजह से, सभी वेबसाइटों पर 'Google से साइन इन करें' बटन अलग-अलग दिख रहे हैं.
  • लाइब्रेरी से जनरेट करने पर, साइन-इन ब्रैंडिंग के दिशा-निर्देशों में बदलाव होने पर आपको कोई बदलाव करने की ज़रूरत नहीं है.

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

• अगर मेरी वेबसाइट पर सिर्फ़ One Tap की सुविधा चालू है, लेकिन 'Google से साइन इन करें' बटन नहीं है, तो क्या होगा?

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

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

• मेरे एचटीएमएल एपीआई कोड को पार्स कब किया जाता है? क्या मैं बाद में अपना एचटीएमएल एपीआई कोड बदल सकता/सकती हूं?

  Google Identity Services की JavaScript लाइब्रेरी आपके एचटीएमएल एपीआई कोड को JavaScript लाइब्रेरी लोड इवेंट या DomContentLoaded इवेंट, इनमें से जो भी बाद में हो पर पार्स और लागू करती है.

  • अगर JavaScript लाइब्रेरी के लोड होने पर DomContentLoaded इवेंट ट्रिगर होता है, तो आपके एचटीएमएल एपीआई कोड को तुरंत पार्स करके लागू कर दिया जाता है.
  • ऐसा न होने पर, JavaScript लाइब्रेरी DomContentLoaded इवेंट के लिए लिसनर जोड़ देती है. ट्रिगर किए जाने पर, लिसनर आपके एचटीएमएल एपीआई कोड को पार्स करके उसे एक्ज़ीक्यूट करता है.

  यह भी ध्यान रखें कि आपके एचटीएमएल एपीआई कोड को पार्स और एक्ज़ीक्यूट करने की सुविधा एक बार बंद है.

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