Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

با احراز هویت 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 برای نمونه سازی تعاملی، یا Authentication emulator 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
    // ...
  }
});

مراحل بعدی

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