इस पेज पर, 'Google से साइन इन करें' बटन के उपयोगकर्ता अनुभव (यूएक्स) के बारे में बताया गया है.
बटन रेंडरिंग
दिलचस्पी के हिसाब से बनाए गए बटन में, Google के पहले सेशन की प्रोफ़ाइल की जानकारी दिखती है. यह सेशन आपकी वेबसाइट को अनुमति देता है. स्वीकार किए गए Google सेशन से आपकी वेबसाइट पर एक ऐसा खाता जुड़ा होता है जिसने पहले 'Google से साइन इन करें' सुविधा का इस्तेमाल करके साइन इन किया हो.
अगर उपयोगकर्ता को उसकी दिलचस्पी के हिसाब से बटन दिखता है, तो उसे यह जानकारी मिलती है:
- कम से कम एक Google सेशन चालू हो.
- आपकी वेबसाइट पर इससे जुड़ा कोई खाता मौजूद हो.
मनमुताबिक बनाए गए बटन से, उपयोगकर्ताओं को बटन पर क्लिक करने से पहले ही सेशन की स्थिति के बारे में तुरंत पता चल जाता है. यह जानकारी, Google और आपकी वेबसाइट, दोनों पर उपलब्ध होती है. यह सुविधा, उन लोगों के लिए खास तौर पर फ़ायदेमंद है जो आपकी वेबसाइट पर कभी-कभी ही आते हैं. ऐसा हो सकता है कि उन्हें यह याद न रहे कि खाता बनाया गया है या नहीं और किस तरीके से बनाया गया है. आपके हिसाब से बने बटन से उन्हें यह याद दिलाया जाता है कि उन्होंने पहले भी 'Google से साइन इन करें' सुविधा का इस्तेमाल किया था. इसलिए, इससे आपकी वेबसाइट पर डुप्लीकेट खाते बनने से रोकने में मदद मिलती है.
सेशन की स्थिति दिखाने के लिए, मनमुताबिक बनाए गए बटन को इन तरीकों से दिखाया जाता है:
एक सेशन: Google के पास सिर्फ़ एक सेशन होता है. उस सेशन में क्लाइंट को अनुमति दी गई हो और आपकी वेबसाइट पर उससे जुड़ा खाता मौजूद हो.
एक से ज़्यादा सेशन: Google के पास एक से ज़्यादा सेशन हैं. ये सेशन, क्लाइंट को अनुमति देते हैं. खाते के बगल में मौजूद सूची वाले ऐरो से पता चलता है कि खाते को मंज़ूरी मिल गई है. कम से कम एक सेशन में, आपकी वेबसाइट पर मौजूद खाते से जुड़ा डेटा मौजूद हो.
कोई सेशन नहीं: Google के पास कोई सेशन नहीं है या किसी भी सेशन ने अब तक क्लाइंट को मंज़ूरी नहीं दी है.
जब सेशन की स्थिति सही होती है, तब लोगों की दिलचस्पी के हिसाब से बटन अपने-आप दिखता है. हालांकि, ऐसा तब नहीं होता, जब बटन की सेटिंग में लोगों की दिलचस्पी के हिसाब से बटन दिखाने की अनुमति न हो. अगर ये शर्तें पूरी होती हैं, तो दिलचस्पी के हिसाब से बनाया गया बटन नहीं दिखता:
data-typeएट्रिब्यूट की वैल्यूiconहै.data-sizeएट्रिब्यूट कोmediumयाsmallपर सेट किया गया हो.data-widthएट्रिब्यूट की वैल्यू 200 पिक्सल से कम पर सेट है.- तीसरे पक्ष की कुकी ब्लॉक की गई है और बटन का FedCM वर्शन चालू नहीं है.
अगर नाम या ईमेल पता बहुत लंबा है, तो उसे बटन में पूरा नहीं दिखाया जा सकता. ऐसे में, उसे छोटा करके दिखाया जाता है.
Federated Credential Manager (FedCM)
वेब के लिए प्राइवसी सैंडबॉक्स, Google Identity Services और उपयोगकर्ता के साइन इन करने के तरीके में अहम बदलाव करता है. इससे, 'Google से साइन इन करें' सुविधा के लिए, लोगों की दिलचस्पी के हिसाब से बनाए गए बटन पर असर पड़ता है. इस बटन से साइन-इन फ़्लो पर कोई असर नहीं पड़ता. हालांकि, तीसरे पक्ष की कुकी ब्लॉक होने पर, आपकी साइट पर बार-बार आने वाले लोगों को उनकी दिलचस्पी के हिसाब से बटन नहीं दिखेगा.
Federated Credentials Management API (FedCM) बटन फ़्लो की मदद से, उपयोगकर्ताओं को आपकी साइट पर 'Google से साइन इन करें' बटन दिखेगा. FedCM डिफ़ॉल्ट रूप से बंद होता है. हालांकि, एक एट्रिब्यूट (एचटीएमएल/JavaScript) बदलकर FedCM को चालू किया जा सकता है. FedCM बटन के ये फ़ायदे हैं:
वापस आने वाले उपयोगकर्ता को बेहतर अनुभव मिलता है: वापस आने वाले उपयोगकर्ता के लिए साइन-इन करने की प्रोसेस आसान हो जाती है, क्योंकि वे अपने मौजूदा खातों को पहचान सकते हैं. इससे ब्रैंड को बेहतर पहचान मिलती है. साथ ही, क्लिक मिलने की दर (सीटीआर) में बढ़ोतरी होती है. इसके अलावा, FedCM की सुविधा चालू न होने पर बटन फ़्लो में, अपने-आप चुनने की सुविधा काम नहीं करती. वहीं, FedCM की सुविधा चालू होने पर बटन फ़्लो में, यह सुविधा काम करती है. इससे, Google सेशन में लॉग इन किए हुए लोगों को बटन पर क्लिक करने के बाद, अपने-आप साइन इन कर लिया जाता है. उन्हें खाता चुनने के लिए प्रॉम्प्ट नहीं दिखता.
बेहतर तरीके से सुविधाओं को इंटिग्रेट किया गया है: हमने One Tap और अपने-आप साइन इन होने की सुविधाओं को इंटिग्रेट किया है. इससे, फ़ेडरेटेड क्रेडेंशियल मैनेजमेंट (FedCM) की सभी 'Google से साइन इन करें' सुविधाएं, एक ही Relying Party (RP) के साथ मिलकर काम कर सकती हैं. FedCM बटन फ़्लो में उपयोगकर्ता के जेस्चर रिकॉर्ड किए जाएंगे. साथ ही, Chrome उनका इस्तेमाल करेगा. इससे One Tap की मदद से अपने-आप साइन इन करने की सुविधा के लिए, एक बार फिर से पुष्टि करने की प्रोसेस पूरी की जा सकेगी. इससे सभी सुविधाओं का इस्तेमाल आसानी से किया जा सकता है.
उपयोगकर्ता की मुख्य गतिविधियां
उपयोगकर्ता के सफ़र, इन स्थितियों के आधार पर अलग-अलग होते हैं.
Google की वेबसाइटों पर सेशन की स्थिति. उपयोगकर्ता के सफ़र की शुरुआत में, Google सेशन की अलग-अलग स्थितियों के बारे में बताने के लिए, इन शब्दों का इस्तेमाल किया जाता है.
- Has-Google-session: Google की वेबसाइटों पर कम से कम एक चालू सेशन है.
- No-Google-session: Google की वेबसाइटों पर कोई सेशन चालू नहीं है.
इससे यह पता चलता है कि उपयोगकर्ता की यात्रा शुरू होने पर, चुने गए Google खाते ने आपकी वेबसाइट को अनुमति दी है या नहीं. अनुमोदन की अलग-अलग स्थितियों के बारे में बताने के लिए, इन शब्दों का इस्तेमाल किया जाता है.
- नया उपयोगकर्ता: चुने गए खाते ने आपकी वेबसाइट को मंज़ूरी नहीं दी है.
- लौटने वाला उपयोगकर्ता: चुने गए खाते ने आपकी वेबसाइट को पहले भी मंज़ूरी दी है.
Has-Google-session के लिए नए उपयोगकर्ता की यात्रा
FedCM के बिना बटन
'Google से साइन इन करें' बटन.
खाता चुनने वाला पेज.
उपयोगकर्ता की सहमति वाला नया पेज.
उपयोगकर्ता की पुष्टि करने के बाद, आपकी वेबसाइट के साथ आईडी टोकन शेयर किया जाता है.
उपयोगकर्ता, किसी दूसरे खाते का इस्तेमाल करें बटन पर क्लिक करके, नया Google सेशन जोड़ सकते हैं. इसके लिए, No-Google-session उपयोगकर्ता के सफ़र वाला सेक्शन देखें.
FedCM का इस्तेमाल करने वाला बटन
फ़्लो में दूसरी आखिरी स्क्रीन, लोडिंग स्क्रीन होती है. यह उपयोगकर्ताओं को अपने-आप आपके लॉगिन एंडपॉइंट पर रीडायरेक्ट करती है. इसके लिए, उपयोगकर्ताओं को कोई कार्रवाई नहीं करनी पड़ती.
Has-Google-session कुकी वाले लौटने वाले उपयोगकर्ता का सफ़र
FedCM के बिना बटन
'Google से साइन इन करें' बटन.
खाता चुनने वाला पेज.
जब उपयोगकर्ता किसी मौजूदा खाते को चुन लेता है, तब आपकी वेबसाइट के साथ आईडी टोकन शेयर किया जाता है.
उपयोगकर्ता, किसी दूसरे खाते का इस्तेमाल करें बटन पर क्लिक करके, नया Google सेशन जोड़ सकते हैं. इसके लिए, 'नो-Google-सेशन' उपयोगकर्ता के सफ़र वाला सेक्शन देखें.
FedCM का इस्तेमाल करने वाला बटन
फ़्लो में दूसरी आखिरी स्क्रीन, लोडिंग स्क्रीन होती है. यह उपयोगकर्ताओं को अपने-आप आपके लॉगिन एंडपॉइंट पर रीडायरेक्ट करती है. इसके लिए, उपयोगकर्ताओं को कोई कार्रवाई नहीं करनी पड़ती.
Has-Google-session with auto select returning user journey
FedCM के बिना बटन
FedCM के बिना 'Google से साइन इन करें' बटन में, अपने-आप चुनने की सुविधा नहीं होती.
FedCM का इस्तेमाल करने वाला बटन
Google के चालू सेशन वाले मौजूदा उपयोगकर्ताओं को बटन पर क्लिक करने के बाद, अपने-आप चुन लिया जाएगा. इससे खाता चुनने का प्रॉम्प्ट नहीं दिखेगा. auto select एट्रिब्यूट को सही (एचटीएमएल/JavaScript) पर सेट करें.
Google खाते के बिना सेशन शुरू करने वाले नए उपयोगकर्ता का अनुभव
FedCM के बिना बटन
'Google से साइन इन करें' बटन.
नया Google सेशन जोड़ने के लिए पहला पेज.
यह दूसरा पेज है, जहां नया Google सेशन जोड़ा जा सकता है.
उपयोगकर्ता की सहमति वाला नया पेज.
उपयोगकर्ता की पुष्टि करने के बाद, आपकी वेबसाइट के साथ आईडी टोकन शेयर किया जाता है.
FedCM का इस्तेमाल करने वाला बटन
फ़्लो में दूसरी आखिरी स्क्रीन, लोडिंग स्क्रीन होती है. यह उपयोगकर्ताओं को अपने-आप आपके लॉगिन एंडपॉइंट पर रीडायरेक्ट करती है. इसके लिए, उपयोगकर्ताओं को कोई कार्रवाई नहीं करनी पड़ती.
Google खाते से साइन इन न करने वाले उपयोगकर्ता के तौर पर, लौटने वाले व्यक्ति का सफ़र
FedCM के बिना बटन
'Google से साइन इन करें' बटन.
नया Google सेशन जोड़ने के लिए पहला पेज.
यह दूसरा पेज है, जहां नया Google सेशन जोड़ा जा सकता है.
जब उपयोगकर्ता आगे बढ़ें बटन पर क्लिक करता है, तब आपकी वेबसाइट के साथ आईडी टोकन शेयर किया जाता है.
FedCM का इस्तेमाल करने वाला बटन
Family Link खाते से जुड़े मुख्य उपयोगकर्ता अनुभव
पिछले सेक्शन में बताए गए मुख्य उपयोगकर्ता के सामान्य सफ़र अब भी लागू होते हैं. नीचे दी गई इमेज में, बच्चे के Google खाते से साइन इन करने पर दिखने वाला अतिरिक्त फ़्लो दिखाया गया है.
FedCM के बिना बटन
No-Google-session
'Google से साइन इन करें' बटन.
यह पहला पेज है, जहां बच्चे के Google खाते का नया सेशन (बच्चे के Google खाते का ईमेल पता) जोड़ा जाता है.
यह दूसरा पेज है. इस पर, बच्चे के Google खाते का पासवर्ड डालकर, बच्चे का नया Google सेशन जोड़ा जा सकता है.
यह पहला पेज है, जहां माता-पिता या अभिभावक को बच्चे के नए Google सेशन को जोड़ने की अनुमति देनी होती है.
यह दूसरा पेज है. इसमें माता-पिता से, बच्चे के नए Google सेशन को जोड़ने की अनुमति मांगी जाती है.
तीसरा पेज, जिसमें बच्चे के Google खाते का नया सेशन जोड़ने के लिए माता-पिता या अभिभावक से अनुमति मांगी जाती है.
यह पहला पेज है. इस पर, माता-पिता से अनुमति मांगी जाती है, ताकि बच्चे के Google खाते से ऐप्लिकेशन में साइन इन किया जा सके.
यह दूसरा पेज है. इसमें माता-पिता से, बच्चे के Google खाते को ऐप्लिकेशन में साइन इन करने की अनुमति मांगी जाती है.
तीसरा पेज, जिस पर माता-पिता से सहमति ली जाती है, ताकि बच्चे के Google खाते से ऐप्लिकेशन में साइन इन किया जा सके.
यह आखिरी पेज है. इसमें माता-पिता से अनुमति मांगी जाती है, ताकि बच्चे के Google खाते से ऐप्लिकेशन में साइन इन किया जा सके.
जब माता-पिता जारी रखें बटन पर क्लिक करते हैं, तब आपकी वेबसाइट के साथ आईडी टोकन शेयर किया जाता है.
Has-Google-session
'Google से साइन इन करें' बटन.
खाता चुनने वाला पेज.
यह पहला पेज है. इस पर, माता-पिता से अनुमति मांगी जाती है, ताकि बच्चे के Google खाते से ऐप्लिकेशन में साइन इन किया जा सके.
यह दूसरा पेज है. इसमें माता-पिता से, बच्चे के Google खाते को ऐप्लिकेशन में साइन इन करने की अनुमति मांगी जाती है.
तीसरा पेज, जिस पर माता-पिता से सहमति ली जाती है, ताकि बच्चे के Google खाते से ऐप्लिकेशन में साइन इन किया जा सके.
यह आखिरी पेज है. इसमें माता-पिता से अनुमति मांगी जाती है, ताकि बच्चे के Google खाते से ऐप्लिकेशन में साइन इन किया जा सके.
जब माता-पिता जारी रखें बटन पर क्लिक करते हैं, तब आपकी वेबसाइट के साथ आईडी टोकन शेयर किया जाता है.
FedCM का इस्तेमाल करने वाला बटन
फ़िलहाल, FedCM की सुविधा चालू करके 'Google से साइन इन करें' बटन का इस्तेमाल करने पर, Family Link खातों के साथ काम नहीं करता.
FedCM बटन फ़्लो के बारे में अतिरिक्त जानकारी
अगर आपका वेब ऐप्लिकेशन, क्रॉस-ऑरिजिन iframe से Button API को कॉल करता है, तो पैरंट फ़्रेम में
allow="identity-credentials-get"एट्रिब्यूट जोड़ें. ज़्यादा जानकारी के लिए, सातवां चरण देखें.अपनी साइट के कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) को सही तरीके से सेट अप करें. ज़्यादा जानकारी के लिए, आठवां चरण देखें.
Chrome में, कूलडाउन की स्थिति और तीसरे पक्ष के साइन-इन करने की सेटिंग का, FedCM बटन फ़्लो पर कोई असर नहीं पड़ता. स्टेटस (जैसा कि यहां दिए गए स्क्रीनशॉट में दिखाया गया है) का असर सिर्फ़ 'एक टैप करके साइन इन करें' सुविधा के यूज़र एक्सपीरियंस पर पड़ता है.
