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

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

প্রমাণীকরণ SDK যোগ করুন এবং শুরু করুন

  1. আপনি যদি ইতিমধ্যেই না করে থাকেন তাহলে Firebase JS SDK ইনস্টল করুন এবং Firebase শুরু করুন ।

  2. Firebase প্রমাণীকরণ JS SDK যোগ করুন এবং Firebase প্রমাণীকরণ শুরু করুন:

ওয়েব মডুলার API

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);

ওয়েব নামস্থান API

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();

(ঐচ্ছিক) ফায়ারবেস স্থানীয় এমুলেটর স্যুটের সাথে প্রোটোটাইপ এবং পরীক্ষা করুন

আপনার অ্যাপ কীভাবে ব্যবহারকারীদের প্রমাণীকরণ করে সে সম্পর্কে কথা বলার আগে, আসুন প্রমাণীকরণ কার্যকারিতা প্রোটোটাইপ এবং পরীক্ষা করার জন্য আপনি ব্যবহার করতে পারেন এমন সরঞ্জামগুলির একটি সেট পরিচয় করিয়ে দেওয়া যাক: ফায়ারবেস স্থানীয় এমুলেটর স্যুট। আপনি যদি প্রমাণীকরণ কৌশল এবং প্রদানকারীদের মধ্যে সিদ্ধান্ত নিচ্ছেন, প্রমাণীকরণ এবং ফায়ারবেস নিরাপত্তা নিয়ম ব্যবহার করে পাবলিক এবং প্রাইভেট ডেটা সহ বিভিন্ন ডেটা মডেল ব্যবহার করে দেখুন, বা সাইন-ইন UI ডিজাইনের প্রোটোটাইপিং করুন, লাইভ পরিষেবাগুলি স্থাপন না করে স্থানীয়ভাবে কাজ করতে সক্ষম হওয়া একটি দুর্দান্ত ধারণা হতে পারে। .

একটি প্রমাণীকরণ এমুলেটর হল স্থানীয় এমুলেটর স্যুটের অংশ, যা আপনার অ্যাপকে এমুলেটেড ডাটাবেস সামগ্রী এবং কনফিগারেশনের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে, সেইসাথে ঐচ্ছিকভাবে আপনার অনুকরণ করা প্রকল্প সংস্থানগুলি (ফাংশন, অন্যান্য ডাটাবেস এবং নিরাপত্তা নিয়ম)।

প্রমাণীকরণ এমুলেটর ব্যবহার করা মাত্র কয়েকটি ধাপ জড়িত:

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

একটি বিস্তারিত নির্দেশিকা Connect your app to the Authentication emulator-এ উপলব্ধ। আরও তথ্যের জন্য, স্থানীয় এমুলেটর স্যুটের ভূমিকা দেখুন।

এখন চলুন কিভাবে ব্যবহারকারীদের প্রমাণীকরণ করা যায়।

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

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

Web modular API

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

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

Web namespaced API

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 modular API

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 namespaced API

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 modular API

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 namespaced API

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

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

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