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

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

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

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

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

अपने-आप साइन इन होने वाले फ़्लो के लिए, GIS JavaScript, M121 से पहले के वर्शन वाले Chrome पर 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 बटन फ़्लो के लिए, उपयोगकर्ता की मुख्य यात्राओं के बारे में जानने के लिए, Google से साइन इन करें बटन वाला पेज देखें.

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

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

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

  • Chrome में तीसरे पक्ष की मदद से साइन-इन करने की सेटिंग चालू हो. इस सेटिंग का सिर्फ़ One Tap पर असर पड़ता है. इसका FedCM बटन फ़्लो पर कोई असर नहीं पड़ता.

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

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

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

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

2. बटन के लिए FedCM को चालू करने के लिए, बूलियन फ़्लैग जोड़ें. इसके लिए, {:#fedcm_button_flag} का इस्तेमाल करें. हालांकि, ऐसा करना ज़रूरी नहीं है

  • एचटीएमएल, FedCM बटन फ़्लो को चालू करने के लिए, data-use_fedcm_for_button एट्रिब्यूट को true पर सेट करें. सिर्फ़ FedCM बटन फ़्लो चालू होने पर, data-use_fedcm_for_button एट्रिब्यूट को true पर सेट करके, अपने-आप चुनने की नई सुविधा चालू की जा सकती है.

  • JavaScript, FedCM बटन फ़्लो को चालू करने के लिए, IdConfiguration ऑब्जेक्ट में use_fedcm_for_button को true पर सेट करें. सिर्फ़ FedCM बटन फ़्लो चालू होने पर, अपने-आप चुनने की नई सुविधा चालू करने के लिए, button_auto_select एट्रिब्यूट को true पर भी सेट किया जा सकता है.

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

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

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

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

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

5. एक टैप के लिए, data-prompt_parent_id और intermediate_iframes से position स्टाइल एट्रिब्यूट हटाएं.

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

6. अगर ज़रूरी हो, तो पेज का लेआउट अपडेट करें, ताकि एक टैप से खरीदारी की जा सके.

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

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

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

अगर किसी iframe का origin, पैरंट के 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 में साइन इन करें" दिखेगा.

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

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

जब क्रॉस-ऑरिजिन iframes से One Tap या Button API को कॉल किया जाता है, तो आपको हर पैरंट फ़्रेम 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 या बटन सही तरीके से दिखे, एट्रिब्यूट को Iframe A और Iframe B, दोनों टैग में जोड़ना ज़रूरी है.

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

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

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

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

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

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

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

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

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

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

9. साइन इन करने के लिए, 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. पुष्टि करें कि 'एक टैप' प्रॉम्प्ट या बटन दिख रहा है और वह मौजूदा कॉन्टेंट पर सुरक्षित तरीके से ओवरले हो रहा है.

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

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

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

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

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

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

काम के संसाधन

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