तीसरे पक्ष के स्टोरेज एक्सेस को ब्लॉक करने वाले ब्राउज़र पर साइनइनविथरीडायरेक्ट का उपयोग करने के लिए सर्वोत्तम अभ्यास

यह दस्तावेज़ उन ब्राउज़रों पर रीडायरेक्ट साइन-इन का उपयोग करने के सर्वोत्तम तरीकों का वर्णन करता है जो तृतीय-पक्ष कुकीज़ को ब्लॉक करते हैं। आपको सभी ब्राउज़रों में उत्पादन वातावरण में अपेक्षित रूप से कार्य करने के लिए signInWithRedirect() के लिए यहां सूचीबद्ध विकल्पों में से एक का पालन करना होगा।

अवलोकन

आपके और आपके उपयोगकर्ताओं के लिए signInWithRedirect() प्रवाह को सहज बनाने के लिए, फायरबेस ऑथेंटिकेशन जावास्क्रिप्ट एसडीके एक क्रॉस-ऑरिजनल आईफ्रेम का उपयोग करता है जो आपके ऐप के फायरबेस होस्टिंग डोमेन से जुड़ता है। हालांकि, यह तंत्र उन ब्राउज़रों के साथ काम नहीं करता है जो तीसरे पक्ष के स्टोरेज एक्सेस को ब्लॉक करते हैं।

क्योंकि आपके उपयोगकर्ताओं को ब्राउज़र पर भंडारण विभाजन सुविधाओं को अक्षम करने के लिए कहना शायद ही कभी एक विकल्प होता है, इसके बजाय आपको अपने उपयोग के मामले की बारीकियों के आधार पर अपने ऐप में निम्न सेटअप विकल्पों में से एक को लागू करना चाहिए।

• अगर आप अपने ऐप को firebaseapp.com के उपडोमेन पर Firebase होस्टिंग के साथ होस्ट करते हैं, तो आप इस समस्या से प्रभावित नहीं होते हैं और किसी कार्रवाई की आवश्यकता नहीं होती है।
• अगर आप अपने ऐप को फायरबेस होस्टिंग के साथ कस्टम डोमेन या web.app के उप डोमेन पर होस्ट करते हैं, तो विकल्प 1 का उपयोग करें।
• यदि आप अपने ऐप को Firebase के अलावा किसी अन्य सेवा से होस्ट करते हैं, तो विकल्प 2 , विकल्प 3 , विकल्प 4 , या विकल्प 5 का उपयोग करें।

विकल्प 1: अपने कस्टम डोमेन को अपने authDomain के रूप में उपयोग करने के लिए अपने Firebase कॉन्फ़िगरेशन को अपडेट करें

यदि आप कस्टम डोमेन का उपयोग करके अपने ऐप को Firebase होस्टिंग के साथ होस्ट कर रहे हैं, तो आप अपने कस्टम डोमेन को authDomain के रूप में उपयोग करने के लिए Firebase SDK को कॉन्फ़िगर कर सकते हैं। यह सुनिश्चित करता है कि आपका ऐप और ऑथ आइफ्रेम एक ही डोमेन का उपयोग करते हैं, जो साइन-इन समस्या को रोकता है। (यदि आप फायरबेस होस्टिंग का उपयोग नहीं करते हैं, तो आपको एक अलग विकल्प का उपयोग करने की आवश्यकता है।)

अपने कस्टम डोमेन को अपने प्रामाणिक डोमेन के रूप में उपयोग करने के लिए अपने Firebase कॉन्फ़िगरेशन को अपडेट करने के लिए, निम्न कार्य करें:

1. अपने कस्टम डोमेन को authDomain के रूप में उपयोग करने के लिए Firebase JS SDK को कॉन्फ़िगर करें:

   const firebaseConfig = {
     apiKey: "<api-key>",
     authDomain: "<the-domain-that-serves-your-app>",
     databaseURL: "<database-url>",
     projectId: "<project-id>",
     appId: "<app-id>"
   };
   

2. अपने OAuth प्रदाता की प्राधिकृत रीडायरेक्ट URI की सूची में नया authDomain जोड़ें। आप यह कैसे करते हैं यह प्रदाता पर निर्भर करेगा, लेकिन सामान्य तौर पर आप सटीक निर्देशों के लिए किसी भी प्रदाता के "शुरुआत से पहले" अनुभाग का अनुसरण कर सकते हैं (उदाहरण के लिए, Facebook प्रदाता )। अधिकृत करने के लिए अपडेट किया गया यूआरआई https://<the-domain-that-serves-your-app>/__/auth/handler जैसा दिखता है — अनुगामी /__/auth/handler महत्वपूर्ण है।

   इसी प्रकार, यदि आप SAML प्रदाता का उपयोग कर रहे हैं, तो SAML अभिकथन उपभोक्ता सेवा (ACS) URL में नया authDomain जोड़ें।

विकल्प 2: साइन इन विथ पॉपअप () पर स्विच करें

signInWithRedirect() के बजाय signInWithPopup() उपयोग करें। आपके ऐप का बाकी कोड समान रहता है, लेकिन UserCredential ऑब्जेक्ट को अलग तरीके से प्राप्त किया जाता है।

  // Before
  // ==============
  signInWithRedirect(auth, new GoogleAuthProvider());
  // After the page redirects back
  const userCred = await getRedirectResult(auth);

  // After
  // ==============
  const userCred = await signInWithPopup(auth, new GoogleAuthProvider());

  // Before
  // ==============
  firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  // After the page redirects back
  var userCred = await firebase.auth().getRedirectResult();

  // After
  // ==============
  var userCred = await firebase.auth().signInWithPopup(
      new firebase.auth.GoogleAuthProvider());
```

पॉपअप साइन-इन हमेशा उपयोगकर्ताओं के लिए आदर्श नहीं होता है—पॉपअप को कभी-कभी डिवाइस या प्लेटफ़ॉर्म द्वारा ब्लॉक कर दिया जाता है, और मोबाइल उपयोगकर्ताओं के लिए प्रवाह कम सहज होता है। यदि पॉपअप का उपयोग करना आपके ऐप के लिए एक समस्या है, तो आपको अन्य विकल्पों में से एक का पालन करना होगा।

विकल्प 3: प्रॉक्सी प्राधिकरण firebaseapp.com से अनुरोध करता है

signInWithRedirect प्रवाह आपके ऐप डोमेन से फ़ायरबेस कॉन्फ़िगरेशन में authDomain पैरामीटर में निर्दिष्ट डोमेन पर रीडायरेक्ट करके शुरू होता है (" .firebaseapp.com" डिफ़ॉल्ट रूप से)। authDomain साइन-इन हेल्पर कोड को होस्ट करता है जो आइडेंटिटी प्रोवाइडर को रीडायरेक्ट करता है, जो सफल होने पर ऐप डोमेन पर वापस रीडायरेक्ट करता है।

जब प्रमाणीकरण प्रवाह आपके ऐप डोमेन पर वापस आता है, तो साइन-इन हेल्पर डोमेन का ब्राउज़र संग्रहण एक्सेस किया जाता है। यह विकल्प और निम्नलिखित एक (कोड को स्व-होस्ट करने के लिए) क्रॉस-ऑरिजनल स्टोरेज एक्सेस को समाप्त कर देता है, जो अन्यथा ब्राउज़रों द्वारा अवरुद्ध हो जाता है।

1. अपने ऐप सर्वर पर एक रिवर्स प्रॉक्सी सेट करें ताकि https://<app domain>/__/auth/ को GET/POST अनुरोध https://<project>.firebaseapp.com/__/auth/ पर अग्रेषित किए जा सकें। सुनिश्चित करें कि यह अग्रेषण ब्राउज़र के लिए पारदर्शी है; यह 302 पुनर्निर्देशन के माध्यम से नहीं किया जा सकता है।

   यदि आप अपने कस्टम डोमेन की सेवा के लिए nginx का उपयोग कर रहे हैं, तो रिवर्स-प्रॉक्सी कॉन्फिग इस तरह दिखेगा:

   # reverse proxy for signin-helpers for popup/redirect sign in.
   location /__/auth {
     proxy_pass https://<project>.firebaseapp.com;
   }
   

2. अधिकृत redirect_uri , एसीएस यूआरएल और अपने authDomain अपडेट करने के लिए विकल्प 1 में दिए गए चरणों का पालन करें। एक बार जब आप अपने ऐप को फिर से परिनियोजित कर लेते हैं, तो क्रॉस-ऑरिजनल स्टोरेज एक्सेस नहीं होना चाहिए।

विकल्प 4: अपने डोमेन में साइन-इन हेल्पर कोड को सेल्फ-होस्ट करें

क्रॉस-ऑरिजनल स्टोरेज एक्सेस को खत्म करने का दूसरा तरीका फायरबेस साइन-इन हेल्पर कोड को सेल्फ-होस्ट करना है। हालाँकि, यह दृष्टिकोण Apple साइन-इन या SAML के लिए काम नहीं करता है। इस विकल्प का उपयोग केवल तभी करें जब विकल्प 3 में रिवर्स-प्रॉक्सी सेटअप संभव न हो।

हेल्पर कोड को होस्ट करने के निम्नलिखित चरण हैं:

1. <project>.firebaseapp.com स्थान से होस्ट करने के लिए फ़ाइलें डाउनलोड करने के लिए निम्न आदेश निष्पादित करें:

   mkdir signin_helpers/ && cd signin_helpers
   wget https://<project>.firebaseapp.com/__/auth/handler
   wget https://<project>.firebaseapp.com/__/auth/handler.js
   wget https://<project>.firebaseapp.com/__/auth/experiments.js
   wget https://<project>.firebaseapp.com/__/auth/iframe
   wget https://<project>.firebaseapp.com/__/auth/iframe.js
   

2. उपरोक्त फ़ाइलों को अपने ऐप डोमेन के अंतर्गत होस्ट करें। सुनिश्चित करें कि आपका वेब सर्वर https://<app domain>/__/auth/<filename> का जवाब दे सकता है।

   यहाँ एक नमूना सर्वर कार्यान्वयन है जो फ़ाइलों को डाउनलोड और होस्ट करता है। हम यह सुनिश्चित करने के लिए समय-समय पर फ़ाइलों को डाउनलोड और सिंक करने की सलाह देते हैं कि नवीनतम बग फिक्स और सुविधाएं उठाई गई हैं।

3. अधिकृत redirect_uri और अपने authDomain अपडेट करने के लिए विकल्प 1 में दिए गए चरणों का पालन करें। एक बार जब आप अपने ऐप को फिर से परिनियोजित कर लेते हैं, तो क्रॉस-ऑरिजनल स्टोरेज एक्सेस नहीं होना चाहिए।

विकल्प 5: प्रदाता साइन-इन को स्वतंत्र रूप से संभालें

फायरबेस ऑथेंटिकेशन एसडीके जटिल लॉजिक को लपेटने और दूसरे एसडीके को शामिल करने की आवश्यकता से बचने के लिए signInWithPopup() और signInWithRedirect() सुविधा विधियों के रूप में प्रदान करता है। आप अपने प्रदाता में स्वतंत्र रूप से साइन इन करके पूरी तरह से किसी भी विधि का उपयोग करने से बच सकते हैं, फिर एक Firebase प्रमाणीकरण क्रेडेंशियल के लिए प्रदाता के क्रेडेंशियल्स का आदान-प्रदान करने के लिए signInWithCredential() का उपयोग कर सकते हैं। उदाहरण के लिए, आप Google खाता क्रेडेंशियल प्राप्त करने के लिए Google साइन इन SDK , नमूना कोड का उपयोग कर सकते हैं, फिर निम्न कोड चलाकर एक नया Google क्रेडेंशियल तुरंत चालू कर सकते हैं:

  // `googleUser` from the onsuccess Google Sign In callback.
  //  googUser = gapi.auth2.getAuthInstance().currentUser.get();
  const credential = GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
  const result = await signInWithCredential(auth, credential);

  // `googleUser` from the onsuccess Google Sign In callback.
  const credential = firebase.auth.GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);
  const result = await firebase.auth().signInWithCredential(credential);

आपके द्वारा signInWithCredential() कॉल करने के बाद, आपका बाकी ऐप उसी तरह काम करता है जैसा उसने पहले किया था।

Apple क्रेडेंशियल प्राप्त करने के निर्देश यहां हैं।