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

আপনি 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 ব্যবহার করা।

একটি বিস্তারিত নির্দেশিকা "Connect your app to the Authentication emulator" বিভাগে পাওয়া যাবে। আরও তথ্যের জন্য, 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

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

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