Firebase ponuja storitve preverjanja pristnosti, ki vam omogočajo enostavno registracijo in prijavo uporabnikov. Uporabljate lahko e-pošto, gesla, telefonske številke in ponudnike identitete, kot sta Google in Facebook.

V tej vadnici boste izvedeli, kako lahko uporabite Firebase Authentication v Reactu za preverjanje pristnosti uporabnikov z e-pošto in geslom. Uporabniške podatke, zbrane v Firestore, zbirki podatkov v oblaku NoSQL, boste shranili tudi iz Firebase.

Upoštevajte, da ta vadnica uporablja Firebase v9 in React Router v6.

Ustvarite aplikacijo Firebase

Če želite svojo aplikacijo povezati z Firebase, registrirajte svojo aplikacijo pri Firebase, da dobite konfiguracijski objekt. To boste uporabili za inicializacijo Firebase v aplikaciji React.

Če želite ustvariti aplikacijo Firebase, sledite naslednjim korakom.

1. Pojdite na Konzola Firebase in kliknite Ustvarite projekt.
2. Dajte svojemu projektu ime in kliknite ustvariti za začetek postopka.
3. Kliknite na spletu ikona (
4. Dajte aplikaciji ime po svoji izbiri in kliknite
   instagram viewer
   Registrirajte aplikacijo. Ni vam treba omogočiti gostovanja Firebase.
5. Kopirajte konfiguracijski objekt pod Dodajte Firebase SDK.

Ustvarite aplikacijo React

Uporaba ustvari-reagiraj-aplikacijo za oblikovanje aplikacije React.

npx create-react-app react-auth-firebase

Pomaknite se do mape in zaženite aplikacijo.

cd react-auth-firebase
npm run start

Preverjanje pristnosti uporabnikov s funkcijami Firebase

Pred uporabo Firebase ga namestite.

npm i firebase

Ustvari novo datoteko, firebase.js, in inicializirajte Firebase.

uvoz { initializeApp } iz "firebase/app";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 ID projekta: ,
 vedro za shranjevanje: ,
 MessagingSenderId: ,
 appId: 
};
// Inicializiraj Firebase
const app = inicializeApp (firebaseConfig);

Uporabite konfiguracijski objekt, ki ste ga kopirali, ko ste registrirali aplikacijo.

Nato uvozite module Firebase, ki jih boste uporabljali.

uvozi {
 getAuth,
 createUserWithEmailAndPassword,
 prijava z e-pošto in geslom,
 Odjava,
} iz "firebase/auth";
import { getFirestore, addDoc, collection } iz "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Za avtentikacijo uporabnikov, morate ustvariti tri funkcije: prijava, prijava in odjava.

The prijavi se funkcija posreduje e-pošto in geslo createUserWithEmailAndPassword za registracijo novega uporabnika. createUserWithEmailAndPassword vrne uporabniške podatke, ki jih boste uporabili za ustvarjanje novega uporabniškega zapisa v bazi podatkov.

const signUp = async (e-pošta, geslo) => {
 poskusi {
 const userCredential = čakati createUserWithEmailAndPassword(
 prist,
 E-naslov,
 geslo
 );
 const uporabnik = userCredential.user;
 čakaj addDoc (zbirka (db, "users"), {
 uid: uporabnik.uid,
 e-pošta: user.email,
 });
 vrni res
 } ulov (napaka) {
 vrni {error: error.message}
 }
};

Upoštevajte, da pred registracijo ne preverjate, ali je e-pošta že v uporabi, ker Firebase to obravnava namesto vas.

Naprej, v prijaviti funkcija posreduje e-pošto in geslo na signInWithEmailAndPassword funkcija za prijavo registriranega uporabnika.

const signIn = async (e-pošta, geslo) => {
 poskusi {
 const userCredential = čakaj signInWithEmailAndPassword(
 prist,
 E-naslov,
 geslo
 );
 const uporabnik = userCredential.user;
 vrni res
 } ulov (napaka) {
 vrni {error: error.message}
 }
};

Funkciji prijave in odjava vrneta true, če je uspešna, in sporočilo o napaki, če pride do napake.

Funkcija odjave je precej enostavna. Pokliče Odjava() funkcijo iz Firebase.

const signOut = async() => {
 poskusi {
 čakati na odjavo (avt.)
 vrni res
 } ulov (napaka) {
 vrni false
 }
};

Ustvarite obrazce React

Obrazci za prijavo in prijavo bodo zbrali e-pošto in geslo uporabnika.

Ustvarite novo komponento Signup.js in dodajte naslednje.

import { useState } iz "react";
uvozi { Link } iz "react-router-dom";
uvoz { signUp } iz "./firebase";
const Prijava = () => {
 const [e-pošta, setEmail] = useState("");
 const [geslo, setPassword] = useState("");
 const [napaka, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 če (geslo !== geslo2) {
 seterror("Gesla se ne ujemajo");
 } drugo {
 setEmail("");
 nastavi geslo("");
 const res = čakaj na prijavo (e-pošta, geslo);
 če (res.napaka) seterror (res.error)
 }
 };
 vrnitev (
 <>
Prijavite se



 {napaka? 
{napaka}
: nič}


 type="e-pošta"
 ime="e-pošta"
 vrednost={e-pošta}
 placeholder="Vaš e-pošta"
 zahtevano
 onChange={(e) => setEmail (e.target.value)}
 />
 type="geslo"
 ime="geslo"
 vrednost={geslo}
 placeholder="Vaše geslo"
 zahtevano
 onChange={(e) => setPassword (e.target.value)}
 />
Pošlji




 že registrirano? Vpiši se





 );
};
izvoz privzeta prijava;

Tukaj ustvarite obrazec za prijavo in spremljate e-pošto in geslo z uporabo stanja. Ko oddate obrazec, onSubmit dogodek sproži handleSubmit() funkcijo, ki pokliče prijava() funkcija od firebase.js. Če funkcija vrne napako, posodobite stanje napake in prikažite sporočilo o napaki.

Za obrazec za prijavo ustvarite Signin.js in dodajte naslednje.

import { useState } iz "react";
uvoz { signIn } iz "./firebase";
const Prijava = () => {
 const [e-pošta, setEmail] = useState("");
 const [geslo, setPassword] = useState("");
 const [napaka, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 nastavi geslo("");
 const res = čakaj na prijavo (e-pošta, geslo);
 če (res.napaka) seterror (res.error);
 };
 vrnitev (
 <>
 {napaka? 
{napaka}
: nič}


 type="besedilo"
 ime="e-pošta"
 vrednost={e-pošta}
 placeholder="Vaš e-pošta"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="geslo"
 ime="geslo"
 vrednost={geslo}
 placeholder="Vaše geslo"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
izvoz privzeta prijava;

Obrazec za prijavo je precej podoben strani za prijavo, le da oddaja pokliče prijaviti() funkcijo.

Nazadnje ustvarite stran profila. To je stran, na katero bo aplikacija preusmerila uporabnike po uspešni avtentikaciji.

Ustvari Profile.js in dodajte naslednje.

uvoz { signOut } iz "./firebase";
const profil = () => {
 const handleLogout = async () => {
 čakati na odjavo();
 };
 vrnitev (
 <>
Profil

Odjava
 );
};
izvoz privzetega profila;

V tej komponenti imate naslov Profil in gumb za odjavo. The onClick upravljalnik na gumbu sproži handleLogout funkcija, ki uporabnika odjavi.

Ustvarite poti za preverjanje pristnosti

Za prikazovanje strani, ki ste jih ustvarili v brskalniku, nastavite react-router-dom.

Namestite odziv-usmerjevalnik-dom:

npm i react-router-dom

V index.js, konfigurirati odziv-usmerjevalnik-dom:

uvozi React iz "react";
uvozite ReactDOM iz "react-dom";
uvoz { BrowserRouter, Routes, Route } iz "react-router-dom";
uvozite aplikacijo iz "./App";
uvozi prijavo iz "./Login";
uvozi profil iz "./Profil";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Do te točke lahko aplikacija registrira uporabnika, ga prijavi in ​​odjavi. Kako torej veste, ali je uporabnik prijavljen ali ne?

V naslednjem razdelku te vadnice boste videli, kako lahko uporabite kontekst React za spremljanje statusa preverjanja pristnosti uporabnika v celotni aplikaciji.

Upravljajte avtentikacijo z React Context API

React Context je orodje za upravljanje stanja, ki poenostavlja izmenjavo podatkov med aplikacijami. To je boljša alternativa vrtanju podpornikov, kjer se podatki prenašajo po drevesu od starša do otroka, dokler ne dosežejo komponente, ki jih potrebuje.

Ustvarite kontekst za preverjanje pristnosti

V src mapo, dodaj AuthContext.js datoteko ter ustvarjanje in izvoz AuthContext.

import { createContext } iz "react";
const AuthContext = createContext();
izvoz privzetega AuthContext;

Nato ustvarite ponudnika v AuthProvider.js. To bo omogočilo uporabo komponent AuthContext.

import { getAuth, onAuthStateChanged } iz "firebase/auth";
import { useState, useEffect } iz 'react';
uvozi AuthContext iz './AuthContext'
const auth = getAuth()
izvoz konst AuthProvider = ({ otrok }) => {
 const [user, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (uporabnik)
 })
 }, []);
vrnitev (
{otroci}
 );
 };

Tukaj dobite uporabniško vrednost z uporabo onAuthStateChanged() metoda iz Firebase. Ta metoda vrne uporabniški objekt, če preveri pristnost uporabnika, in nič, če ne more. Z uporabo kavelj useEffect()., se uporabniška vrednost posodobi vsakič, ko se spremeni status preverjanja pristnosti.

V index.js, ovijte poti s AuthProvider zagotoviti, da vse komponente dostopajo do uporabnika v kontekstu:

uvoz { AuthProvider } iz "./AuthProvider";
ReactDOM.render(




} />
} />
} />



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

Ustvarite zaščitene poti

Za zaščititi občutljive poti, preverite stanje preverjanja pristnosti uporabnika, ki se poskuša pomakniti na zaščiteno stran, kot je stran profila.

Spremeni Profile.js za preusmeritev uporabnika, če ni overjen.

import { useContext } iz "react";
uvozite AuthContext iz "./AuthContext";
import { useNavigate, Navigate } iz "react-router-dom";
uvoz { signOut } iz "./firebase";
const profil = () => {
 const { uporabnik } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = async () => {
 čakati na odjavo();
 };
 če (!uporabnik) {
 vrnitev ;
 }
 vrnitev (
 <>
Profil

Odjava
 );
};
izvoz privzetega profila;

Aplikacija pogojno upodablja stran profila tako, da uporabnika preusmeri na stran za prijavo, če ni overjen.

Še naprej s preverjanjem pristnosti Firebase

V tej vadnici ste uporabili Firebase za preverjanje pristnosti uporabnikov z uporabo njihove e-pošte in gesla. Ustvarili ste tudi uporabniške zapise v Firestore. Firebase ponuja funkcije za delo s ponudniki preverjanja pristnosti, kot so Google, Facebook in Twitter.

10 najboljših praks React, ki jih morate upoštevati leta 2022

Preberite Naprej

O avtorju