ওয়েবসাইটগুলিতে ফায়ারবেস প্রমাণীকরণের সাথে শুরু করুন৷

আপনি Firebase Authentication ব্যবহার করে ব্যবহারকারীদের আপনার অ্যাপে এক বা একাধিক সাইন-ইন পদ্ধতি, যেমন—ইমেল অ্যাড্রেস ও পাসওয়ার্ড সাইন-ইন এবং গুগল সাইন-ইন ও ফেসবুক লগইনের মতো ফেডারেটেড আইডেন্টিটি প্রোভাইডার ব্যবহার করে সাইন ইন করার অনুমতি দিতে পারেন। এই টিউটোরিয়ালটি আপনার অ্যাপে কীভাবে ইমেল অ্যাড্রেস এবং পাসওয়ার্ড সাইন-ইন যুক্ত করতে হয় তা দেখানোর মাধ্যমে আপনাকে 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;
    // ..
  });
auth_signup_password.js

Web 

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

বিদ্যমান ব্যবহারকারীরা সাইন ইন করুন

এমন একটি ফর্ম তৈরি করুন যা বিদ্যমান ব্যবহারকারীদের তাদের ইমেল ঠিকানা এবং পাসওয়ার্ড ব্যবহার করে সাইন ইন করার সুযোগ দেবে। যখন কোনো ব্যবহারকারী ফর্মটি পূরণ করবেন, তখন 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;
  });
auth_signin_password.js

Web 

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

একটি প্রমাণীকরণ অবস্থা পর্যবেক্ষক সেট করুন এবং ব্যবহারকারীর ডেটা পান

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

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
    // ...
  }
});
auth_state_listener.js

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
    // ...
  }
});
index.js

পরবর্তী পদক্ষেপ

অন্যান্য আইডেন্টিটি প্রোভাইডার এবং বেনামী গেস্ট অ্যাকাউন্টের জন্য সাপোর্ট কীভাবে যোগ করতে হয় তা জানুন: