شروع به کار با «اصالت‌سنجی Firebase» در وب‌سایت‌ها

می‌توانید از Firebase Authentication استفاده کنید تا به کاربران اجازه دهید بااستفاده از یک یا چند روش ورود به سیستم، ازجمله ورود به سیستم با نشانی ایمیل و گذرواژه، و ارائه‌دهندگان هویت فدرال مانند «ورود به سیستم با Google» و «ورود به سیستم با Facebook» به سیستم برنامه شما وارد شوند. این آموزش گام‌به‌گام با نشان دادن نحوه افزودن ورود به سیستم با گذرواژه و نشانی ایمیل به برنامه‌تان، شما را با Firebase Authentication آشنا می‌کند.

افزودن و مقداردهی اولیه کیت توسعه نرم‌افزار Authentication

  1. اگر قبلاً این کار را نکرده‌اید، «کیت توسعه نرم‌افزار Firebase JS» را نصب کنید و 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 واسط کاربر برای نمونه‌سازی تعاملی، یا Authentication میانای برنامه‌سازی کاربردی شبیه‌ساز REST برای آزمایش غیرتعاملی.

راهنمای مفصلی در اتصال برنامه به شبیه‌ساز 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
    // ...
  }
});

مراحل بعدی

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