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

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

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

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

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

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

   अहम जानकारी: सुरक्षा वजहों से, iframe में नए Google सेशन जोड़ने की अनुमति नहीं है.

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

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

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

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

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

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

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

   

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

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

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

   अहम जानकारी: अपने वेब पेज को फिर से लोड किए बिना पुष्टि करने का सामान्य तरीका यह है कि JavaScript कॉलबैक हैंडलर के ज़रिए JWT क्रेडेंशियल पाएं. इसके बाद, इसे XmlHttpRequest के ज़रिए अपने सर्वर पर सबमिट करें.

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

   उपयोगकर्ता की साइन इन की स्थिति को अपनी वेबसाइट पर मैनेज किया जा सकेगा.

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

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

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

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

पुष्टि करने और अनुमति देने के लिए UX को अलग करना

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

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

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

UX ट्रांज़िशन और जटिलता को कम करने के लिए, प्रोसेस को दो अलग-अलग चरणों में बांटना एक सामान्य तरीका है.

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

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

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

एचटीएमएल एपीआई बनाम JavaScript API

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

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

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

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

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

  अहम जानकारी: वेब पेज को फिर से लोड किए बिना पुष्टि करने के लिए एक सामान्य तरीका यह है कि JavaScript कॉलबैक हैंडलर से JWT क्रेडेंशियल पाएं. इसके बाद, इसे XmlHttpRequest के ज़रिए अपने सर्वर पर सबमिट करें.

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

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

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

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

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

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

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

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

• revoke
• cancel
• disableAutoSelect
• storeCredential

'Google से साइन इन करें' बटन का इस्तेमाल करना

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

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

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

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

अहम जानकारी: 'Google से साइन इन करें' बटन, पॉप-अप UX के साथ काम करता है.

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

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

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

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

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

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

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

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

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

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

चेतावनी: आपके पास एक वेब पेज में सिर्फ़ एक <div id='g_id_onload' ... ><id> एलिमेंट हो सकता है. अपने वेब पेज में एक से ज़्यादा g_id_onload एलिमेंट कॉपी न करें.

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

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

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

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

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

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

  अहम जानकारी: Google Identity Services की JavaScript लाइब्रेरी को जल्द से जल्द लोड करें, ताकि 'Google से साइन इन करें' बटन दिखाने में लगने वाला समय कम हो.

One Tap के विचार

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

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

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

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

One Tap यूज़र इंटरफ़ेस (यूआई) कब डिसप्ले करें

HTML API की मदद से, One Tap की सुविधा हमेशा पेज लोड होने पर दिखती है. JavaScript की मदद से

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

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

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

सुझाया गया

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

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

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

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

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

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

ध्यान दें: आईटीपी ब्राउज़र पर, One Tap UX की मदद से, अपने-आप साइन इन होने की सुविधा काम नहीं करती.

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

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

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

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

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

One Tap UX की जगह बदलें

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

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

साइन इन करने का तरीका बदलना

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

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

अहम जानकारी: संदर्भ बदलने का तरीका जानने के लिए, वन टैप साइन-इन का कॉन्टेक्स्ट बदलना पढ़ें.

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

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

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

सबडोमेन में एक टैप

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

अहम जानकारी: ज़्यादा जानकारी के लिए, सबडोमेन में एक बार टैप करना पढ़ें.

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

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

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

इस मामले में, One Tap HTML API कोड को जोड़ने या निकालने की ज़िम्मेदारी आपके वेब सर्वर की है.

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

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

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

अहम जानकारी: ज़्यादा जानकारी के लिए, कुकी के साथ वन टैप डिसप्ले को टॉगल करना देखें.

अहम जानकारी: कुकी के साथ रेंडर होने वाले 'Google से साइन इन करें' बटन को टॉगल करने का कोई तरीका नहीं है, क्योंकि आम तौर पर इसका इस्तेमाल कॉन्टेंट पेजों के बजाय, आपके मुख्य लॉगिन डायलॉग में किया जाता है.

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

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

UX पर ध्यान देने वाली बातें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  नहीं. सुरक्षा से जुड़ी समस्याओं की वजह से, उपयोगकर्ताओं को वेबव्यू में 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 का कूल डाउन स्टेटस हट जाएगा. इससे, अगले लॉगिन के लिए One Tap की सुविधा का इस्तेमाल किया जा सकेगा. Google से आने वाले अन्य बटन के फ़्लो, One Tap की कूल-डाउन स्थितियों को साफ़ नहीं कर सकते, क्योंकि वे अलग-अलग JavaScript बाइनरी में होते हैं.

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

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

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

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

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

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