तृतीय-पक्ष संग्रहण पहुंच को अवरुद्ध करने वाले ब्राउज़र पर साइनइनविथरीडायरेक्ट का उपयोग करने के सर्वोत्तम अभ्यास

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

अवलोकन

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

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

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

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

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

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

  1. अपने कस्टम डोमेन को authDomain के रूप में उपयोग करने के लिए फायरबेस जेएस एसडीके को कॉन्फ़िगर करें:

    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 जोड़ें। आप यह कैसे करते हैं यह प्रदाता पर निर्भर करेगा, लेकिन सामान्य तौर पर आप सटीक निर्देशों के लिए किसी भी प्रदाता में "शुरू करने से पहले" अनुभाग का अनुसरण कर सकते हैं (उदाहरण के लिए, फेसबुक प्रदाता )। अधिकृत करने के लिए अद्यतन यूआरआई https://<the-domain-that-serves-your-app>/__/auth/handler जैसा दिखता है - पिछला /__/auth/handler महत्वपूर्ण है।

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

  3. सुनिश्चित करें कि आपका continue_uri अधिकृत डोमेन की सूची में है।

  4. यदि आवश्यक हो तो /__/firebase/init.json पर होस्ट की गई नवीनतम फायरबेस कॉन्फ़िगरेशन फ़ाइल लाने के लिए फायरबेस होस्टिंग के साथ पुनः तैनात करें।

विकल्प 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
    wget https://<project>.firebaseapp.com/__/firebase/init.json
    
  2. उपरोक्त फ़ाइलों को अपने ऐप डोमेन के अंतर्गत होस्ट करें। सुनिश्चित करें कि आपका वेब सर्वर https://<app domain>/__/auth/<filename> और https://<app domain>/__/firebase/init.json पर प्रतिक्रिया दे सकता है।

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

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

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

फायरबेस प्रमाणीकरण एसडीके जटिल तर्क को लपेटने और किसी अन्य एसडीके को शामिल करने की आवश्यकता से बचने के लिए सुविधाजनक तरीकों के रूप में signInWithPopup() और signInWithRedirect() प्रदान करता है। आप अपने प्रदाता में स्वतंत्र रूप से साइन इन करके, फिर फायरबेस प्रमाणीकरण क्रेडेंशियल के लिए प्रदाता के क्रेडेंशियल्स का आदान-प्रदान करने के लिए signInWithCredential() का उपयोग करके पूरी तरह से किसी भी विधि का उपयोग करने से बच सकते हैं। उदाहरण के लिए, आप Google खाता क्रेडेंशियल प्राप्त करने के लिए Google साइन इन एसडीके , नमूना कोड का उपयोग कर सकते हैं, फिर निम्नलिखित कोड चलाकर एक नया 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 क्रेडेंशियल प्राप्त करने के निर्देश यहां हैं।