با احراز هویت Firebase در وب سایت ها شروع کنید

شما می‌توانید Firebase Authentication استفاده کنید تا به کاربران اجازه دهید با استفاده از یک یا چند روش ورود به سیستم، از جمله ورود با آدرس ایمیل و رمز عبور، و ارائه دهندگان هویت فدرال مانند ورود به سیستم گوگل و ورود به سیستم فیسبوک، وارد برنامه شما شوند. این آموزش با نشان دادن نحوه اضافه کردن ورود با آدرس ایمیل و رمز عبور به برنامه، شما را با Firebase Authentication آشنا می‌کند.

اضافه کردن و مقداردهی اولیه SDK Authentication

  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 امتحان می‌کنید، یا طرح‌های رابط کاربری ورود به سیستم را نمونه‌سازی می‌کنید، توانایی کار به صورت محلی بدون استقرار سرویس‌های زنده می‌تواند ایده خوبی باشد.

یک شبیه‌ساز Authentication بخشی از Local Emulator Suite است که به برنامه شما امکان می‌دهد با محتوا و پیکربندی پایگاه داده شبیه‌سازی شده، و همچنین به صورت اختیاری با منابع پروژه شبیه‌سازی شده شما (توابع، سایر پایگاه‌های داده و قوانین امنیتی) تعامل داشته باشد.

استفاده از شبیه‌ساز Authentication فقط شامل چند مرحله است:

  1. اضافه کردن یک خط کد به فایل پیکربندی آزمایشی برنامه برای اتصال به شبیه‌ساز.
  2. از ریشه دایرکتوری پروژه محلی خود، firebase emulators:start .
  3. استفاده از رابط کاربری Local Emulator Suite برای نمونه‌سازی تعاملی، یا REST API شبیه‌ساز Authentication برای آزمایش غیرتعاملی.

راهنمای مفصلی در «برنامه خود را به شبیه‌ساز 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

تنظیم یک ناظر وضعیت احراز هویت و دریافت داده‌های کاربر

برای هر یک از صفحات برنامه شما که به اطلاعات کاربر وارد شده نیاز دارند، یک ناظر (Observer) به شیء احراز هویت سراسری (global authentication object) متصل کنید. این ناظر هر زمان که وضعیت ورود کاربر تغییر کند، فراخوانی می‌شود.

با استفاده از متد onAuthStateChanged ناظر (observer) را متصل کنید. وقتی کاربری با موفقیت وارد سیستم شد، می‌توانید اطلاعات مربوط به کاربر را در ناظر (observer) دریافت کنید.

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

مراحل بعدی

یاد بگیرید چگونه پشتیبانی از سایر ارائه دهندگان هویت و حساب‌های مهمان ناشناس را اضافه کنید: