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

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

खास जानकारी

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

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

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

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

अगर कस्टम डोमेन का इस्तेमाल करके, Firebase होस्टिंग के साथ अपने ऐप्लिकेशन को होस्ट किया जा रहा है, तो Firebase SDK टूल को कॉन्फ़िगर करके, अपने कस्टम डोमेन को authDomain के तौर पर इस्तेमाल किया जा सकता है. इससे यह पक्का होता है कि आपका ऐप्लिकेशन और पुष्टि करने वाला 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. अपने OAuth प्रोवाइडर की अनुमति वाले रीडायरेक्ट यूआरआई की सूची में नया authDomain जोड़ें. यह कैसे किया जाएगा, यह सेवा देने वाली कंपनी पर निर्भर करता है. हालांकि, आम तौर पर आप सटीक निर्देश पाने के लिए, सेवा देने वाली किसी भी कंपनी के "शुरू करने से पहले" सेक्शन को फ़ॉलो कर सकते हैं. उदाहरण के लिए, Facebook की सेवा देने वाली कंपनी. अनुमति देने के लिए अपडेट किया गया यूआरआई https://<the-domain-that-serves-your-app>/__/auth/handler जैसा दिखता है — आखिर में /__/auth/handler अहम है.

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

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

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

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

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

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

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

signInWithRedirect फ़्लो, आपके ऐप्लिकेशन डोमेन से उस डोमेन पर रीडायरेक्ट करके शुरू होता है जो Firebase कॉन्फ़िगरेशन (डिफ़ॉल्ट रूप से, ".firebaseapp.com") में authDomain पैरामीटर में तय किया गया है. 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, ACS यूआरएल, और अपने 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 टूल का इस्तेमाल करने की ज़रूरत नहीं पड़ती. दोनों में से किसी भी तरीके का इस्तेमाल करने से बचा जा सकता है. इसके लिए, आपको सेवा देने वाली कंपनी के लिए अलग से साइन इन करना होगा. इसके बाद, सेवा देने वाली कंपनी के क्रेडेंशियल को बदलकर, 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 क्रेडेंशियल पाने के निर्देश यहां दिए गए हैं.