ওয়েবসাইটে Firebase যাচাইকরণ ব্যবহার শুরু করা

আপনি Firebase Authentication ব্যবহার করে ব্যবহারকারীদের আপনার অ্যাপে সাইন-ইন করার অনুমতি দিতে পারেন। এর মধ্যে ইমেল আইডি ও পাসওয়ার্ড দিয়ে সাইন-ইন করা এবং Google সাইন-ইন ও Facebook লগ-ইনের মতো ফেডারেটেড আইডেন্টিটি প্রদানকারী সহ এক বা একাধিক সাইন-ইন পদ্ধতি অন্তর্ভুক্ত। এই টিউটোরিয়াল আপনাকে Firebase Authentication-এর সাথে শুরু করতে সাহায্য করে। এটি আপনাকে দেখায় যে কীভাবে আপনার অ্যাপে ইমেল আইডি ও পাসওয়ার্ড দিয়ে সাইন-ইন করার সুবিধা যোগ করতে হয়।

Authentication SDK যোগ করে ইনিশিয়ালাইজ করা

  1. আপনি আগে থেকে না করে থাকলে, Firebase JS SDK ইনস্টল করুন এবং Firebase ইনিশিয়ালাইজ করুন।

  2. Firebase Authentication JS SDK যোগ করুন এবং Firebase Authentication শুরু করুন:

Web 

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(ঐচ্ছিক) Firebase Local Emulator Suite-এর সাথে প্রোটোটাইপ ও পরীক্ষা করুন

আপনার অ্যাপ কীভাবে ব্যবহারকারীদের যাচাই করে সেই বিষয়ে আলোচনা করার আগে, আসুন আমরা এমন কিছু টুল সম্পর্কে জেনে নিই যা আপনি Authentication কার্যকারিতা প্রোটোটাইপ ও টেস্ট করার জন্য ব্যবহার করতে পারেন: Firebase Local Emulator Suite. আপনি যদি যাচাইকরণ পদ্ধতি ও পরিষেবা প্রদানকারীর মধ্যে সিদ্ধান্ত নিতে চান, Authentication ও Firebase Security Rules ব্যবহার করে পাবলিক ও ব্যক্তিগত ডেটা দিয়ে বিভিন্ন ডেটা মডেল চেষ্টা করে দেখতে চান অথবা সাইন-ইন UI ডিজাইন প্রোটোটাইপ করতে চান, তাহলে লাইভ পরিষেবা ডেপ্লয় না করেই লোকালি কাজ করতে পারাটা খুব ভাল আইডিয়া হতে পারে।

Authentication এমুলেটর হল Local Emulator Suite-এর অংশ, যা আপনার অ্যাপকে এমুলেট করা ডেটাবেস কন্টেন্ট ও কনফিগারেশনের সাথে ইন্টার‍্যাক্ট করতে দেয়, সেইসাথে ঐচ্ছিকভাবে আপনার এমুলেট করা প্রজেক্ট রিসোর্স (ফাংশন, অন্যান্য ডেটাবেস ও সুরক্ষা সংক্রান্ত নিয়ম)।

Authentication এমুলেটর ব্যবহার করার জন্য মাত্র কয়েকটি ধাপ অনুসরণ করতে হয়:

  1. ইমুলেটরের সাথে কানেক্ট করার জন্য আপনার অ্যাপের টেস্ট কনফিগে কোডের একটি লাইন যোগ করা।
  2. আপনার লোকাল প্রোজেক্ট ডিরেক্টরির রুট থেকে, firebase emulators:start রান করা হচ্ছে।
  3. ইন্টার‍্যাক্টিভ প্রোটোটাইপিংয়ের জন্য Local Emulator Suite UI ব্যবহার করে অথবা Authentication নন-ইন্টার‍্যাক্টিভ টেস্টিংয়ের জন্য এমুলেটর REST API ব্যবহার করে।

Authentication এমুলেটরে আপনার অ্যাপ কানেক্ট করুন লিঙ্কে বিস্তারিত নির্দেশিকা উপলভ্য আছে। আরও তথ্যের জন্য, Local Emulator Suite ভূমিকা দেখুন।

এখন কীভাবে ব্যবহারকারীদের যাচাই করতে হয় তা দেখা যাক।

নতুন ব্যবহারকারীদের সাইন-আপ করা

এমন একটি ফর্ম তৈরি করুন যা নতুন ব্যবহারকারীদের তাদের ইমেল আইডি এবং পাসওয়ার্ড ব্যবহার করে আপনার অ্যাপে রেজিস্টার করতে দেয়। ব্যবহারকারী ফর্ম পূরণ করলে, তার দেওয়া ইমেল আইডি ও পাসওয়ার্ড যাচাই করে, সেগুলি createUserWithEmailAndPassword পদ্ধতিতে পাস করুন:

Web

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

Web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

আগে থেকেই থাকা ব্যবহারকারীদের সাইন-ইন করা

এমন একটি ফর্ম তৈরি করুন যা আগে থেকে থাকা ব্যবহারকারীদের তাদের ইমেল আইডি ও পাসওয়ার্ড ব্যবহার করে সাইন-ইন করতে দেয়। ব্যবহারকারী ফর্ম পূরণ করলে, signInWithEmailAndPassword মেথড কল করুন:

Web

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

Web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

যাচাইকরণ স্টেট অবজারভার সেট করা এবং ব্যবহারকারীর ডেটা পাওয়া

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

onAuthStateChanged পদ্ধতি ব্যবহার করে পর্যবেক্ষককে অ্যাটাচ করুন। কোনও ব্যবহারকারী সফলভাবে সাইন-ইন করলে, আপনি পর্যবেক্ষণে ব্যবহারকারী সম্পর্কে তথ্য পেতে পারেন।

Web

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

পরবর্তী ধাপ

অন্যান্য পরিচয় প্রদানকারী ও বেনামী অতিথি অ্যাকাউন্টের জন্য কীভাবে সহায়তা যোগ করতে হয় তা জানুন: