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

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

برنامه خود را به Firebase وصل کنید

نصب فایربیس SDK . مطمئن شوید که کد پیکربندی را مطابق توضیحات در صفحه وب خود قرار دهید.

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

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

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

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

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

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

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

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

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

نسخه وب 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;
    // ..
  });

نسخه وب 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 روش:

نسخه وب 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;
  });

نسخه وب 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 روش. هنگامی که یک کاربر با موفقیت وارد سیستم می شود ، می توانید اطلاعات مربوط به کاربر را در ناظر دریافت کنید.

نسخه وب 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
    // ...
  }
});

نسخه وب 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
    // ...
  }
});

مراحل بعدی

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