FedCM पर माइग्रेट करें

इस गाइड से, आपको अपने वेब ऐप्लिकेशन में हुए उन बदलावों को समझने में मदद मिलती है जिन्हें Federated Credentials Management API (FedCM) ने शुरू किया है.

FedCM चालू होने पर, ब्राउज़र उपयोगकर्ता को प्रॉम्प्ट दिखाता है और तीसरे पक्ष की कुकी का इस्तेमाल नहीं किया जाता.

खास जानकारी

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

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

अपने-आप साइन इन होने की सुविधा के बारे में अपडेट

Google Identity Services के लिए, Federated Credential Management (FedCM) के बीटा वर्शन को अगस्त 2023 में लॉन्च किया गया था. कई डेवलपर ने एपीआई की जांच की है और अहम सुझाव/राय दी है.

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

हाल ही में, Chrome ने M121 में FedCM के अपने-आप साइन इन करने की सुविधा के यूज़र इंटरफ़ेस (यूआई) में बदलाव किया है. पुष्टि दोबारा करने की ज़रूरत सिर्फ़ तब होती है, जब तीसरे पक्ष की कुकी पर पाबंदी लगी हो. इसका मतलब है:

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

  2. अगर उपयोगकर्ताओं ने आज तीसरे पक्ष की कुकी पर मैन्युअल रूप से पाबंदी लगाई है या आने वाले समय में Chrome में डिफ़ॉल्ट रूप से ऐसा किया जाता है, तो FedCM का अपने-आप साइन इन होने की सुविधा, फिर से पुष्टि करने की स्थिति की जांच करेगी.

इस बदलाव के बाद, हमारा सुझाव है कि अपने-आप साइन इन करने की सुविधा देने वाले सभी डेवलपर, जल्द से जल्द FedCM पर माइग्रेट कर लें. इससे, अपने-आप साइन इन करने की सुविधा से मिलने वाले कन्वर्ज़न रेट में आने वाली रुकावट को कम किया जा सकेगा.

अपने-आप साइन इन होने वाले फ़्लो के लिए, GIS JavaScript, पुराने Chrome (M121 से पहले) पर FedCM को ट्रिगर नहीं करेगा. भले ही, आपकी वेबसाइट ने FedCM के लिए ऑप्ट-इन किया हो.

उपयोगकर्ता अनुभव में अंतर

FedCM का इस्तेमाल करके और बिना FedCM का इस्तेमाल करके, One Tap की सुविधा का अनुभव एक जैसा ही होता है. हालांकि, इसमें कुछ छोटे अंतर होते हैं.

एक सेशन वाला नया उपयोगकर्ता

FedCM का इस्तेमाल करने पर, One Tap ऐप्लिकेशन के नाम के बजाय टॉप-लेवल डोमेन नेम दिखाता है.

FedCM का इस्तेमाल करना FedCM के बिना
FedCM का इस्तेमाल करने वाला, एक सेशन वाला नया उपयोगकर्ता FedCM के बिना, एक सेशन वाला नया उपयोगकर्ता

एक सेशन वाला लौटने वाला उपयोगकर्ता (अपने-आप साइन-इन होने की सुविधा बंद है)

FedCM का इस्तेमाल करने पर, One Tap ऐप्लिकेशन के नाम के बजाय टॉप-लेवल डोमेन नेम दिखाता है.

FedCM का इस्तेमाल करना FedCM के बिना
FedCM का इस्तेमाल करके, एक सेशन में लौटने वाले उपयोगकर्ता की यात्रा (अपने-आप साइन-इन होने की सुविधा बंद है) FedCM के बिना, एक सेशन में वापस आने वाले उपयोगकर्ता की यात्रा (अपने-आप साइन-इन होने की सुविधा बंद है)

एक सेशन वाला लौटने वाला उपयोगकर्ता (अपने-आप साइन इन होने की सुविधा चालू है)

FedCM का इस्तेमाल करके, उपयोगकर्ता रद्द करें बटन पर क्लिक करने के बजाय, X पर क्लिक करके, अपने-आप साइन इन होने की सुविधा को पांच सेकंड के अंदर रद्द कर सकते हैं.

FedCM का इस्तेमाल करना FedCM के बिना
FedCM का इस्तेमाल करके, एक सेशन में लौटने वाले उपयोगकर्ता की यात्रा (अपने-आप साइन इन होने की सुविधा चालू है) FedCM के बिना, एक सेशन में वापस आने वाले उपयोगकर्ता की यात्रा (अपने-आप साइन-इन होने की सुविधा चालू है)

एक से ज़्यादा सेशन

FedCM का इस्तेमाल करने पर, One Tap ऐप्लिकेशन के नाम के बजाय टॉप-लेवल डोमेन नेम दिखाता है.

FedCM का इस्तेमाल करना FedCM के बिना
FedCM का इस्तेमाल करने वाला, कई सेशन वाला उपयोगकर्ता FedCM के बिना कई सेशन वाले उपयोगकर्ता

शुरू करने से पहले

देखें कि आपके ब्राउज़र की सेटिंग और वर्शन, FedCM API के साथ काम करता है. हमारा सुझाव है कि आप इसे नए वर्शन पर अपडेट करें.

  • FedCM API, Chrome 117 या इसके बाद के वर्शन में उपलब्ध है.

  • Chrome में तीसरे पक्ष की मदद से साइन-इन करने की सेटिंग चालू हो.

  • अगर आपके Chrome ब्राउज़र का वर्शन 119 या इससे पहले का है, तो chrome://flags खोलें और प्रयोग के तौर पर उपलब्ध FedCmWithoutThirdPartyCookies सुविधा को चालू करें. Chrome ब्राउज़र के 120 या इसके बाद के वर्शन के लिए, यह चरण ज़रूरी नहीं है.

अपने वेब ऐप्लिकेशन को माइग्रेट करना

FedCM को चालू करने, माइग्रेशन के संभावित असर का आकलन करने, और ज़रूरत पड़ने पर अपने मौजूदा वेब ऐप्लिकेशन में बदलाव करने के लिए, यह तरीका अपनाएं:

1. इनका इस्तेमाल करके शुरू करने पर, FedCM को चालू करने के लिए बूलियन फ़्लैग जोड़ें:

2. अपने कोड में isDisplayMoment(), isDisplayed(), isNotDisplayed(), और getNotDisplayedReason() तरीकों का इस्तेमाल हटाएं.

उपयोगकर्ता की निजता को बेहतर बनाने के लिए, google.accounts.id.prompt कॉलबैक अब PromptMomentNotication ऑब्जेक्ट में, डिसप्ले मोमेंट की कोई सूचना नहीं दिखाता. डिसप्ले मोमेंट से जुड़े तरीकों पर निर्भर होने वाला कोई भी कोड हटाएं. ये isDisplayMoment(), isDisplayed(), isNotDisplayed(), और getNotDisplayedReason() तरीके हैं.

3. अपने कोड में getSkippedReason() तरीके का इस्तेमाल हटाएं.

हालांकि, स्किप किए गए हिस्से को isSkippedMoment() के तौर पर, PromptMomentNotication ऑब्जेक्ट में google.accounts.id.prompt कॉलबैक से कॉल किया जाएगा, लेकिन इसकी पूरी वजह नहीं दी जाएगी. अपने कोड से, getSkippedReason() तरीके पर निर्भर करने वाला कोई भी कोड हटाएं.

ध्यान दें कि FedCM चालू होने पर, खारिज किए गए पल की सूचना, isDismissedMoment() और उससे जुड़ी वजह की पूरी जानकारी देने वाला तरीका, getDismissedReason() में कोई बदलाव नहीं होता.

4. data-prompt_parent_id और intermediate_iframes से position स्टाइल एट्रिब्यूट हटाएं.

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

5. अगर ज़रूरी हो, तो पेज का लेआउट अपडेट करें.

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

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

6. अगर आपका वेब ऐप्लिकेशन, क्रॉस-ऑरिजिन iframes से One Tap API को कॉल करता है, तो पैरंट फ़्रेम में allow="identity-credentials-get" एट्रिब्यूट जोड़ें.

किसी iframe को क्रॉस-ओरिजिन तब माना जाता है, जब उसका origin, पैरंट ऑरिजिन से पूरी तरह मेल न खाता हो. उदाहरण के लिए:

  • अलग-अलग डोमेन: https://example1.com और https://example2.com
  • अलग-अलग टॉप लेवल डोमेन: https://example.uk और https://example.jp
  • सबडोमेन: https://example.com और https://login.example.com

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

इस अंतर से गुमराह किया जा सकता है. इसलिए, क्रॉस-ऑरिजिन, लेकिन एक ही साइट के iframe में One Tap का इस्तेमाल करना ही काम करता है. उदाहरण के लिए, टॉप लेवल डोमेन https://www.example.com पर मौजूद कोई पेज, https://login.example.com पर एक टैप करके पेज को एम्बेड करने के लिए iframe का इस्तेमाल करता है. One Tap प्रॉम्प्ट में, "google.com से example.com में साइन इन करें" दिखेगा.

अलग-अलग डोमेन जैसे अन्य सभी मामलों में, यह सुविधा काम नहीं करती. इसके बजाय, इंटिग्रेशन के इन वैकल्पिक तरीकों का इस्तेमाल करें:

  • Google से साइन इन करें बटन लागू करना.
  • टॉप लेवल डोमेन पर One Tap लागू करना
  • ज़्यादा पसंद के मुताबिक इंटिग्रेशन के लिए, Google OAuth 2.0 एंडपॉइंट का इस्तेमाल करना.
  • अगर किसी iframe में तीसरे पक्ष की साइट को जोड़ा जा रहा है और आपके पास 'एक टैप' सुविधा को लागू करने के तरीके में बदलाव करने का विकल्प नहीं है, तो iframe में 'एक टैप' प्रॉम्प्ट दिखने से रोका जा सकता है. ऐसा करने के लिए, पैरंट फ़्रेम में मौजूद iframe टैग से allow="identity-credentials-get" एट्रिब्यूट को हटाएं. इससे प्रॉम्प्ट नहीं दिखेगा. इसके बाद, उपयोगकर्ताओं को सीधे एम्बेड की गई साइट के साइन-इन पेज पर ले जाया जा सकता है.

जब One Tap API को क्रॉस-ऑरिजिन iframes से कॉल किया जाता है, तो आपको हर पैरंट फ़्रेम iframe टैग में allow="identity-credentials-get" एट्रिब्यूट जोड़ना होगा:

  <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

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

उदाहरण के लिए, यह उदाहरण देखें:

  • सबसे ऊपर मौजूद दस्तावेज़ (https://www.example.uk) में "Iframe A" नाम का एक iframe है, जिसमें एक पेज (https://logins.example.com) एम्बेड किया गया है.

  • इस एम्बेड किए गए पेज (https://logins.example.com) में "Iframe B" नाम का एक iframe भी है. इसमें एक और पेज (https://onetap.example2.com) एम्बेड किया गया है, जो One Tap को होस्ट करता है.

    यह पक्का करने के लिए कि One Tap सही तरीके से दिखे, एट्रिब्यूट को Iframe A और Iframe B, दोनों टैग में जोड़ना ज़रूरी है.

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

  • अपने डेवलपर दस्तावेज़ को अपडेट करें, ताकि अपनी साइट को कॉल करने के लिए, iframe को सही तरीके से सेट अप करने का तरीका शामिल किया जा सके. अपने दस्तावेज़ में इस पेज को लिंक किया जा सकता है.

  • अगर लागू हो, तो डेवलपर के लिए अक्सर पूछे जाने वाले सवालों का पेज अपडेट करें.

  • अपनी सहायता टीम को इस बदलाव के बारे में बताएं और समय से पहले, पूछताछ के जवाब के लिए तैयार रहें.

  • FedCM पर आसानी से ट्रांज़िशन करने के लिए, जिन पार्टनर, ग्राहकों या साइट के मालिकों पर असर पड़ा है उनसे पहले से संपर्क करें.

7. अपनी कॉन्टेंट सुरक्षा नीति (सीएसपी) में इन डायरेक्टिव को जोड़ें.

यह चरण ज़रूरी नहीं है, क्योंकि सभी वेबसाइटें सीएसपी तय नहीं करती हैं.

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

  • अगर आपका सीएसपी, मौजूदा One Tap के साथ काम करता है और आपने connect-src, frame-src, script-src, style-src या default-src का इस्तेमाल नहीं किया है, तो आपको कोई बदलाव करने की ज़रूरत नहीं है.

  • अगर ऐसा नहीं है, तो सीएसपी सेट अप करने के लिए, इस गाइड का पालन करें. सीएसपी को सही तरीके से सेट अप किए बिना, साइट पर FedCM One Tap नहीं दिखेगा.

8. साइन इन करने के लिए, Accelerated Mobile Pages (एएमपी) के साथ काम करने की सुविधा को हटाएं.

एएमपी के लिए उपयोगकर्ता साइन-इन की सुविधा, जीआईएस की एक वैकल्पिक सुविधा है. हो सकता है कि आपके वेब ऐप्लिकेशन ने इसे लागू किया हो. अगर ऐसा है, तो

इनके रेफ़रंस मिटाएं:

  • amp-onetap-google कस्टम एलिमेंट, और
  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>
    

    साइन इन करने के अनुरोधों को एएमपी से अपनी वेबसाइट के एचटीएमएल साइन-इन फ़्लो पर रीडायरेक्ट करें. ध्यान दें कि इससे जुड़े Intermediate Iframe Support API पर कोई असर नहीं पड़ेगा.

माइग्रेशन की जांच करना और उसकी पुष्टि करना

ऊपर दिए गए चरणों के आधार पर ज़रूरी बदलाव करने के बाद, पुष्टि की जा सकती है कि ट्रांज़िशन पूरा हो गया है.

  1. पक्का करें कि आपका ब्राउज़र, FedCM के साथ काम करता हो और आपके पास Google खाते का मौजूदा सेशन हो.

  2. अपने ऐप्लिकेशन में, One Tap वाले पेज पर जाएं.

  3. पुष्टि करें कि One Tap प्रॉम्प्ट दिख रहा हो और वह मौजूदा कॉन्टेंट पर सुरक्षित तरीके से ओवरले हो रहा हो.

  4. One Tap का इस्तेमाल करके अपने ऐप्लिकेशन में साइन इन करते समय, पुष्टि करें कि आपके एंडपॉइंट या कॉलबैक तरीके पर सही क्रेडेंशियल वापस आएं.

  5. अगर अपने-आप साइन इन होने की सुविधा चालू है, तो पुष्टि करें कि रद्द करने की सुविधा काम करती है और आपके एंडपॉइंट या कॉलबैक तरीके पर सही क्रेडेंशियल वापस आते हैं.

One Tap के कूल डाउन पीरियड की जानकारी

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

अपने-आप साइन इन होने की सुविधा के लिए शांत अवधि

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

काम के संसाधन

Privacy Sandbox विश्लेषण टूल (PSAT), Chrome DevTools का एक एक्सटेंशन है. इसका मकसद, FedCM जैसे अन्य एपीआई को अपनाने में मदद करना है. यह आपकी साइट को स्कैन करके, उन सुविधाओं का पता लगाता है जिन पर असर पड़ा है. साथ ही, बदलावों के सुझावों की सूची भी उपलब्ध कराता है.