میتوانید از Firebase Authentication استفاده کنید تا به کاربران اجازه دهید با استفاده از یک یا چند روش ورود به سیستم وارد برنامه شما شوند، از جمله ورود به سیستم آدرس ایمیل و رمز عبور، و ارائهدهندگان هویت فدرال مانند Google Sign-in و Facebook Login. این آموزش با نشان دادن نحوه افزودن آدرس ایمیل و ورود رمز عبور به برنامه خود، شما را با Firebase Authentication شروع می کند.
Authentication SDK را اضافه و مقداردهی اولیه کنید
اگر قبلاً این کار را نکردهاید، Firebase JS SDK را نصب کرده و Firebase را مقداردهی اولیه کنید .
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 یا نمونهسازی طرحهای UI ورود به سیستم، امکان کار به صورت محلی بدون استقرار سرویسهای زنده میتواند ایده خوبی باشد. .
یک شبیهساز Authentication بخشی از Local Emulator Suite است که به برنامه شما امکان میدهد با محتوای پایگاه داده شبیهسازیشده و پیکربندی، و همچنین بهصورت اختیاری منابع پروژه شبیهسازی شده شما (توابع، سایر پایگاههای داده، و قوانین امنیتی) تعامل داشته باشد.
استفاده از شبیه ساز Authentication تنها شامل چند مرحله است:
- افزودن یک خط کد به پیکربندی آزمایشی برنامه برای اتصال به شبیه ساز.
- از ریشه دایرکتوری پروژه محلی خود،
firebase emulators:start
اجرا کنید. - استفاده از Local Emulator Suite UI برای نمونه سازی تعاملی، یا Authentication emulator REST API برای تست غیرتعاملی.
راهنمای دقیق در اتصال برنامه خود به شبیهساز 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 // ... } });
مراحل بعدی
با نحوه افزودن پشتیبانی برای سایر ارائه دهندگان هویت و حساب های مهمان ناشناس آشنا شوید: