شروع به کار با «اصالت‌سنجی 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
    // ...
  }
});

مراحل بعدی

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