तीसरे पक्ष के स्टोरेज के ऐक्सेस को ब्लॉक करने वाले ब्राउज़र पर, signInWithredirect सुविधा का इस्तेमाल करने के सबसे सही तरीके

इस दस्तावेज़ में ब्राउज़र पर रीडायरेक्ट साइन-इन करने के सबसे सही तरीकों के बारे में बताया गया है जो तीसरे पक्ष की कुकी को ब्लॉक करती हैं. सभी ब्राउज़र पर, प्रोडक्शन एनवायरमेंट के हिसाब से काम करने के लिए, आपको signInWithRedirect() के लिए यहां दिए गए विकल्पों में से किसी एक को फ़ॉलो करना होगा.

खास जानकारी

आसानी से signInWithRedirect() फ़्लो बिना किसी रुकावट के, Firebase से पुष्टि करने वाला JavaScript SDK टूल क्रॉस-ऑरिजिन iframe, जो आपके ऐप्लिकेशन के Firebase होस्टिंग डोमेन से कनेक्ट होता है. हालांकि, यह तरीका तीसरे पक्ष को ब्लॉक करने वाले ब्राउज़र पर काम नहीं करता स्टोरेज ऐक्सेस.

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

  • अगर आपने firebaseapp.com के सबडोमेन पर, Firebase होस्टिंग की मदद से अपना ऐप्लिकेशन होस्ट किया है, तो आप पर इस समस्या का कोई असर नहीं पड़ा है. आपको कुछ करने की ज़रूरत नहीं है.
  • अगर आपने किसी कस्टम डोमेन या web.app के सबडोमेन पर, Firebase होस्टिंग की मदद से अपना ऐप्लिकेशन होस्ट किया है, तो इसका इस्तेमाल करें पहला विकल्प.
  • अगर आप Firebase के बजाय किसी दूसरी सेवा से अपने ऐप्लिकेशन को होस्ट करते हैं, तो दूसरा विकल्प, तीसरा विकल्प, चौथा विकल्प, या पांचवां विकल्प चुनें.

पहला विकल्प: अपने कस्टम डोमेन को authDomain के तौर पर इस्तेमाल करने के लिए, Firebase कॉन्फ़िगरेशन अपडेट करना

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

अपने कस्टम डोमेन को पुष्टि वाले डोमेन के तौर पर इस्तेमाल करने के मकसद से, Firebase कॉन्फ़िगरेशन को अपडेट करने के लिए, ऐसा करें निम्न:

  1. Firebase JS SDK टूल को कॉन्फ़िगर करें, ताकि आप अपने कस्टम डोमेन को authDomain के तौर पर इस्तेमाल कर सकें:

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

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

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

  2. पक्का करें कि आपका continue_uri, अनुमति वाले डोमेन की सूची में है.

  3. अगर ज़रूरत हो, तो /__/firebase/init.json पर होस्ट की गई सबसे अप-टू-डेट Firebase कॉन्फ़िगरेशन फ़ाइल को फ़ेच करने के लिए, Firebase होस्टिंग के साथ फिर से डिप्लॉय करें.

दूसरा विकल्प: signInWithPopup() पर स्विच करें

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

Web 

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

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

Web 

  // 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());
```

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

तीसरा विकल्प: firebaseapp.com पर प्रॉक्सी ऑथराइज़ेशन अनुरोध

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

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

  1. अपने ऐप्लिकेशन सर्वर पर एक रिवर्स प्रॉक्सी सेट अप करें, ताकि जीईटी/पोस्ट अनुरोध https://<app domain>/__/auth/, 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, ACS URL और आपके authDomain को अपडेट करने के लिए. फिर से डिप्लॉय करने के बाद तो अब क्रॉस-ऑरिजिन स्टोरेज का ऐक्सेस नहीं दिया जाएगा.

चौथा विकल्प: अपने डोमेन में साइन-इन हेल्पर कोड को खुद होस्ट करना

क्रॉस-ऑरिजिन स्टोरेज का ऐक्सेस हटाने का एक और तरीका सेल्फ़-होस्ट है Firebase साइन-इन हेल्पर कोड. हालांकि, Apple के लिए यह तरीका काम नहीं करता या एसएएमएल से साइन इन करें. इस विकल्प का इस्तेमाल सिर्फ़ तब करें, जब रिवर्स-प्रॉक्सी सेटअप विकल्प 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 को अपडेट करने के लिए. फिर से डिप्लॉय करने के बाद तो अब क्रॉस-ऑरिजिन स्टोरेज का ऐक्सेस नहीं दिया जाएगा.

पांचवां विकल्प: सेवा देने वाली कंपनी के साइन इन को अलग से मैनेज करना

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

Web 

  // `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);

Web 

  // `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 क्रेडेंशियल पाने के लिए निर्देश यहां पढ़ें.