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

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

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

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

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

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);

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

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

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

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

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

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

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

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

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

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 فراخوانی کنید:

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

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

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

برای هر یک از صفحات برنامه شما که به اطلاعاتی در مورد کاربر واردشده به سیستم نیاز دارند، یک ناظر را به شی احراز هویت جهانی پیوست کنید. هر زمان که وضعیت ورود کاربر تغییر کند، این ناظر فراخوانی می شود.

مشاهده گر را با استفاده از روش onAuthStateChanged وصل کنید. هنگامی که یک کاربر با موفقیت وارد سیستم می شود، می توانید اطلاعاتی در مورد کاربر در مشاهده کننده دریافت کنید.

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

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

مراحل بعدی

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

• ورود به سیستم گوگل
• ورود به فیس بوک
• ورود به توییتر
• ورود به سیستم GitHub
• ورود به سیستم ناشناس