কিভাবে একটি প্রতিক্রিয়া ওয়েব অ্যাপ্লিকেশন দিয়ে ফায়ারবেস পাসওয়ার্ডহীন প্রমাণীকরণ সেট আপ করবেন

ভূমিকা

এই নির্দেশিকাটি একটি রিঅ্যাক্ট ওয়েব অ্যাপ্লিকেশনের সাথে কিভাবে ফায়ারবেস প্রমাণীকরণ সেট আপ করবেন তার একটি পরিপূরক। সেই গাইডের ভূমিকায়, আমি লক্ষ্য করেছি যে ফায়ারবেস মৌলিক ইমেল/পাসওয়ার্ড প্রমাণীকরণের বাইরে অন্যান্য প্রমাণীকরণ স্কিম অফার করে। এই বিকল্পগুলির মধ্যে একটি হল পাসওয়ার্ডহীন প্রমাণীকরণ ।

অ্যাপ্লিকেশন তৈরি করার সময় পাসওয়ার্ডহীন প্রমাণীকরণ একটি আকর্ষণীয় বিকল্প। এটি ব্যবহারকারীর অভিজ্ঞতাকে সহজ করে তোলে যেহেতু আপনার ব্যবহারকারীদের তাদের পাসওয়ার্ড(গুলি) মনে রাখার কোন প্রয়োজন নেই এবং তাই তাদের হারানোর বিষয়েও চিন্তা করতে হবে না। এটি বিকাশের অভিজ্ঞতাও সহজতর করে কারণ কোনও পাসওয়ার্ড ক্যাপচার বা পরিচালনার যুক্তি ডিজাইন করার প্রয়োজন নেই।

এই নির্দেশিকাটিতে, আপনি একটি সাধারণ লগইন/নিশ্চিত/প্রোফাইল/লগআউট ওয়ার্কফ্লো তৈরি করবেন যা ফায়ারবেসের পাসওয়ার্ডহীন প্রমাণীকরণ প্রয়োগ করে।

তুমি শুরু করার আগে

Google বিভিন্ন ফায়ারবেস প্রমাণীকরণ সীমা সেট করে। আপনি যদি বিনামূল্যে স্পার্ক প্ল্যান ব্যবহার করেন, মনে রাখবেন যে আপনি প্রতিদিন 5টি সাইন-ইন লিঙ্ক ইমেলের মধ্যে সীমাবদ্ধ থাকবেন৷ যদিও স্পার্ক প্ল্যান পরীক্ষার উদ্দেশ্যে যথেষ্ট হতে পারে, এই সীমার উপরে যাওয়ার জন্য আপনাকে পে-অ্যাজ-ইউ- গো ব্লেজ প্ল্যানে আপগ্রেড করতে হবে।

পূর্বশর্ত

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

এই নির্দেশিকাটি সম্পূর্ণ করতে, আপনার থাকতে হবে:

• পূর্বশর্ত নির্দেশিকা সম্পূর্ণ করেছে, এর সমস্ত পূর্বশর্ত সহ।

ধাপ 1 - আপনার ফায়ারবেস প্রকল্পের সাথে পাসওয়ার্ডহীন প্রমাণীকরণ সক্ষম করা

পূর্বশর্ত নির্দেশিকাতে, আপনি মৌলিক ইমেল/পাসওয়ার্ড প্রমাণীকরণের জন্য একটি নতুন ফায়ারবেস প্রকল্প তৈরি করেছেন। এখন, আপনি পাসওয়ার্ডহীন প্রমাণীকরণের জন্য একই প্রকল্প সক্ষম করবেন। আপনার ফায়ারবেস অ্যাকাউন্টে লগইন করুন এবং কনসোলে যান- এ ক্লিক করুন।

1. Firebase প্রকল্প ড্যাশবোর্ডে তালিকাভুক্ত আপনার প্রমাণীকরণ প্রকল্পে ক্লিক করুন। এই নির্দেশিকাটি প্রকল্পের নাম my-auth-test ব্যবহার করে।

2. বাম প্যানেল মেনুতে প্রমাণীকরণে ক্লিক করুন।

3. প্রধান উইন্ডোতে সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন।

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

5. ইমেল লিঙ্ক (পাসওয়ার্ডবিহীন সাইন-ইন) সক্ষম করতে টগলটিতে ক্লিক করুন।

6. Save এ ক্লিক করুন।

   
   

আপনার Firebase প্রকল্পটি এখন পাসওয়ার্ডহীন প্রমাণীকরণ সমর্থন করার জন্য কনফিগার করা হয়েছে৷

ধাপ 2 - একটি নতুন প্রতিক্রিয়া প্রকল্প তৈরি করা এবং প্যাকেজ ইনস্টল করা

ধাপ 2a - একটি নতুন প্রতিক্রিয়া প্রকল্প তৈরি করা

আপনার পছন্দসই অ্যাপ্লিকেশন নাম ব্যবহার করে একটি নতুন প্রতিক্রিয়া প্রকল্প তৈরি করুন। এই নির্দেশিকা passwordless-auth ব্যবহার করে।

 npx create-react-app passwordless-auth

ধাপ 2b - প্যাকেজ ইনস্টল করা

এই নির্দেশিকাটির জন্য 3টি Node.js প্যাকেজ ইনস্টল করা প্রয়োজন:

• ফায়ারবেস : ফায়ারবেস SDK।
• প্রতিক্রিয়া রাউটার DOM : রাউটিং জন্য.
• বুটস্ট্র্যাপ : স্টাইলিং জন্য.

উপরের তিনটি প্যাকেজের প্রতিটি ইনস্টল করুন npm মাধ্যমে:

 npm install firebase

 npm install react-router-dom

 npm install bootstrap

ধাপ 3 - পূর্বশর্ত প্রকল্প থেকে firebase.js কপি করুন

পূর্বশর্ত প্রকল্পে, আপনি একটি firebase.js ফাইল তৈরি করেছেন যা Firebase প্রমাণীকরণ পরিষেবার একটি উদাহরণ তৈরি করতে আপনার Firebase প্রকল্প কনফিগারেশন ডেটা ব্যবহার করে। আপনার firebase.js ফাইলে আপনার Firebase প্রোজেক্ট কনফিগারেশন মান সহ নিম্নলিখিত কাঠামো থাকা উচিত:

 import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth }

আপনার নতুন প্রতিক্রিয়া প্রকল্প ফোল্ডারে firebase.js কপি করুন।

ধাপ 4 - প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করা

ধাপ 4a - প্রতিক্রিয়া প্রয়োগের উপাদানগুলির ওভারভিউ

প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে 5টি উপাদান থাকবে: App , Layout , Login , Confirm , এবং Profile ৷

App

• App উপাদান রাউটিং সহ সামগ্রিক অ্যাপ্লিকেশন কাঠামো সংজ্ঞায়িত করে।

Layout

• Layout উপাদানটি অ্যাপ্লিকেশন মার্কআপ নির্দিষ্ট করে যা সমস্ত রুট জুড়ে সামঞ্জস্যপূর্ণ থাকে।

Login

• অ্যাপ্লিকেশনটিতে ব্যবহারকারীর প্রবেশ বিন্দু হল লগইন ফর্ম।
• যখন একজন ব্যবহারকারী তার ইমেল ঠিকানার মাধ্যমে লগইন করার চেষ্টা করেন, তখন একটি সাইন-ইন লিঙ্ক সহ একটি ইমেল তার ইমেল ঠিকানায় পাঠানো হয়।

Confirm

• ব্যবহারকারী যখন একটি সাইন-ইন লিঙ্কে ক্লিক করে তখন তাকে Confirm পৃষ্ঠায় পাঠানো হয়।
• পৃষ্ঠাটি ব্যবহারকারীকে লগ ইন করার সময় ব্যবহৃত ইমেল ঠিকানা নিশ্চিত করার জন্য অনুরোধ করে।

Profile

• ব্যবহারকারীকে তাদের ইমেল ঠিকানা নিশ্চিত করার পরে Profile পৃষ্ঠায় পাঠানো হয়।
• ব্যবহারকারী তার অ্যাকাউন্ট থেকে লগআউট করতে Profile পৃষ্ঠায় একটি লগআউট বোতামে ক্লিক করতে পারেন।

চূড়ান্ত src ডিরেক্টরিতে নিম্নলিখিত ফাইলগুলি থাকবে:

 src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx

ধাপ 4b - প্রতিক্রিয়া প্রকল্প টেমপ্লেট পরিষ্কার করা এবং পূর্বশর্ত প্রকল্প থেকে ফাইলগুলি অনুলিপি করা

1. পূর্বশর্ত গাইডের ধাপ 5b.1 এ বর্ণিত প্রতিক্রিয়া প্রকল্প টেমপ্লেট থেকে আপনি একই ফাইলগুলি মুছতে পারেন। আপনার প্রতিক্রিয়া প্রকল্প থেকে নিম্নলিখিত ফাইলগুলি মুছুন:

• reportWebVitals.js
• setupTests.js
• logo.svg
• index.css
• App.css
• App.test.js

2. আপনার নতুন প্রোজেক্ট ফোল্ডারে পূর্বশর্ত প্রকল্প থেকে index.js কপি করুন। এই গাইড একই ফাইল ব্যবহার করে. আপনার যদি index.js পুনর্নির্মাণের প্রয়োজন হয়, পূর্বশর্ত নির্দেশিকাটির ধাপ 5b.2 দেখুন বা নীচের কোড ব্লকটি অনুলিপি করুন।

3. আপনার নতুন প্রকল্প ফোল্ডারে পূর্বশর্ত প্রকল্প থেকে Layout.jsx অনুলিপি করুন। এই গাইড একই ফাইল ব্যবহার করে. আপনি যদি Layout.jsx পুনর্নির্মাণ করতে চান, তাহলে পূর্বশর্ত নির্দেশিকাটির ধাপ 5d দেখুন বা নীচের কোড ব্লকটি অনুলিপি করুন৷ ঐচ্ছিকভাবে, আপনি React With Firebase Passwordless Authentication Layout.jsx এর <p> ট্যাগে প্রোজেক্টের পাঠ্য আপডেট করতে পারেন অথবা আপনি যে কোনো শিরোনাম পছন্দ করতে পারেন।

   
   

আপনার index.js এবং Layout.jsx ফাইলগুলি নিম্নরূপ হওয়া উচিত:

 // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

 // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( <div className = "container-fluid"> <div className = "row justify-content-center mt-3"> <div className = "col-md-4 text-center"> <p className = "lead">React With Firebase Passwordless Authentication</p> </div> <Outlet /> </div> </div> ) } export default Layout

ধাপ 4c - App.js তৈরি করা

App.js ফাইলটি মূলত একই রকম যা পূর্বশর্ত প্রকল্পে রয়েছে, শুধুমাত্র দুটি লাইনে পরিবর্তন করা হয়েছে। ফাইল তৈরির সুবিধার্থে, পূর্বশর্ত প্রকল্প থেকে আপনার নতুন প্রকল্প ফোল্ডারে App.js অনুলিপি করুন।

1. ফাইল থেকে নিম্নলিখিত import লাইন মুছুন এবং নীচে দেখানো হিসাবে এটি প্রতিস্থাপন করুন:

   
   

 // Delete this line: import Signup from "./Signup";

 // Replace it with: import Confirm from "./Confirm";

2. ফাইল থেকে নিম্নলিখিত <Route> মুছুন এবং নীচে দেখানো হিসাবে এটি প্রতিস্থাপন করুন:

   
   

 // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>

 // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>

3. App.js সংরক্ষণ করুন।

   
   

সম্পূর্ণ ফাইলটি এখন নিম্নরূপ হওয়া উচিত:

 import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( <BrowserRouter> <Routes> <Route path = "/" element = { <Layout></Layout> }> <Route index element = { <Login></Login> }></Route> <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> <Route path = "/profile" element = { <Profile></Profile> } ></Route> </Route> </Routes> </BrowserRouter> ) } export default App

নোট করুন যে Login উপাদানটি আবারও অ্যাপ্লিকেশনের হোম রুট হিসাবে এটি পূর্বশর্ত প্রকল্পের সাথে ছিল।

ধাপ 4d - বিল্ডিং Login.jsx

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

1. src ডিরেক্টরিতে একটি নতুন Login.jsx ফাইল তৈরি করুন।

2. নিম্নলিখিত কোড যোগ করুন:

   
   

 import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button> </div> </form> </div> </div> ) }

3. Login.jsx সংরক্ষণ করুন।

ব্যবহারকারীর ইমেল ঠিকানা ক্যাপচার করার পরে, Login.jsx ফর্ম Firebase-এর sendSignInLinkToEmail পদ্ধতির মাধ্যমে তার ঠিকানায় একটি সাইন-ইন লিঙ্ক সহ একটি ইমেল পাঠায়। সফল হলে, ব্যবহারকারীকে জানানো হয় যে ইমেল পাঠানো হয়েছে। মনে রাখবেন যে actionCodeSettings অবজেক্টটি sendSignInLinkToEmail পদ্ধতিতে একটি প্যারামিটার হিসাবে পাস করা হয়েছে এবং এতে সেই URLটি অন্তর্ভুক্ত রয়েছে যেখানে ব্যবহারকারী ইমেল করা সাইন-ইন লিঙ্কে ক্লিক করলে তাকে রাউট করা হবে। এই ক্ষেত্রে, App.js এ নির্দিষ্ট করা /confirm রুটে URL ম্যাপ করে।

ধাপ 4e - বিল্ডিং Confirm.jsx

Firebase-এর signInWithEmailLink পদ্ধতি ব্যবহার করা হয় সাইন ইন করার জন্য যে ব্যবহারকারী একটি সাইন-ইন লিঙ্কে ক্লিক করেছেন। আপনি কিছুক্ষণের মধ্যে দেখতে পাবেন, পদ্ধতিটি একটি email প্যারামিটার নেয় এবং email মানটি অবশ্যই লগইন ফর্মের মাধ্যমে লগ ইন করার সময় ব্যবহারকারী যে ইমেল ঠিকানাটি ব্যবহার করে তার সাথে মেলে। Confirm.jsx ব্যবহারকারীকে তার/তার ইমেল ঠিকানা নিশ্চিত করার জন্য একটি ফর্ম সহ উপস্থাপন করে এবং পরবর্তীতে ব্যবহারকারীকে সাইন ইন করার চেষ্টা করে।

1. src ডিরেক্টরিতে একটি নতুন Confirm.jsx ফাইল তৈরি করুন।

2. নিম্নলিখিত কোড যোগ করুন:

   
   

 import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button> </div> </form> </div> </div> ) } export default Confirm

3. Confirm.jsx সংরক্ষণ করুন।

isSignInWithEmailLink পদ্ধতিটি প্রথমে চেক করে যে ব্যবহারকারী যে সাইন-ইন লিঙ্কটি ব্যবহার করছেন সেটি বৈধ কিনা। যদি তা হয়, তাহলে ব্যবহারকারীকে সাইন ইন করতে signInWithEmailLink পদ্ধতি বলা হয়। পুনরাবৃত্ত করার জন্য, signInWithEmailLink পদ্ধতিতে পাস করা email মানটি ব্যবহারকারীর লগইন ফর্মের সাথে ব্যবহার করা ইমেল ঠিকানার সাথে মেলে। মনে রাখবেন যে ব্যবহারকারী যদি একজন নতুন ব্যবহারকারী হন (অর্থাৎ, এটি প্রথমবার সাইন ইন করছেন), Firebase স্বয়ংক্রিয়ভাবে Firebase প্রমাণীকরণ স্টোরে ব্যবহারকারী তৈরি করবে। এটি পাসওয়ার্ডহীন প্রমাণীকরণ দ্বারা অফার করা সরলীকৃত অভিজ্ঞতার আরেকটি উদাহরণ: নতুন ব্যবহারকারীদের জন্য অ্যাকাউন্ট তৈরি স্বয়ংক্রিয়ভাবে পরিচালনা করা হয়।

ধাপ 4f - বিল্ডিং Profile.jsx

আপনি যে চূড়ান্ত উপাদানটি তৈরি করবেন তা হল Profile.jsx । ব্যবহারকারীরা যখন Confirm.jsx মাধ্যমে সফলভাবে সাইন ইন করে তখন এই উপাদানটিতে রাউট করা হয়। রুট ব্যবহারকারীকে তাদের ইমেল ঠিকানা সহ স্বাগত জানায় এবং লগআউট করার জন্য একটি বোতাম প্রদান করে। লগআউট করার পরে, ব্যবহারকারীকে Login কম্পোনেন্টে ফেরত পাঠানো হয়।

1. src ডিরেক্টরিতে একটি নতুন Profile.jsx ফাইল তৈরি করুন।

2. নিম্নলিখিত কোড যোগ করুন:

   
   

 import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( <div className = "container"> <div className = "row justify-content-center"> <div className = "col-md-4 text-center"> <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p> <div className = "d-grid gap-2"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button> </div> </div> </div> </div> ) } export default Profile

3. Profile.jsx সংরক্ষণ করুন।

ধাপ 5 - অ্যাপ্লিকেশন পরীক্ষা করা

1. প্রতিক্রিয়া অ্যাপ্লিকেশন শুরু করুন:

   
   

 npm start

2. যদি আপনার ব্রাউজার স্বয়ংক্রিয়ভাবে চালু না হয় তাহলে আপনার ব্রাউজারে locahost:3000 নেভিগেট করুন। আপনি Login ফর্ম দেখতে হবে.

3. সাইন ইন করতে আপনি যে ইমেলটি ব্যবহার করতে চান সেটি লিখুন এবং জমা দিন ক্লিক করুন৷ জমাটি সফল হলে, একটি বিজ্ঞপ্তি প্রদর্শিত হবে যে একটি সাইন-ইন লিঙ্ক সহ একটি ইমেল আপনার ইমেল ঠিকানায় পাঠানো হয়েছে৷

   
   

4. আপনার ইমেল অ্যাকাউন্টে লগইন করুন এবং Firebase সাইন-ইন লিঙ্ক ইমেল খুঁজুন। এটিতে Sign in to project-1078604952662 মতো একটি বিষয় লাইন থাকা উচিত যেখানে 13-সংখ্যার ক্রমটি আপনার ফায়ারবেস প্রকল্পের messagingSenderId প্রতিনিধিত্ব করে (এই গাইডের ধাপ 3 দেখুন)। নীচের ঐচ্ছিক বিভাগে, সাইন-ইন লিঙ্ক ইমেলগুলিতে একটি "ব্যবহারকারী-বান্ধব" নাম প্রদর্শন করতে আপনি কীভাবে আপনার Firebase প্রকল্পের নাম পরিবর্তন করতে পারেন তা আমি ব্যাখ্যা করব৷ আপাতত, সাইন-ইন লিঙ্ক ইমেল খুলুন এবং সাইন-ইন লিঙ্কে ক্লিক করুন। আপনাকে Confirm ফর্মে পাঠানো হবে।

5. Confirm ফর্মে সাইন ইন করার সময় আপনি যে ইমেল ঠিকানাটি ব্যবহার করেছিলেন তা লিখুন৷ নিশ্চিত করুন ক্লিক করুন। নিশ্চিতকরণ সফল হলে, আপনাকে Profile পৃষ্ঠায় নিয়ে যাওয়া হবে।

   
   

6. সাইন আউট করতে Profile পৃষ্ঠায় লগআউট বোতামে ক্লিক করুন। সাইন-আউট সফল হলে, আপনাকে Login ফর্মে ফেরত পাঠানো হবে।

   
   

উপরের ধাপগুলি অ্যাপ্লিকেশনের জন্য ওয়ার্কফ্লো ক্যাপচার করে।

ঐচ্ছিক: আপনার প্রকল্পের নাম পরিবর্তন করা

আপনি আপনার প্রকল্পের নাম পরিবর্তন করতে পারেন যাতে Firebase দ্বারা প্রেরিত সাইন-ইন লিঙ্ক ইমেলগুলি এর পরিবর্তে একটি "ব্যবহারকারী-বান্ধব" নাম প্রদর্শন করে, উদাহরণস্বরূপ, project-1078604952662 । আপনার ফায়ারবেস অ্যাকাউন্টে লগইন করুন এবং কনসোলে যান- এ ক্লিক করুন।

1. Firebase প্রকল্প ড্যাশবোর্ডে তালিকাভুক্ত আপনার প্রমাণীকরণ প্রকল্পে ক্লিক করুন।
2. বাম প্যানেল মেনুতে প্রজেক্ট ওভারভিউ এর পাশে গিয়ার আইকনে ক্লিক করুন। সাধারণ ট্যাবটি ইতিমধ্যেই নির্বাচন করা উচিত।
3. আপনার প্রকল্প বিভাগে সর্বজনীন-মুখী নাম বিকল্পে নীচে স্ক্রোল করুন।
4. পেন্সিল আইকনে ক্লিক করুন এবং আপনার প্রকল্পের নাম পছন্দসই পরিবর্তন করুন।
5. Save এ ক্লিক করুন। আপনার সাইন-ইন লিঙ্ক ইমেলগুলি এখন আপডেট করা প্রকল্পের নাম প্রদর্শন করবে।

উপসংহার এবং পরবর্তী পদক্ষেপ

পাসওয়ার্ডহীন প্রমাণীকরণ অ্যাপ্লিকেশন বিকাশকারীদের মধ্যে একটি ক্রমবর্ধমান জনপ্রিয় পছন্দ বলে মনে হচ্ছে এবং বোধগম্যভাবে তাই। পাসওয়ার্ড পরিচালনা করার প্রয়োজনীয়তা দূর করার সুস্পষ্ট সুবিধার বাইরে, ইমেল যাচাইকরণেরও কোন প্রয়োজন নেই যেহেতু সাইন-ইন লিঙ্ক পাঠানোর প্রক্রিয়াটি নিজেই একটি যাচাইকরণ।

পূর্বশর্ত প্রকল্পের মতো, এখানে বাস্তবায়ন মৌলিক। আপনি সাধারণ উন্নতিগুলি বিবেচনা করতে পারেন যেমন:

• নির্দিষ্ট ইমেল ঠিকানা ডোমেনগুলিকে ব্লক করা/ব্ল্যাকলিস্ট করা (যেমন, সাধারণ স্প্যাম ইমেল ডোমেন)।

• Login পৃষ্ঠায় ব্যবহারকারীর দ্বারা প্রবেশ করা ইমেল ঠিকানা স্থানীয়ভাবে সংরক্ষণ করা এবং Confirm পৃষ্ঠায় ইমেল ঠিকানাটির অস্তিত্ব পরীক্ষা করা। এই পদ্ধতির সাহায্যে, ব্যবহারকারী যদি একই ডিভাইসে একটি সাইন-ইন লিঙ্কে ক্লিক করেন যেখানে তিনি Login পৃষ্ঠাটি অ্যাক্সেস করেছিলেন, তাহলে তাকে Confirm পৃষ্ঠায় আবার তার ইমেল ঠিকানা লিখতে হবে না কারণ এটি পুনরুদ্ধার করা হবে। স্থানীয় স্টোরেজ থেকে। এটি আরও বেশি ঘর্ষণহীন ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।

  
  

আপনি অফিসিয়াল ডকুমেন্টেশনের মাধ্যমে Firebase পাসওয়ার্ডহীন প্রমাণীকরণ সম্পর্কে আরও জানতে পারেন।