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

می توانید از Firebase Authentication استفاده کنید تا به کاربران اجازه دهید با استفاده از یک یا چند روش ورود به سیستم وارد برنامه شما شوند، از جمله ورود به سیستم آدرس ایمیل و رمز عبور، و ارائه دهندگان هویت فدرال مانند Google Sign-in و Facebook Login. این آموزش با نشان دادن نحوه افزودن آدرس ایمیل و ورود رمز عبور به برنامه خود، شما را با احراز هویت Firebase شروع می کند.

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

  1. اگر قبلاً این کار را نکرده‌اید، Firebase JS SDK را نصب کنید و Firebase را مقداردهی اولیه کنید.

  2. Firebase Authentication JS SDK را اضافه کنید و Firebase Authentication را مقداردهی اولیه کنید:

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(اختیاری) نمونه اولیه و آزمایش با Firebase Local Emulator Suite

قبل از صحبت در مورد اینکه برنامه شما چگونه کاربران را احراز هویت می‌کند، بیایید مجموعه‌ای از ابزارها را معرفی کنیم که می‌توانید از آنها برای نمونه‌سازی اولیه و آزمایش عملکرد احراز هویت استفاده کنید: Firebase Local Emulator Suite. اگر از میان تکنیک‌ها و ارائه‌دهندگان احراز هویت تصمیم می‌گیرید، آزمایش مدل‌های مختلف داده با داده‌های عمومی و خصوصی با استفاده از احراز هویت و قوانین امنیتی Firebase، یا نمونه‌سازی اولیه طرح‌های UI ورود به سیستم، توانایی کار به صورت محلی بدون استقرار خدمات زنده می‌تواند ایده خوبی باشد. .

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

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

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

راهنمای دقیق در اتصال برنامه خود به شبیه‌ساز احراز هویت موجود است. برای اطلاعات بیشتر، به معرفی Local Emulator Suite مراجعه کنید.

حالا بیایید به نحوه احراز هویت کاربران ادامه دهیم.

ثبت نام کاربران جدید

فرمی ایجاد کنید که به کاربران جدید امکان می دهد با استفاده از آدرس ایمیل و رمز عبور در برنامه شما ثبت نام کنند. هنگامی که کاربر فرم را تکمیل کرد، آدرس ایمیل و رمز عبور ارائه شده توسط کاربر را تأیید کنید، سپس آنها را به روش createUserWithEmailAndPassword کنید:

Web version 9

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;
    // ..
  });

Web version 8

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 version 9

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 version 8

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 version 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web version 8

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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

مراحل بعدی

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