A Firebase hitelesítési szolgáltatásokat nyújt, amelyek lehetővé teszik a felhasználók egyszerű regisztrációját és bejelentkezését. Használhat e-maileket, jelszavakat, telefonszámokat és identitásszolgáltatókat, például a Google-t és a Facebookot.

Ebből az oktatóanyagból megtudhatja, hogyan használhatja a Firebase Authentication szolgáltatást a React alkalmazásban a felhasználók hitelesítésére e-mail és jelszó használatával. Az összegyűjtött felhasználói adatokat a Firestore-ban, a szintén Firebase-től származó NoSQL felhőadatbázisban tárolja.

Vegye figyelembe, hogy ez az oktatóanyag a Firebase v9-et és a React Router v6-ot használja.

Hozzon létre egy Firebase alkalmazást

Az alkalmazás összekapcsolásához Firebase, regisztrálja alkalmazását a Firebase-nél a konfigurációs objektum lekéréséhez. Ezt fogja használni a Firebase inicializálásához a React alkalmazásban.

Firebase alkalmazás létrehozásához kövesse az alábbi lépéseket.

1. Irány a Firebase konzol és kattintson Hozzon létre egy projektet.
2. Adjon nevet a projektnek, és kattintson teremt a folyamat elindításához.
instagram viewer
3. Kattintson a Web ikon (
4. Adjon az alkalmazásnak egy választott nevet, és kattintson Regisztrálja az alkalmazást. Nem kell engedélyeznie a Firebase Hosting szolgáltatást.
5. Másolja át a konfigurációs objektumot Adja hozzá a Firebase SDK-t.

Hozzon létre egy React alkalmazást

Használat alkalmazás létrehozása-reagálása hogy állványozzon egy React alkalmazást.

npx create-react-app react-auth-firebase

Keresse meg a mappát, és indítsa el az alkalmazást.

cd react-auth-firebase
npm futás indítása

Felhasználók hitelesítése Firebase-funkciókkal

A Firebase használata előtt telepítse.

npm és Firebase

Hozzon létre egy új fájlt, firebase.js, és inicializálja a Firebase-t.

import { inicializeApp } a "firebase/app" alkalmazásból;
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 projektazonosító: ,
 tárolási vödör: ,
 messagingSenderId: ,
 appId: 
};
// A Firebase inicializálása
const app = inicializálási alkalmazás (firebaseConfig);

Használja az alkalmazás regisztrálásakor másolt konfigurációs objektumot.

Ezután importálja a használni kívánt Firebase-modulokat.

import {
 getAuth,
 CreateUserWithEmailAndPassword,
 bejelentkezés e-mail címmel és jelszóval,
 kijelentkezés,
} from "firebase/auth";
import { getFirestore, addDoc, collection } from "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Nak nek hitelesítse a felhasználókat, három függvényt kell létrehoznia: regisztráció, bejelentkezés és kijelentkezés.

Az regisztrálj funkció továbbítja az e-mailt és a jelszót createUserWithEmailAndPassword új felhasználó regisztrálásához. createUserWithEmailAndPassword visszaadja azokat a felhasználói adatokat, amelyeket új felhasználói rekord létrehozásához fog használni az adatbázisban.

const signUp = async (e-mail, jelszó) => {
 próbálja meg {
 const userCredential = várja a createUserWithEmailAndPassword(
 auth,
 email,
 Jelszó
 );
 const user = userCredential.user;
 várja addDoc (gyűjtemény (db, "felhasználók"), {
 uid: user.uid,
 email: user.email,
 });
 igaznak adja vissza
 } fogás (hiba) {
 return {error: error.message}
 }
};

Vegye figyelembe, hogy a regisztráció előtt nem ellenőrzi, hogy az e-mail használatban van-e, mert a Firebase kezeli ezt Ön helyett.

Következő, a Bejelentkezés függvény adja át az e-mailt és a jelszót a bejelentkezniE-maillelÉsJelszóval funkció regisztrált felhasználó bejelentkezéséhez.

const signIn = async (e-mail, jelszó) => {
 próbálja meg {
 const userCredential = bejelentkezésre várvaEmailAndPassword(
 auth,
 email,
 Jelszó
 );
 const user = userCredential.user;
 igaznak adja vissza
 } fogás (hiba) {
 return {error: error.message}
 }
};

A feliratkozás és a kijelentkezés függvény egyaránt igazat ad vissza, ha sikeres, és hibaüzenetet, ha hiba történik.

A kijelentkezési funkció meglehetősen egyszerű. Úgy hívja a kijelentkezés() funkciót a Firebase-ből.

const signOut = async() => {
 próbálja meg {
 kijelentkezésre vár (auth)
 igaznak adja vissza
 } fogás (hiba) {
 vissza hamis
 }
};

Reagálási űrlapok létrehozása

A bejelentkezési és regisztrációs űrlapok összegyűjtik a felhasználó e-mail-címét és jelszavát.

Hozzon létre egy új összetevőt Signup.js és adja hozzá a következőket.

import { useState } from "react";
import { Link } in "react-router-dom";
import { signUp } from "./firebase";
const Regisztráció = () => {
 const [e-mail, setEmail] = useState("");
 const [jelszó, setPassword] = useState("");
 const [hiba, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (jelszó !== jelszó2) {
 seterror("A jelszavak nem egyeznek");
 } más {
 setEmail("");
 állítson be jelszót("");
 const res = regisztrációra vár (e-mail, jelszó);
 if (res.error) seterror (res.error)
 }
 };
 Visszatérés (
 <>
Regisztrálj



 {hiba? 
{hiba}
: nulla}


 type="email"
 name="email"
 érték={e-mail}
 placeholder="Az Ön e-mailje"
 kívánt
 onChange={(e) => setEmail (e.target.value)}
 />
 type="jelszó"
 name="jelszó"
 érték={jelszó}
 placeholder="Az Ön jelszava"
 kívánt
 onChange={(e) => setPassword (e.target.value)}
 />
Beküldés




 Már regisztrált? Belépés





 );
};
export alapértelmezett Regisztráció;

Itt létrehoz egy regisztrációs űrlapot, és nyomon követi az e-mail-címet és a jelszót az állapot használatával. Miután elküldte az űrlapot, a onSubmit esemény váltja ki a handleSubmit() függvény, amely meghívja a regisztrálj() funkciótól firebase.js. Ha a függvény hibát ad vissza, frissítse a hibaállapotot, és jelenítse meg a hibaüzenetet.

A bejelentkezési űrlaphoz hozzon létre Signin.js és adja hozzá a következőket.

import { useState } from "react";
import { bejelentkezés } innen: "./firebase";
const Bejelentkezés = () => {
 const [e-mail, setEmail] = useState("");
 const [jelszó, setPassword] = useState("");
 const [hiba, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 állítson be jelszót("");
 const res = bejelentkezésre vár (e-mail, jelszó);
 if (res.error) seterror (res.error);
 };
 Visszatérés (
 <>
 {hiba? 
{hiba}
: nulla}


 type="text"
 name="email"
 érték={e-mail}
 placeholder="Az Ön e-mailje"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="jelszó"
 name="jelszó"
 érték={jelszó}
 placeholder="Az Ön jelszava"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
alapértelmezett exportálás Bejelentkezés;

A bejelentkezési űrlap nagyon hasonló a regisztrációs oldalhoz, kivéve, hogy a benyújtás a Bejelentkezés() funkció.

Végül hozza létre a Profil oldalt. Az alkalmazás erre az oldalra irányítja át a felhasználókat a sikeres hitelesítés után.

Teremt Profil.js és adja hozzá a következőket.

import { signOut } from "./firebase";
const Profil = () => {
 const handleLogout = async () => {
 kijelentkezésre vár();
 };
 Visszatérés (
 <>
Profil

Kijelentkezés
 );
};
alapértelmezett profil exportálása;

Ebben az összetevőben van a Profil címsor és a kijelentkezés gomb. Az kattintásra a gombon lévő kezelő kiváltja a handleLogout funkció, amely kijelentkezi a felhasználót.

Hozzon létre hitelesítési útvonalakat

A létrehozott oldalak böngészőnek való kiszolgálásához állítsa be az react-router-dom.

Telepítés react-router-dom:

npm i react-router-dom

Ban ben index.js, Beállítás react-router-dom:

import React from "react";
importálja a ReactDOM-ot a "react-dom"-ból;
import { BrowserRouter, Routes, Route } from "react-router-dom";
alkalmazás importálása a "./App" alkalmazásból;
import bejelentkezés a "./Login"-ből;
Import Profile from "./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Eddig a pontig az alkalmazás képes regisztrálni, regisztrálni és kijelentkezni. Tehát honnan tudja, hogy egy felhasználó bejelentkezett-e vagy sem?

Az oktatóanyag következő részében látni fogja, hogyan használhatja a React környezetet a felhasználó hitelesítési állapotának nyomon követésére az alkalmazásban.

A hitelesítés kezelése a React Context API-val

A React Context egy állapotkezelő eszköz, amely leegyszerűsíti az alkalmazások közötti adatmegosztást. Ez egy jobb alternatíva a támasztófúráshoz, ahol az adatok átadják a fát a szülőről a gyermekre, amíg el nem érik azt az összetevőt, amelyiknek szüksége van rá.

Hitelesítési kontextus létrehozása

Ban,-ben src mappa, add AuthContext.js fájlba, majd létrehozni és exportálni AuthContext.

import { createContext } from "react";
const AuthContext = createContext();
alapértelmezett AuthContext exportálása;

Ezután hozza létre a szolgáltatót AuthProvider.js. Lehetővé teszi az összetevők használatát AuthContext.

import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useState, useEffect } from 'react';
AuthContext importálása innen: "./AuthContext"
const auth = getAuth()
export const AuthProvider = ({ children }) => {
 const [felhasználó, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (felhasználó)
 })
 }, []);
Visszatérés (
{gyermekek}
 );
 };

Itt a felhasználói értéket kapja meg a onAuthStateChanged() módszer a Firebase-től. Ez a metódus felhasználói objektumot ad vissza, ha hitelesíti a felhasználót, és nullát, ha nem. Használatával a useEffect() hook, a felhasználói érték minden alkalommal frissül, amikor a hitelesítési állapot megváltozik.

Ban ben index.js, tekerje be az útvonalakat AuthProvider annak biztosítása érdekében, hogy az összes összetevő hozzáférjen a felhasználóhoz a következő összefüggésben:

import { AuthProvider } innen: "./AuthProvider";
ReactDOM.render(




} />
} />
} />



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

Hozzon létre védett útvonalakat

Nak nek védje az érzékeny útvonalakat, ellenőrizze annak a felhasználónak a hitelesítési állapotát, aki egy védett oldalra, például a profiloldalra próbál navigálni.

Módosít Profil.js átirányítani a felhasználót, ha nincs hitelesítve.

import { useContext } from "react";
importálni AuthContextet a "./AuthContext"-ből;
import { useNavigate, Navigate } from "react-router-dom";
import { signOut } from "./firebase";
const Profil = () => {
 const { user } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = async () => {
 kijelentkezésre vár();
 };
 if (!felhasználó) {
 Visszatérés ;
 }
 Visszatérés (
 <>
Profil

Kijelentkezés
 );
};
alapértelmezett profil exportálása;

Az alkalmazás feltételesen rendereli a profiloldalt úgy, hogy a felhasználót a bejelentkezési oldalra irányítja, ha nincs hitelesítve.

Továbblépés a Firebase hitelesítéssel

Ebben az oktatóanyagban a Firebase segítségével hitelesítette a felhasználókat e-mail-címük és jelszavaik használatával. Felhasználói rekordokat is hozott létre a Firestore-ban. A Firebase funkciókat biztosít az olyan hitelesítési szolgáltatókkal való együttműködéshez, mint a Google, a Facebook és a Twitter.

10 React bevált gyakorlat, amelyet követned kell 2022-ben

Olvassa el a következőt

A szerzőről