এমন ব্রাউজারগুলিতে SignInWithRedirect ব্যবহার করার জন্য সর্বোত্তম অনুশীলন যা তৃতীয় পক্ষের স্টোরেজ অ্যাক্সেস ব্লক করে

এই দস্তাবেজটি তৃতীয় পক্ষের কুকি ব্লক করে এমন ব্রাউজারগুলিতে পুনঃনির্দেশিত সাইন-ইন ব্যবহার করার জন্য সর্বোত্তম অনুশীলনগুলি বর্ণনা করে৷ আপনাকে অবশ্যই এখানে তালিকাভুক্ত বিকল্পগুলির মধ্যে একটি অনুসরণ করতে হবে signInWithRedirect() যাতে সমস্ত ব্রাউজার জুড়ে উৎপাদন পরিবেশে কাজ করার জন্য।

ওভারভিউ

আপনার এবং আপনার ব্যবহারকারীদের জন্য signInWithRedirect() প্রবাহকে নির্বিঘ্ন করতে, Firebase প্রমাণীকরণ JavaScript SDK একটি ক্রস-অরিজিন iframe ব্যবহার করে যা আপনার অ্যাপের Firebase হোস্টিং ডোমেনের সাথে সংযোগ করে। যাইহোক, এই পদ্ধতিটি এমন ব্রাউজারগুলির সাথে কাজ করে না যা তৃতীয় পক্ষের স্টোরেজ অ্যাক্সেস ব্লক করে।

যেহেতু আপনার ব্যবহারকারীদের ব্রাউজারে স্টোরেজ বিভাজন বৈশিষ্ট্যগুলি অক্ষম করতে বলা খুব কমই একটি বিকল্প, আপনার পরিবর্তে আপনার ব্যবহারের ক্ষেত্রে নির্দিষ্টতার উপর নির্ভর করে আপনার অ্যাপে নিম্নলিখিত সেটআপ বিকল্পগুলির মধ্যে একটি প্রয়োগ করা উচিত।

  • আপনি যদি firebaseapp.com এর একটি সাবডোমেনে Firebase হোস্টিং-এর মাধ্যমে আপনার অ্যাপ হোস্ট করেন, তাহলে আপনি এই সমস্যা দ্বারা প্রভাবিত হবেন না এবং কোনো পদক্ষেপের প্রয়োজন নেই।
  • আপনি যদি একটি কাস্টম ডোমেনে বা web.app এর একটি সাবডোমেনে Firebase হোস্টিং দিয়ে আপনার অ্যাপ হোস্ট করেন, তাহলে বিকল্প 1 ব্যবহার করুন।
  • আপনি যদি Firebase ছাড়া অন্য কোনো পরিষেবা দিয়ে আপনার অ্যাপ হোস্ট করেন, তাহলে বিকল্প 2 , বিকল্প 3 , বিকল্প 4 বা বিকল্প 5 ব্যবহার করুন।

বিকল্প 1: আপনার কাস্টম ডোমেনকে আপনার authDomain হিসাবে ব্যবহার করতে আপনার Firebase কনফিগারেশন আপডেট করুন

আপনি যদি একটি কাস্টম ডোমেন ব্যবহার করে Firebase হোস্টিং এর সাথে আপনার অ্যাপ হোস্ট করেন, তাহলে আপনি আপনার কাস্টম ডোমেনটিকে authDomain হিসাবে ব্যবহার করতে Firebase SDK কনফিগার করতে পারেন। এটি নিশ্চিত করে যে আপনার অ্যাপ এবং auth iframe একই ডোমেন ব্যবহার করে, যা সাইন-ইন সমস্যাকে বাধা দেয়। (আপনি যদি ফায়ারবেস হোস্টিং ব্যবহার না করেন তবে আপনাকে একটি ভিন্ন বিকল্প ব্যবহার করতে হবে।) নিশ্চিত করুন যে আপনি প্রমাণীকরণের জন্য যে প্রকল্পটি ব্যবহার করছেন সেই একই প্রকল্পে আপনি কাস্টম ডোমেন সেট আপ করেছেন৷

আপনার প্রমাণীকরণ ডোমেন হিসাবে আপনার কাস্টম ডোমেন ব্যবহার করার জন্য আপনার 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>"
};

  1. আপনার OAuth প্রদানকারীর অনুমোদিত রিডাইরেক্ট URI-এর তালিকায় নতুন authDomain যোগ করুন। আপনি কীভাবে এটি করবেন তা প্রদানকারীর উপর নির্ভর করবে, তবে সাধারণভাবে আপনি সঠিক নির্দেশাবলীর জন্য যেকোনো প্রদানকারীর "আপনি শুরু করার আগে" বিভাগটি অনুসরণ করতে পারেন (উদাহরণস্বরূপ, Facebook প্রদানকারী )। অনুমোদনের জন্য আপডেট করা URI দেখতে https://<the-domain-that-serves-your-app>/__/auth/handler - এর মত দেখায় /__/auth/handler গুরুত্বপূর্ণ।

    একইভাবে, আপনি যদি SAML প্রদানকারী ব্যবহার করেন, তাহলে SAML Assertion Consumer Service (ACS) URL-এ নতুন authDomain যোগ করুন।

  2. নিশ্চিত করুন যে আপনার continue_uri অনুমোদিত ডোমেনের তালিকায় আছে।

  3. /__/firebase/init.json এ হোস্ট করা সবচেয়ে আপ-টু-ডেট Firebase কনফিগারেশন ফাইল আনতে প্রয়োজন হলে Firebase হোস্টিংয়ের সাথে পুনরায় স্থাপন করুন।

বিকল্প 2: SignInWithPopup() এ স্যুইচ করুন

signInWithRedirect() এর পরিবর্তে signInWithPopup() ব্যবহার করুন। আপনার অ্যাপের বাকি কোড একই থাকে, কিন্তু UserCredential অবজেক্ট ভিন্নভাবে পুনরুদ্ধার করা হয়।

ওয়েব মডুলার API

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

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

ওয়েব নামস্থান API

  // 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 ফ্লো শুরু হয় আপনার অ্যাপ ডোমেন থেকে 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 , ACS URL এবং আপনার authDomain আপডেট করতে বিকল্প 1 -এর ধাপগুলি অনুসরণ করুন। একবার আপনি আপনার অ্যাপ পুনরায় স্থাপন করলে, ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস আর ঘটবে না।

বিকল্প 4: আপনার ডোমেনে সাইন-ইন সহায়ক কোডটি স্ব-হোস্ট করুন

ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস বাদ দেওয়ার আরেকটি উপায় হল Firebase সাইন-ইন সহায়ক কোডটি স্ব-হোস্ট করা। যাইহোক, এই পদ্ধতিটি 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: প্রদানকারীর সাইন-ইন স্বাধীনভাবে পরিচালনা করুন

Firebase প্রমাণীকরণ SDK জটিল যুক্তি মোড়ানো এবং অন্য SDK জড়িত করার প্রয়োজন এড়াতে সুবিধাজনক পদ্ধতি হিসাবে signInWithPopup() এবং signInWithRedirect() প্রদান করে। আপনি স্বাধীনভাবে আপনার প্রদানকারীতে সাইন ইন করে, তারপর একটি Firebase প্রমাণীকরণ শংসাপত্রের জন্য প্রদানকারীর শংসাপত্রগুলি বিনিময় করতে signInWithCredential() ব্যবহার করে সম্পূর্ণরূপে উভয় পদ্ধতি ব্যবহার করা এড়াতে পারেন৷ উদাহরণস্বরূপ, আপনি Google সাইন ইন SDK ব্যবহার করতে পারেন, একটি Google অ্যাকাউন্ট শংসাপত্র পেতে নমুনা কোড , তারপর নিম্নলিখিত কোডটি চালিয়ে একটি নতুন Google শংসাপত্র তৈরি করতে পারেন:

ওয়েব মডুলার API

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

ওয়েব নামস্থান API

  // `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() কল করার পরে, আপনার অ্যাপের বাকি কাজগুলি আগের মতোই কাজ করে৷

অ্যাপল শংসাপত্র পাওয়ার জন্য নির্দেশাবলী এখানে রয়েছে।