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

इस गाइड में, इंटिग्रेशन से जुड़ी सभी बड़ी समस्याओं के बारे में बताया गया है.

खास जानकारी में, 'Google से साइन इन करें'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google के एपीआई और सेवाओं को ऐक्सेस करना

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

पुष्टि करने और अनुमति देने के लिए, अलग-अलग यूज़र एक्सपीरियंस (UX)

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

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

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

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

  1. पुष्टि करने और अनुमति देने की प्रक्रिया को अलग करने के लिए, यूज़र एक्सपीरियंस को फिर से तैयार करें.
  2. Google Identity Services JavaScript लाइब्रेरी पर माइग्रेट करें.

HTML API बनाम JavaScript API

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

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

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

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

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

JavaScript API की मदद से, कुछ मामलों में ज़्यादा विकल्प मिलते हैं.

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

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

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

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

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

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

इस सेक्शन में, अपनी वेबसाइट में 'Google से साइन इन करें' बटन को इंटिग्रेट करने से जुड़ी बातों के बारे में बताया गया है.

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

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

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

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

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

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

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

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

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

'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 Sign-In JavaScript लाइब्रेरी की मदद से, साइन इन करने के दौरान उपयोगकर्ताओं को कोई यूज़र इंटरफ़ेस (यूआई) नहीं दिखता था. हालांकि, अपने-आप साइन इन होने पर, उपयोगकर्ताओं को हमेशा कोई यूआई दिखता है. इससे उन्हें यह जानकारी मिलती है कि वे आपकी वेबसाइट में क्यों और कैसे साइन इन हुए हैं. उपयोगकर्ता चाहें, तो सदस्यता रद्द कर सकते हैं.
  • यह उस खाते को अपने-आप चुन लेता है जिसका इस्तेमाल उपयोगकर्ता ने पहले किया था. इससे उपयोगकर्ता को आपकी वेबसाइट पर डुप्लीकेट खाते बनाने से रोका जा सकता है.

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

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

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

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

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

सुझाया गया

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

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

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

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

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

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

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

अगर उपयोगकर्ता किसी दूसरे विकल्प पर क्लिक करता है, तो प्रॉम्प्ट को रद्द करना

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

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

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

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

साइन इन करने के संदर्भ को बदलना

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

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

One Tap के यूज़र इंटरफ़ेस (यूआई) के स्टेटस के बारे में सुनना

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

सभी सबडोमेन पर One Tap

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

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

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

  • अगर कोई उपयोगकर्ता लॉग इन नहीं है, तो नतीजे वाले पेज में 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 कॉलबैक फ़ंक्शन में से किसका इस्तेमाल किया गया है.

आपको मिलने वाले यूज़र एक्सपीरियंस के बारे में यहां बताया गया है.

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

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

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

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

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

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

किसी दूसरी साइट से किए गए फ़र्ज़ी अनुरोध वाले हमलों से बचने के लिए,

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

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

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

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

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

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

    हालांकि, '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 इवेंट के लिए एक लिसनर जोड़ती है. ट्रिगर होने पर, लिसनर आपके एचटीएमएल एपीआई कोड को पार्स करता है और उसे लागू करता है.

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

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