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

এই ডকুমেন্টটিতে সেইসব ব্রাউজারে রিডাইরেক্ট সাইন-ইন ব্যবহারের সেরা পদ্ধতিগুলো বর্ণনা করা হয়েছে, যেগুলো থার্ড-পার্টি কুকি ব্লক করে। প্রোডাকশন এনভায়রনমেন্টে, সমস্ত ব্রাউজারে signInWithRedirect() সঠিকভাবে কাজ করার জন্য আপনাকে এখানে তালিকাভুক্ত বিকল্পগুলোর মধ্যে একটি অবশ্যই অনুসরণ করতে হবে।

সংক্ষিপ্ত বিবরণ

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

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

  • যদি আপনি firebaseapp.com এর একটি সাবডোমেনে Firebase Hosting-এর মাধ্যমে আপনার অ্যাপটি হোস্ট করেন, তাহলে আপনি এই সমস্যার দ্বারা প্রভাবিত হবেন না এবং কোনো পদক্ষেপ নেওয়ার প্রয়োজন নেই।
  • যদি আপনি ফায়ারবেস হোস্টিং-এর মাধ্যমে আপনার অ্যাপটি একটি কাস্টম ডোমেইনে অথবা web.app এর কোনো সাবডোমেইনে হোস্ট করেন, তাহলে অপশন ১ ব্যবহার করুন।
  • আপনি যদি Firebase ছাড়া অন্য কোনো পরিষেবাতে আপনার অ্যাপ হোস্ট করেন, তাহলে বিকল্প ২ , বিকল্প ৩ , বিকল্প ৪ বা বিকল্প ৫ ব্যবহার করুন।

বিকল্প ১: আপনার কাস্টম ডোমেইনকে authDomain হিসেবে ব্যবহার করার জন্য আপনার Firebase কনফিগ আপডেট করুন।

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

আপনার কাস্টম ডোমেইনকে অথেন্টিকেশন ডোমেইন হিসেবে ব্যবহার করার জন্য ফায়ারবেস কনফিগ আপডেট করতে, নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করুন:

  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 যোগ করুন। আপনি এটি কীভাবে করবেন তা প্রোভাইডারের উপর নির্ভর করবে, তবে সাধারণভাবে আপনি সঠিক নির্দেশাবলীর জন্য যেকোনো প্রোভাইডারের "Before you begin" বিভাগটি অনুসরণ করতে পারেন (উদাহরণস্বরূপ, Facebook প্রোভাইডার )। অনুমোদনের জন্য আপডেট করা URI-টি দেখতে হবে https://<the-domain-that-serves-your-app>/__/auth/handler এর মতো — শেষের /__/auth/handler অংশটি গুরুত্বপূর্ণ।

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

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

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

বিকল্প ২: 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());
```

পপআপ সাইন-ইন ব্যবহারকারীদের জন্য সবসময় আদর্শ নয়—কখনও কখনও ডিভাইস বা প্ল্যাটফর্ম পপআপ ব্লক করে দেয়, এবং মোবাইল ব্যবহারকারীদের জন্য এর প্রক্রিয়াটি ততটা মসৃণ হয় না। যদি আপনার অ্যাপের জন্য পপআপ ব্যবহার করা একটি সমস্যা হয়, তবে আপনাকে অন্য বিকল্পগুলোর মধ্যে একটি অনুসরণ করতে হবে।

বিকল্প ৩: firebaseapp.com-এ প্রমাণীকরণের অনুরোধ প্রক্সি করুন

signInWithRedirect ফ্লোটি আপনার অ্যাপ ডোমেইন থেকে firebase config-এর 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 আপডেট করতে অপশন ১- এর ধাপগুলো অনুসরণ করুন। একবার আপনি আপনার অ্যাপটি পুনরায় ডিপ্লয় করলে, ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস আর হবে না।

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

ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস দূর করার আরেকটি উপায় হলো ফায়ারবেস সাইন-ইন হেল্পার কোডটি সেলফ-হোস্ট করা। তবে, এই পদ্ধতিটি অ্যাপল সাইন-ইন বা SAML-এর ক্ষেত্রে কাজ করে না। এই বিকল্পটি কেবল তখনই ব্যবহার করুন, যদি বিকল্প ৩-এ উল্লিখিত রিভার্স-প্রক্সি সেটআপ করা সম্ভব না হয়।

হেল্পার কোড হোস্ট করার ধাপগুলো নিম্নরূপ:

  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, জটিল লজিককে গুছিয়ে রাখতে এবং অন্য কোনো SDK ব্যবহারের প্রয়োজনীয়তা এড়াতে সুবিধাজনক মেথড হিসেবে signInWithPopup() এবং signInWithRedirect() প্রদান করে। আপনি স্বাধীনভাবে আপনার প্রোভাইডারে সাইন ইন করে, তারপর প্রোভাইডারের ক্রেডেনশিয়ালকে একটি 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() কল করার পর, আপনার অ্যাপের বাকি অংশ আগের মতোই কাজ করবে।

অ্যাপল ক্রেডেনশিয়াল পাওয়ার নির্দেশাবলী এখানে রয়েছে।