এই ডকুমেন্টে, থার্ড-পার্টি কুকি ব্লক করে এমন ব্রাউজারে
রিডাইরেক্ট সাইন-ইন ব্যবহার করার পেশাদার পদ্ধতি বর্ণনা করা হয়েছে। প্রোডাকশন এনভায়রনমেন্টে, সব ব্রাউজার জুড়ে signInWithRedirect()-এর উদ্দেশ্যমতো কাজ করার জন্য আপনাকে এখানে তালিকাভুক্ত বিকল্পগুলির মধ্যে একটি অনুসরণ করতে হবে।
এক নজরে
আপনার ও আপনার ব্যবহারকারীদের জন্য
signInWithRedirect() ফ্লো
নিরবিঘ্নে করতে, Firebase Authentication JavaScript SDK একটি
ক্রস-অরিজিন iframe ব্যবহার করে যা আপনার অ্যাপের Firebase Hosting ডোমেনের সাথে কানেক্ট করে।
তবে, এই মেকানিজম সেইসব ব্রাউজারের সাথে কাজ করে না যেগুলি থার্ড-পার্টি
স্টোরেজ অ্যাক্সেস ব্লক করে।
ব্রাউজারে স্টোরেজ পার্টিশনিং ফিচার বন্ধ করতে ব্যবহারকারীদের বলা খুব কমই বিকল্প হয়, তাই আপনার অ্যাপে নিম্নলিখিত সেট-আপ বিকল্পগুলির মধ্যে একটি প্রয়োগ করা উচিত, এটি আপনার ব্যবহারের কেসের নির্দিষ্ট বিষয়ের উপর নির্ভর করে।
- আপনি যদি
firebaseapp.com-এর সাবডোমেনে Firebase Hosting-এর মাধ্যমে আপনার অ্যাপ হোস্ট করেন, তাহলে এই সমস্যা আপনার উপর প্রভাব ফেলবে না এবং কোনও অ্যাকশন নেওয়ার প্রয়োজন নেই। - আপনি যদি Firebase Hosting-এর মাধ্যমে নিজের অ্যাপ কাস্টম ডোমেন বা
web.app-এর সাবডোমেনে হোস্ট করেন, তাহলে বিকল্প ১ ব্যবহার করুন। - Firebase ছাড়া অন্য কোনও পরিষেবার মাধ্যমে আপনার অ্যাপ হোস্ট করলে, বিকল্প ২, বিকল্প ৩, বিকল্প ৪, অথবা বিকল্প ৫ ব্যবহার করুন।
বিকল্প ১: আপনার কাস্টম ডোমেনকে authDomain হিসেবে ব্যবহার করতে Firebase কনফিগারেশন আপডেট করুন
আপনি কাস্টম ডোমেন ব্যবহার করে Firebase Hosting-এর মাধ্যমে অ্যাপ হোস্ট করলে, authDomainহিসেবে আপনার কাস্টম ডোমেন ব্যবহার করার জন্য Firebase SDK কনফিগার করতে পারবেন। এটি
নিশ্চিত করে যে আপনার অ্যাপ এবং অথরাইজেশন আইফ্রেম একই ডোমেন ব্যবহার করে, যা
সাইন-ইন সংক্রান্ত সমস্যা প্রতিরোধ করে। (আপনি Firebase Hosting ব্যবহার না করলে, আপনাকে
অন্য বিকল্প ব্যবহার করতে হবে)। আপনি যাচাইকরণের জন্য যে প্রোজেক্ট ব্যবহার করছেন, সেই একই প্রোজেক্টে কাস্টম ডোমেন সেট-আপ করেছেন কিনা
ভালোভাবে দেখে নিন।
আপনার কাস্টম ডোমেনকে অথ ডোমেন হিসেবে ব্যবহার করতে Firebase কনফিগারেশন আপডেট করতে, নিচে উল্লেখ করা ধাপগুলি অনুসরণ করুন:
authDomain:const firebaseConfig = { apiKey: "<api-key>", authDomain: "<the-domain-that-serves-your-app>", databaseURL: "<database-url>", projectId: "<project-id>", appId: "<app-id>" };
আপনার OAuth প্রদানকারীর অনুমোদিত রিডাইরেক্ট URI-এর তালিকায় নতুন
authDomainযোগ করুন। আপনি কীভাবে এটি করবেন তা পরিষেবা প্রদানকারীর উপর নির্ভর করবে, তবে সাধারণভাবে আপনি সঠিক নির্দেশাবলীর জন্য যেকোনও পরিষেবা প্রদানকারীর "শুরু করার আগে" বিভাগটি অনুসরণ করতে পারেন (যেমন, Facebook পরিষেবা প্রদানকারী)। অনুমোদন করার জন্য আপডেট করা URIhttps://<the-domain-that-serves-your-app>/__/auth/handler— শেষের/__/auth/handlerচিহ্নটি গুরুত্বপূর্ণ।একইভাবে, আপনি কোনও SAML প্রদানকারী ব্যবহার করলে, নতুন
authDomain-কে SAML অ্যাসার্শন কনজিউমার সার্ভিস (ACS) URL-এ যোগ করুন।আপনার
continue_uriঅনুমোদিত ডোমেনের তালিকায় আছে কিনা তা নিশ্চিত করুন।/__/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 প্যারামিটারে
নির্দিষ্ট করা ডোমেনে রিডাইরেক্ট করার মাধ্যমে
(ডিফল্ট হিসেবে "authDomain-এ সাইন-ইন সহায়তা
কোড থাকে যা পরিচয় প্রদানকারীর কাছে রিডাইরেক্ট করে, এটি সফল হলে
অ্যাপ ডোমেনে রিডাইরেক্ট করে।
যাচাইকরণ ফ্লো আপনার অ্যাপ ডোমেনে ফিরে এলে, সাইন-ইন সহায়তা ডোমেনের ব্রাউজার স্টোরেজ অ্যাক্সেস করা হয়। এই বিকল্প এবং নিম্নলিখিত বিকল্প (কোড সেল্ফ-হোস্ট করা) ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস সরিয়ে দেয়, যা অন্যথায় ব্রাউজার ব্লক করে দেয়।
আপনার অ্যাপ সার্ভারে একটি রিভার্স প্রক্সি সেট-আপ করুন যাতে
https://<app domain>/__/auth/-এ GET/POST অনুরোধhttps://<project>.firebaseapp.com/__/auth/-এ ফরওয়ার্ড করা হয়। ব্রাউজারের কাছে যেন এই ফরওয়ার্ডিং স্বচ্ছ হয় তা নিশ্চিত করুন; এটি ৩০২ রিডাইরেক্টের মাধ্যমে করা যাবে না।আপনার কাস্টম ডোমেন পরিবেশন করার জন্য আপনি nginx ব্যবহার করলে, রিভার্স-প্রক্সি কনফিগারেশনটি এইরকম দেখাবে:
# reverse proxy for signin-helpers for popup/redirect sign in. location /__/auth { proxy_pass https://<project>.firebaseapp.com; }অনুমোদিত
redirect_uri, ACS URL ও আপনারauthDomainআপডেট করতে বিকল্প ১ লিঙ্কে উল্লেখ করা ধাপগুলি অনুসরণ করুন। আপনার অ্যাপ আবার ডেপ্লয় করার পরে, ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস আর হওয়া উচিত নয়।
বিকল্প ৪: আপনার ডোমেনে সাইন-ইন সহায়ক কোড সেল্ফ-হোস্ট করা
ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস সরানোর আরেকটি উপায় হল Firebase সাইন-ইন সহায়তা কোড সেল্ফ-হোস্ট করা। তবে, এই পদ্ধতি Apple সাইন-ইন বা SAML-এর ক্ষেত্রে কাজ করে না। বিকল্প ৩-এ দেওয়া রিভার্স-প্রক্সি সেট-আপ সম্ভব না হলেই শুধুমাত্র এই বিকল্প ব্যবহার করুন।
সহায়তা কোড হোস্ট করার জন্য নিম্নলিখিত ধাপগুলি অনুসরণ করতে হবে:
নিচের কমান্ডগুলি এক্সিকিউট করে
<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আপনার অ্যাপ ডোমেনের অধীনে উপরের ফাইলগুলি হোস্ট করুন। আপনার ওয়েব সার্ভার
https://<app domain>/__/auth/<filename>ওhttps://<app domain>/__/firebase/init.json-এর উত্তর দিতে পারে কিনা তা নিশ্চিত করুন।এখানে সার্ভার ইমপ্লিমেন্টেশনের নমুনা দেওয়া হল যা ফাইল ডাউনলোড ও হোস্ট করে। লেটেস্ট সমস্যার সমাধান ও ফিচার যে যোগ করা হয়েছে তা নিশ্চিত করতে, আমরা সাজেস্ট করি যে ফাইলগুলি মাঝে মাঝে ডাউনলোড ও সিঙ্ক করুন।
অনুমোদিত
redirect_uriও আপনারauthDomainআপডেট করতে, বিকল্প ১ বিকল্পে দেওয়া ধাপগুলি অনুসরণ করুন। আপনার অ্যাপ আবার ডেপ্লয় করার পরে, ক্রস-অরিজিন স্টোরেজ অ্যাক্সেস আর হওয়া উচিত নয়।
বিকল্প ৫: পরিষেবা প্রদানকারীর সাইন-ইন আলাদাভাবে ম্যানেজ করা
Firebase Authentication SDK, জটিল লজিক র্যাপ করার জন্য
signInWithPopup() এবং
signInWithRedirect()-এর মতো
সহজ পদ্ধতি প্রদান করে এবং এর ফলে অন্য SDK-কে
ব্যবহার করার প্রয়োজন হয় না। আপনি নিজের পরিষেবা প্রদানকারীর কাছে আলাদাভাবে সাইন-ইন করে, তারপর Firebase যাচাইকরণের ক্রেডেনশিয়ালের জন্য পরিষেবা প্রদানকারীর ক্রেডেনশিয়াল এক্সচেঞ্জ করতে
signInWithCredential() ব্যবহার করে
দুটি পদ্ধতির মধ্যে যেকোনও একটি ব্যবহার করা এড়াতে পারেন।
যেমন, আপনি Google অ্যাকাউন্ট ক্রেডেনশিয়াল পেতে
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 ক্রেডেনশিয়াল পাওয়ার নির্দেশাবলী এখানে দেওয়া আছে।