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.
- Pojdite na Konzola Firebase in kliknite Ustvarite projekt.
- Dajte svojemu projektu ime in kliknite ustvariti za začetek postopka.
- Kliknite na spletu ikona (
- Dajte aplikaciji ime po svoji izbiri in kliknite Registrirajte aplikacijo. Ni vam treba omogočiti gostovanja Firebase.
- 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č}
ž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č}
);
};
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
);
};
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
);
};
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
Povezane teme
- Programiranje
- Reagirajte
- Programiranje
- JavaScript
O avtorju
Mary Gathoni je razvijalka programske opreme s strastjo do ustvarjanja tehničnih vsebin, ki niso le informativne, ampak tudi privlačne. Ko ne kodira ali piše, uživa v druženju s prijatelji in na prostem.
Naročite se na naše novice
Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e-knjige in ekskluzivne ponudbe!
Kliknite tukaj, da se naročite
