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

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

खास जानकारी

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

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

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

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

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

अपने कस्टम डोमेन को auth डोमेन के तौर पर इस्तेमाल करने के लिए, 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 Hosting की मदद से फिर से डिप्लॉय करें.

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

signInWithRedirect() के बजाय, signInWithPopup() का इस्तेमाल करें. आपके ऐप्लिकेशन का बाकी कोड पहले जैसा ही रहेगा. हालांकि, 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());
```

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

तीसरा विकल्प: auth के अनुरोधों को firebaseapp.com पर प्रॉक्सी करना

signInWithRedirect फ़्लो, आपके ऐप्लिकेशन के डोमेन से, firebase कॉन्फ़िगरेशन में 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 को अपडेट करने के लिए, पहले विकल्प में दिए गए चरणों को फ़ॉलो करें. अपने ऐप्लिकेशन को फिर से डिप्लॉय करने के बाद, क्रॉस-ऑरिजिन स्टोरेज ऐक्सेस नहीं होना चाहिए.

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

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

मदद करने वाले कोड को होस्ट करने के लिए, यह तरीका अपनाएं:

  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/__/auth/links
wget https://<project>.firebaseapp.com/__/auth/links.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 Authentication SDK, signInWithPopup() और signInWithRedirect() को आसान तरीके के तौर पर उपलब्ध कराता है. इससे जटिल लॉजिक को रैप किया जा सकता है और किसी अन्य SDK टूल को शामिल करने की ज़रूरत नहीं होती. सेवा देने वाली कंपनी के ज़रिए अलग से साइन इन करके, इन दोनों तरीकों का इस्तेमाल करने से बचा जा सकता है. इसके बाद, सेवा देने वाली कंपनी के क्रेडेंशियल को Firebase Authentication क्रेडेंशियल के लिए बदलने के लिए, signInWithCredential() का इस्तेमाल किया जा सकता है. उदाहरण के लिए, Google खाते का क्रेडेंशियल पाने के लिए, Google Sign In 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 क्रेडेंशियल पाने के निर्देश यहां दिए गए हैं.