Firebase предоставя услуги за удостоверяване, които ви позволяват лесно да регистрирате и влизате в потребители. Можете да използвате имейл, пароли, телефонни номера и доставчици на самоличност като Google и Facebook.

В този урок ще научите как можете да използвате Firebase Authentication в React за удостоверяване на потребители с помощта на имейл и парола. Вие ще съхранявате потребителските данни, събрани във Firestore, облачна база данни NoSQL също от Firebase.

Имайте предвид, че този урок използва Firebase v9 и React Router v6.

Създайте приложение на Firebase

За да свържете приложението си към Firebase, регистрирайте приложението си във Firebase, за да получите конфигурационен обект. Това е, което ще използвате, за да инициализирате Firebase във вашето React приложение.

За да създадете приложение за firebase, следвайте следните стъпки.

  1. Насочете се към Firebase конзола и щракнете Създайте проект.
  2. Дайте име на проекта си и щракнете създавай за да започне процеса.
  3. Кликнете върху уеб икона (
    4. instagram viewer
  4. Дайте на приложението си име по ваш избор и щракнете Регистрирайте приложение. Не е необходимо да активирате Firebase хостинг.
  5. Копирайте конфигурационния обект под Добавете Firebase SDK.

Създайте React приложение

Използвайте създаване-реагиране-приложение да скелета на приложение React.

npx create-react-app react-auth-firebase

Придвижете се до папката и стартирайте приложението.

cd react-auth-firebase
npm стартиране на стартиране

Удостоверяване на потребители с функции на Firebase

Преди да използвате Firebase, инсталирайте го.

npm i firebase

Създайте нов файл, firebase.js, и инициализирайте Firebase.

import { initializeApp } от "firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 идентификатор на проекта: ,
 кофа за съхранение: ,
 messagingSenderId: ,
 appId: 
};
// Инициализираме Firebase
const app = initializeApp (firebaseConfig);

Използвайте конфигурационния обект, който сте копирали, когато сте регистрирали приложението.

След това импортирайте модулите на Firebase, които ще използвате.

импортиране {
 getAuth,
 createUserWithEmailAndPassword,
 вход с имейл и парола,
 отписване,
} от "firebase/auth";
import { getFirestore, addDoc, collection } от "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Да се удостоверяване на потребители, трябва да създадете три функции: регистрация, влизане и излизане.

В Регистрирай се функцията предава имейла и паролата на createUserWithEmailAndPassword за да регистрирате нов потребител. createUserWithEmailAndPassword връща потребителските данни, които ще използвате, за да създадете нов потребителски запис в базата данни.

const signUp = async (имейл, парола) => {
 опитвам {
 const userCredential = чакам createUserWithEmailAndPassword(
 авт.,
 електронна поща,
 парола
 );
 const потребител = userCredential.user;
 await addDoc (колекция (db, "users"), {
 uid: user.uid,
 имейл: user.email,
 });
 върне истина
 } улов (грешка) {
 върнете {error: error.message}
 }
};

Имайте предвид, че не проверявате дали имейлът вече се използва преди регистрацията, защото Firebase се справя с това вместо вас.

След това в Впиши се функция предава имейла и паролата на signInWithEmailИPassword функция за влизане на регистриран потребител.

const signIn = async (имейл, парола) => {
 опитвам {
 const userCredential = чакам signInWithEmailAndPassword(
 авт.,
 електронна поща,
 парола
 );
 const потребител = userCredential.user;
 върне истина
 } улов (грешка) {
 върнете {error: error.message}
 }
};

И двете функции за регистрация и изход връщат true, ако са успешни, и съобщение за грешка, ако възникне грешка.

Функцията за излизане е доста проста. То нарича отписване() функция от Firebase.

const signOut = async() => {
 опитвам {
 чакам излизане (авторизация)
 върне истина
 } улов (грешка) {
 върне false
 }
};

Създаване на React Forms

Формулярите за вход и регистрация ще събират имейла и паролата от потребителя.

Създайте нов компонент Signup.js и добавете следното.

import { useState } от "react";
import { Link } от "react-router-dom";
import { signUp } от "./firebase";
const Регистрация = () => {
 const [имейл, setEmail] = useState("");
 const [парола, setPassword] = useState("");
 const [грешка, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (парола !== парола2) {
 seterror("Паролите не съвпадат");
 } друго {
 setEmail("");
 setPassword("");
 const res = чакам регистрация (имейл, парола);
 if (res.error) seterror (res.error)
 }
 };
 връщане (
 <>
Регистрирай се




 {грешка? 
{грешка}
: нула}


 type="имейл"
 име = "имейл"
 стойност={имейл}
 placeholder="Вашият имейл"
 задължително
 onChange={(e) => setEmail (e.target.value)}
 />
 type="password"
 име = "парола"
 стойност={парола}
 placeholder="Вашата парола"
 задължително
 onChange={(e) => setPassword (e.target.value)}
 />






 вече е регистриран? Влизам






 );
};
експортиране по подразбиране Регистрация;

Тук създавате формуляр за регистрация и следите имейла и паролата, използвайки състоянието. След като изпратите формуляра, при изпращане събитие задейства handleSubmit() функция, която извиква Регистрирай се() функция от firebase.js. Ако функцията върне грешка, актуализирайте състоянието на грешката и покажете съобщението за грешка.

За формуляра за вход създайте Signin.js и добавете следното.

import { useState } от "react";
import { signIn } от "./firebase";
const Вход = () => {
 const [имейл, setEmail] = useState("");
 const [парола, setPassword] = useState("");
 const [грешка, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 setPassword("");
 const res = чакам влизане (имейл, парола);
 if (res.error) seterror (res.error);
 };
 връщане (
 <>
 {грешка? 
{грешка}
: нула}


 type="text"
 име = "имейл"
 стойност={имейл}
 placeholder="Вашият имейл"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="password"
 име = "парола"
 стойност={парола}
 placeholder="Вашата парола"
 onChange={(e) => setPassword (e.target.value)}
 />





 );
};
експортиране по подразбиране Вход;

Формулярът за вход е доста подобен на страницата за регистрация, с изключение на това, че подаването извиква Впиши се() функция.

И накрая, създайте страницата на профила. Това е страницата, към която приложението ще пренасочи потребителите след успешно удостоверяване.

Създайте Profile.js и добавете следното.

import { signOut } от "./firebase";
const профил = () => {
 const handleLogout = async () => {
 чакам излизане ();
 };
 връщане (
 <>
Профил



 );
};
експортиране на профил по подразбиране;

В този компонент имате заглавието на профила и бутона за излизане. В onClick манипулатор на бутона задейства handleИзход функция, която излиза от потребителя.

Създаване на маршрути за удостоверяване

За да обслужвате създадените от вас страници в браузъра, настройте react-router-dom.

Инсталирай реакция-рутер-дом:

npm i react-router-dom

В index.js, конфигурирайте реакция-рутер-дом:

импортирайте React от "react";
импортирайте ReactDOM от "react-dom";
import { BrowserRouter, Routes, Route } от "react-router-dom";
импортирайте приложение от "./App";
импортирайте Вход от "./Login";
импортирайте профил от "./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

До този момент приложението може да регистрира потребител, да го регистрира и да излезе от него. И така, как да разберете дали даден потребител е влязъл или не?

В следващия раздел на този урок ще видите как можете да използвате контекста на React, за да следите състоянието на удостоверяване на потребителя в приложението.

Управлявайте удостоверяването с React Context API

React Context е инструмент за управление на състоянието, който опростява споделянето на данни между приложения. Това е по-добра алтернатива на пробиване на опори, при което данните преминават надолу по дървото от родител на дете, докато достигнат до компонента, който се нуждае от тях.

Създаване на контекст за удостоверяване

В src папка, добавете AuthContext.js файл и създаване и експортиране AuthContext.

import { createContext } от "react";
const AuthContext = createContext();
експортиране по подразбиране AuthContext;

След това създайте доставчика в AuthProvider.js. Това ще позволи използването на компоненти AuthContext.

import { getAuth, onAuthStateChanged } от "firebase/auth";
import { useState, useEffect } от 'react';
импортирайте AuthContext от './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ деца }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (потребител)
 })
 }, []);
връщане (
{деца}
 );
 };

Тук получавате потребителската стойност, като използвате onAuthStateChanged() метод от Firebase. Този метод връща потребителски обект, ако удостоверява потребителя и нула, ако не може. С помощта на useEffect() кука, потребителската стойност се актуализира всеки път, когато състоянието на удостоверяване се промени.

В index.js, обвийте маршрутите с AuthProvider за да се гарантира, че всички компоненти имат достъп до потребителя в контекста:

импортирайте { AuthProvider } от "./AuthProvider";
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById("root")
);

Създаване на защитени маршрути

Да се защита на чувствителни маршрути, проверете състоянието на удостоверяване на потребител, който се опитва да отиде до защитена страница като страницата на потребителския профил.

Промяна Profile.js за пренасочване на потребител, ако не е удостоверен.

import { useContext } от "react";
импортирайте AuthContext от "./AuthContext";
import { useNavigate, Navigate } от "react-router-dom";
import { signOut } от "./firebase";
const профил = () => {
 const { user } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = async () => {
 чакам излизане ();
 };
 ако (!потребител) {
 връщане ;
 }
 връщане (
 <>
Профил



 );
};
експортиране на профил по подразбиране;

Приложението условно изобразява страницата на профила, като пренасочи потребителя към страницата за вход, ако не е удостоверен.

По-нататък с удостоверяването на Firebase

В този урок използвахте Firebase за удостоверяване на потребители, използвайки техния имейл и парола. Вие също сте създали потребителски записи във Firestore. Firebase предоставя функции за работа с доставчици на удостоверяване като Google, Facebook и Twitter.

10 най-добри практики на React, които трябва да следвате през 2022 г

Прочетете Следващото

ДялтуитДялелектронна поща

Свързани теми

  • Програмиране
  • Реагирайте
  • Програмиране
  • JavaScript

За автора

Мери Гатони (публикувани 12 статии)

Мери Гатони е разработчик на софтуер със страст за създаване на техническо съдържание, което е не само информативно, но и ангажиращо. Когато не кодира или пише, тя обича да излиза с приятели и да е на открито.

Още от Mary Gathoni

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, ревюта, безплатни електронни книги и ексклузивни оферти!

Щракнете тук, за да се абонирате