„Firebase“ teikia autentifikavimo paslaugas, kurios leidžia lengvai registruotis ir prisijungti naudotojus. Galite naudoti el. pašto adresą, slaptažodžius, telefono numerius ir tapatybės teikėjus, pvz., „Google“ ir „Facebook“.

Šioje mokymo programoje sužinosite, kaip galite naudoti „Firebase“ autentifikavimą sistemoje „React“, kad autentifikuotų vartotojus naudodami el. pašto adresą ir slaptažodį. Vartotojo duomenis, surinktus „Firestore“, „NoSQL“ debesies duomenų bazėje, saugosite ir iš „Firebase“.

Atminkite, kad šioje mokymo programoje naudojama „Firebase v9“ ir „React Router v6“.

Sukurkite „Firebase“ programą

Norėdami prijungti programą prie Firebase, užregistruokite programą „Firebase“, kad gautumėte konfigūracijos objektą. Būtent tai naudosite „Firebase“ inicijavimui React programoje.

Norėdami sukurti „Firebase“ programą, atlikite šiuos veiksmus.

1. Eikite į „Firebase“ konsolė ir spustelėkite Sukurti projektą.
2. Suteikite savo projektui pavadinimą ir spustelėkite sukurti kad pradėtumėte procesą.
instagram viewer
3. Spustelėkite ant Žiniatinklis piktograma (
4. Suteikite programai pasirinktą pavadinimą ir spustelėkite Registruokis programėlę. Jums nereikia įjungti „Firebase“ prieglobos.
5. Nukopijuokite žemiau esantį konfigūracijos objektą Pridėti „Firebase“ SDK.

Sukurkite „React“ programą

Naudokite kurti-reaguoti-programėlę norėdami pastatyti React programėlę.

npx create-react-app react-auth-firebase

Eikite į aplanką ir paleiskite programą.

cd react-auth-firebase
npm paleisties pradžia

Autentifikuokite naudotojus naudodami „Firebase“ funkcijas

Prieš naudodami „Firebase“, įdiekite ją.

npm ir firebase

Sukurti naują failą, firebase.js, ir inicijuokite „Firebase“.

importuoti { inicializuoti programą } iš „firebase/app“;
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 projekto ID: ,
 saugojimo kibiras: ,
 MessagingSenderId: ,
 appId: 
};
// Inicijuoti „Firebase“.
const app = inicializuotiApp (firebaseConfig);

Naudokite konfigūracijos objektą, kurį nukopijavote registruodami programą.

Tada importuokite „Firebase“ modulius, kuriuos naudosite.

importuoti {
 getAuth,
 sukurti vartotoją su el. paštu ir slaptažodžiu,
 prisiregistruoti el. paštu ir slaptažodžiu,
 Atsijungti,
} iš "firebase/auth";
importuoti { getFirestore, addDoc, collection } iš "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Į autentifikuoti vartotojus, turite sukurti tris funkcijas: prisiregistravimo, prisijungimo ir išregistravimo.

The Registruotis funkcija perduoda el. paštą ir slaptažodį CreateUserWithEmailAndPassword užregistruoti naują vartotoją. CreateUserWithEmailAndPassword grąžina vartotojo duomenis, kuriuos naudosite kurdami naują vartotojo įrašą duomenų bazėje.

const signUp = async (el. paštas, slaptažodis) => {
 bandyti {
 const userCredential = laukti createUserWithEmailAndPassword(
 auth,
 paštas,
 Slaptažodis
 );
 const user = userCredential.user;
 laukti addDoc (kolekcija (db, "vartotojai"), {
 uid: user.uid,
 paštas: user.email,
 });
 grąžinti tiesa
 } sugauti (klaida) {
 grąžinti {error: error.message}
 }
};

Atminkite, kad prieš registraciją netikrinate, ar el. paštas jau naudojamas, nes „Firebase“ tai tvarko už jus.

Toliau, į Prisijungti funkcija perduoti el. pašto adresą ir slaptažodį prisiregistruoti El.paštuIrSlaptažodžiu funkcija prisijungti prie registruoto vartotojo.

const signIn = async (el. paštas, slaptažodis) => {
 bandyti {
 const userCredential = laukti signInWithEmailAndPassword(
 auth,
 paštas,
 Slaptažodis
 );
 const user = userCredential.user;
 grąžinti tiesa
 } sugauti (klaida) {
 grąžinti {error: error.message}
 }
};

Tiek prisiregistravimo, tiek atsijungimo funkcijos grąžina teisingą, jei pavyks, ir klaidos pranešimą, jei įvyksta klaida.

Išsiregistravimo funkcija yra gana paprasta. Tai vadina Atsijungti() funkcija iš „Firebase“.

const signOut = async() => {
 bandyti {
 laukti atsijungimo (auth)
 grąžinti tiesa
 } sugauti (klaida) {
 grąžinti klaidingą
 }
};

Sukurkite reakcijos formas

Prisijungimo ir prisiregistravimo formose bus renkamas vartotojo el. paštas ir slaptažodis.

Sukurkite naują komponentą Registracija.js ir pridėkite toliau nurodytus dalykus.

importuoti { useState } iš "react";
importuoti { Link } iš "react-router-dom";
importuoti { registraciją } iš "./firebase";
const Registracija = () => {
 const [el. paštas, setEmail] = useState("");
 const [slaptažodis, setPassword] = useState("");
 const [klaida, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (slaptažodis !== slaptažodis2) {
 seterror ("Slaptažodžiai nesutampa");
 } Kitas {
 setEmail("");
 nustatyti slaptažodį("");
 const res = laukti registracijos (el. paštas, slaptažodis);
 if (res.error) seterror (res.error)
 }
 };
 grįžti (
 <>
Registruotis



 {klaida? 
{error}
: null}


 type="el.paštas"
 name="el.paštas"
 value={email}
 placeholder="Jūsų el. paštas"
 reikalaujama
 onChange={(e) => setEmail (e.target.value)}
 />
 type="slaptažodis"
 vardas = slaptažodis
 value={password}
 placeholder="Jūsų slaptažodis"
 reikalaujama
 onChange={(e) => setPassword (e.target.value)}
 />
Pateikti




 jau užregistruotas? Prisijungti





 );
};
eksportuoti numatytąją registraciją;

Čia kuriate registracijos formą ir stebite el. pašto adresą bei slaptažodį naudodami būseną. Kai pateiksite formą, onSubmit įvykis sukelia handleSubmit() funkcija, kuri iškviečia Registruotis() funkcija nuo firebase.js. Jei funkcija grąžina klaidą, atnaujinkite klaidos būseną ir parodykite klaidos pranešimą.

Norėdami gauti prisijungimo formą, sukurkite Signin.js ir pridėkite toliau nurodytus dalykus.

importuoti { useState } iš "react";
importuoti { signIn } iš "./firebase";
const Prisijungti = () => {
 const [el. paštas, setEmail] = useState("");
 const [slaptažodis, setPassword] = useState("");
 const [klaida, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 nustatyti slaptažodį("");
 const res = laukti prisijungimo (el. paštas, slaptažodis);
 if (res.error) seterror (res.error);
 };
 grįžti (
 <>
 {klaida? 
{error}
: null}


 type="tekstas"
 name="el.paštas"
 value={email}
 placeholder="Jūsų el. paštas"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="slaptažodis"
 vardas = slaptažodis
 value={password}
 placeholder="Jūsų slaptažodis"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
eksportuoti numatytąjį Prisijungimas;

Prisijungimo forma yra gana panaši į registracijos puslapį, išskyrus tai, kad pateikimas iškviečiamas Prisijungti() funkcija.

Galiausiai sukurkite profilio puslapį. Tai puslapis, į kurį programa nukreips naudotojus po sėkmingo autentifikavimo.

Sukurti Profile.js ir pridėkite toliau nurodytus dalykus.

importuoti { signOut } iš "./firebase";
const profilis = () => {
 const handleLogout = async () => {
 laukti išėjimo();
 };
 grįžti (
 <>
Profilis

Atsijungti
 );
};
eksportuoti numatytąjį profilį;

Šiame komponente turite profilio antraštę ir atsijungimo mygtuką. The paspaudus mygtuko valdiklis suaktyvina rankenaAtsijungti funkcija, kuri atjungia vartotoją.

Sukurkite autentifikavimo maršrutus

Norėdami pateikti sukurtus puslapius naršyklėje, nustatykite react-router-dom.

Diegti react-router-dom:

npm i react-router-dom

Į index.js, konfigūruoti react-router-dom:

importuoti React iš "reaguoti";
importuoti ReactDOM iš „react-dom“;
importuoti { BrowserRouter, Routes, Route } iš "react-router-dom";
importuoti programą iš „./App“;
importuoti prisijungimą iš "./Login";
importuoti profilį iš "./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Iki šiol programa gali užregistruoti vartotoją, prisiregistruoti ir atsijungti. Taigi, kaip sužinoti, ar vartotojas yra prisijungęs, ar ne?

Kitame šios mokymo programos skyriuje pamatysite, kaip galite naudoti React kontekstą, kad galėtumėte stebėti vartotojo autentifikavimo būseną visoje programoje.

Tvarkykite autentifikavimą naudodami „React Context“ API

„React Context“ yra būsenos valdymo įrankis, kuris supaprastina duomenų bendrinimą įvairiose programose. Tai geresnė alternatyva gręžimui, kai duomenys perduodami medį iš tėvų vaikui, kol pasiekia komponentą, kuriam to reikia.

Sukurkite autentifikavimo kontekstą

Viduje src aplanką, pridėti AuthContext.js failą ir sukurti bei eksportuoti AuthContext.

importuoti { createContext } iš "react";
const AuthContext = createContext();
eksportuoti numatytąjį AuthContext;

Tada sukurkite teikėją AuthProvider.js. Tai leis naudoti komponentus AuthContext.

importuoti { getAuth, onAuthStateChanged } iš „firebase/auth“;
importuoti { useState, useEffect } iš 'react';
importuoti „AuthContext“ iš „./AuthContext“
const auth = getAuth()
export const AuthProvider = ({ vaikai }) => {
 const [vartotojas, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (vartotojas)
 })
 }, []);
grįžti (
{vaikai}
 );
 };

Čia jūs gaunate vartotojo vertę naudodami onAuthStateChanged() metodas iš Firebase. Šis metodas grąžina vartotojo objektą, jei jis autentifikuoja vartotoją, ir nulinį, jei negali. Naudodami useEffect() kabliukas, vartotojo reikšmė atnaujinama kiekvieną kartą, kai pasikeičia autentifikavimo būsena.

Į index.js, apvyniokite maršrutus AuthProvider užtikrinti, kad visi komponentai pasiektų vartotoją kontekste:

importuoti { AuthProvider } iš "./AuthProvider";
ReactDOM.render(




} />
} />
} />



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

Sukurkite apsaugotus maršrutus

Į apsaugoti jautrius maršrutus, patikrinkite vartotojo, bandančio pereiti į apsaugotą puslapį, pvz., profilio puslapį, autentifikavimo būseną.

Modifikuoti Profile.js peradresuoti vartotoją, jei jis nėra autentifikuotas.

importuoti { useContext } iš "react";
importuoti AuthContext iš "./AuthContext";
importuoti { useNavigate, Navigate } iš "react-router-dom";
importuoti { signOut } iš "./firebase";
const profilis = () => {
 const { user } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = async () => {
 laukti išėjimo();
 };
 if (!user) {
 grąžinti ;
 }
 grįžti (
 <>
Profilis

Atsijungti
 );
};
eksportuoti numatytąjį profilį;

Programėlė sąlyginai pateikia profilio puslapį, nukreipiant vartotoją į prisijungimo puslapį, jei jis nėra autentifikuotas.

Toliau naudojant „Firebase“ autentifikavimą

Šioje mokymo programoje naudojote „Firebase“ naudotojams autentifikuoti naudodami jų el. pašto adresą ir slaptažodį. Taip pat sukūrėte vartotojo įrašus „Firestore“. „Firebase“ teikia funkcijas, skirtas dirbti su autentifikavimo teikėjais, tokiais kaip „Google“, „Facebook“ ir „Twitter“.

10 Reagavimo geriausių praktikų, kurių reikia laikytis 2022 m

Skaitykite toliau

Apie autorių