Firebase pakub autentimisteenuseid, mis võimaldavad hõlpsasti kasutajaid registreerida ja sisse logida. Saate kasutada e-posti, paroole, telefoninumbreid ja identiteedipakkujaid, nagu Google ja Facebook.

Sellest õpetusest saate teada, kuidas kasutada Firebase'i autentimist rakenduses React, et autentida kasutajaid meili ja parooli abil. Kogutud kasutajaandmed salvestate Firestore'i, NoSQL-i pilvandmebaasi ka Firebase'ist.

Pange tähele, et see õpetus kasutab Firebase v9 ja React Router v6.

Looge Firebase'i rakendus

Rakenduse ühendamiseks Firebase, registreerige oma rakendus Firebase'is, et hankida konfiguratsiooniobjekt. Seda kasutate Firebase'i lähtestamiseks oma Reacti rakenduses.

Firebase'i rakenduse loomiseks järgige järgmisi samme.

1. Suunduge poole Firebase'i konsool ja klõpsake Loo projekt.
2. Andke oma projektile nimi ja klõpsake luua protsessi alustamiseks.
3. Klõpsake nuppu võrk ikoon (
4. Andke oma rakendusele enda valitud nimi ja klõpsake Registreeri rakendus. Te ei pea Firebase'i hostimist lubama.
5. Kopeerige all olev konfiguratsiooniobjekt Lisage Firebase'i SDK.

Looge reageerimisrakendus

Kasuta loo-reageeri rakendus Reacti rakenduse tellinguteks.

npx create-react-app react-auth-firebase

Liikuge kausta ja käivitage rakendus.

cd react-auth-firebase
npm jooksu algus

Autentige kasutajaid Firebase'i funktsioonidega

Enne Firebase'i kasutamist installige see.

npm ja firebase

Looge uus fail, firebase.js, ja lähtestada Firebase.

import { inicialiseeritud rakendus } "firebase'ist/rakendusest";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 projekti ID: ,
 ladustamisämber: ,
 messagingSenderId: ,
 appId: 
};
// Firebase'i lähtestamine
const app = InitsialiseeriApp (firebaseConfig);

Kasutage konfiguratsiooniobjekti, mille kopeerisite rakenduse registreerimisel.

Järgmisena importige kasutatavad Firebase'i moodulid.

import {
 getAuth,
 loo kasutaja meili ja parooliga,
 logige sisse e-posti ja parooliga,
 Logi välja,
} alates "firebase/auth";
import { getFirestore, addDoc, collection } from "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

To kasutajate autentimine, peate looma kolm funktsiooni: registreerumine, sisselogimine ja väljalogimine.

The Registreeri funktsioon edastab e-posti aadressi ja parooli CreateUserWithEmailAndPassword uue kasutaja registreerimiseks. CreateUserWithEmailAndPassword tagastab kasutajaandmed, mida kasutate andmebaasis uue kasutajakirje loomiseks.

const signUp = async (e-post, parool) => {
 proovi {
 const userCredential = ootama createUserWithEmailAndPassword(
 auth,
 email,
 parool
 );
 const kasutaja = userCredential.user;
 oota addDoc (kogu (db, "kasutajad"), {
 uid: user.uid,
 email: user.email,
 });
 tagasi tõeseks
 } püüdmine (viga) {
 tagasta {error: error.message}
 }
};

Pange tähele, et te ei kontrolli enne registreerimist, kas e-posti aadress on juba kasutusel, kuna Firebase tegeleb sellega teie eest.

Järgmisena Logi sisse funktsioon edastab e-posti aadressi ja parooli Logi sisseE-postiJaParooliga funktsioon registreeritud kasutaja sisselogimiseks.

const signIn = async (e-post, parool) => {
 proovi {
 const userCredential = ootan sisselogimistE-posti ja parooliga(
 auth,
 email,
 parool
 );
 const kasutaja = userCredential.user;
 tagasi tõeseks
 } püüdmine (viga) {
 tagasta {error: error.message}
 }
};

Nii registreerumis- kui ka väljalogimisfunktsioonid tagastavad õnnestumise korral tõese ja vea ilmnemisel veateate.

Väljalogimisfunktsioon on üsna lihtne. See kutsub Logi välja() funktsioon Firebase'ist.

const signOut = async() => {
 proovi {
 ootan väljalogimist (auth)
 tagasi tõeseks
 } püüdmine (viga) {
 tagasta vale
 }
};

Looge reageerimisvorme

Sisselogimis- ja registreerumisvormid koguvad kasutajalt e-posti aadressi ja parooli.

Looge uus komponent Signup.js ja lisage järgmine.

import { useState } kohast "react";
import { Link } "react-router-dom";
import { registreerumine } saidist "./firebase";
const Registreerumine = () => {
 const [e-post, setEmail] = useState("");
 const [parool, setPassword] = useState("");
 const [viga, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (parool !== parool2) {
 seterror("Paroolid ei ühti");
 } muu {
 setEmail("");
 Määra parool("");
 const res = ootan registreerumist (e-post, parool);
 if (res.error) seterror (res.error)
 }
 };
 tagasi (
 <>
Registreeri



 {viga? 
{error}
: null}


 type="email"
 name="email"
 väärtus={email}
 placeholder="Teie e-post"
 nõutud
 onChange={(e) => setEmail (e.target.value)}
 />
 type="parool"
 name="parool"
 väärtus={parool}
 placeholder="Teie parool"
 nõutud
 onChange={(e) => setPassword (e.target.value)}
 />
Esita




 juba registreeritud? Logi sisse





 );
};
ekspordi vaikeregistreerimine;

Siin loote registreerumisvormi ja jälgite e-posti aadressi ja parooli olekut kasutades. Kui olete vormi esitanud, on Submit sündmus käivitab handleSubmit() funktsioon, mis kutsub Registreeri() funktsioon alates firebase.js. Kui funktsioon tagastab vea, värskendage tõrke olekut ja kuvage tõrketeade.

Sisselogimisvormi jaoks looge Signin.js ja lisage järgmine.

import { useState } kohast "react";
import { loginIn } saidist "./firebase";
const Logi sisse = () => {
 const [e-post, setEmail] = useState("");
 const [parool, setPassword] = useState("");
 const [viga, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 Määra parool("");
 const res = ootan sisselogimist (e-post, parool);
 if (res.error) seterror (res.error);
 };
 tagasi (
 <>
 {viga? 
{error}
: null}


 type="text"
 name="email"
 väärtus={email}
 placeholder="Teie e-post"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="parool"
 name="parool"
 väärtus={parool}
 placeholder="Teie parool"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
ekspordi vaikimisi Logi sisse;

Sisselogimisvorm on üsna sarnane registreerumislehega, välja arvatud see, et esitamine kutsub üles Logi sisse() funktsiooni.

Lõpuks looge profiilileht. See on leht, kuhu rakendus kasutajad pärast edukat autentimist ümber suunab.

Loo Profile.js ja lisage järgmine.

import { signOut } saidist "./firebase";
const Profiil = () => {
 const handleLogout = async () => {
 ootama väljalogimist();
 };
 tagasi (
 <>
Profiil

Logi välja
 );
};
ekspordi vaikeprofiil;

Selles komponendis on profiili pealkiri ja väljalogimisnupp. The onClick nupul olev käitleja käivitab käepideLogi välja funktsioon, mis logib kasutaja välja.

Looge autentimismarsruudid

Loodud lehtede brauseris teenindamiseks seadistage react-ruuter-dom.

Installige reageerida-ruuter-dom:

npm i react-ruuter-dom

sisse index.js, seadistada reageerida-ruuter-dom:

import React alates "react";
importige ReactDOM "react-domist";
import { BrowserRouter, Routes, Route } kataloogist "react-router-dom";
importige rakendus rakendusest "./App";
importida sisselogimine saidist "./Login";
importida profiil saidist "./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("juur")
);

Kuni selle hetkeni saab rakendus kasutaja registreerida, registreerida ja välja logida. Kuidas siis teada saada, kas kasutaja on sisse logitud või mitte?

Selle õpetuse järgmises jaotises näete, kuidas saate Reacti konteksti kasutada, et jälgida kasutaja autentimisolekut kogu rakenduses.

Autentimise haldamine React Context API-ga

React Context on olekuhaldustööriist, mis lihtsustab andmete jagamist rakenduste vahel. See on parem alternatiiv tugipuurimisele, kus andmed edastatakse vanemalt lapsele, kuni need jõuavad komponendini, mis seda vajab.

Looge autentimise kontekst

Aastal src kaust, lisa AuthContext.js faili ning luua ja eksportida AuthContext.

import { createContext } "reactist";
const AuthContext = createContext();
eksportida vaikimisi AuthContext;

Järgmisena looge teenusepakkuja AuthProvider.js. See võimaldab komponente kasutada AuthContext.

import { getAuth, onAuthStateChanged } kohast "firebase/auth";
import { useState, useEffect } alates 'react';
importida AuthContext kohast './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ lapsed }) => {
 const [kasutaja, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (kasutaja)
 })
 }, []);
tagasi (
{lapsed}
 );
 };

Siin saate kasutaja väärtuse, kasutades onAuthStateChanged() meetod Firebase'ilt. See meetod tagastab kasutajaobjekti, kui see kasutaja autentib, ja nulli, kui seda ei saa. Kasutades useEffect() konks, värskendatakse kasutaja väärtust iga kord, kui autentimise olek muutub.

sisse index.js, mähkige marsruudid AuthProvider tagamaks, et kõik komponendid pääsevad kasutajale juurde kontekstis:

importida { AuthProvider } saidist "./AuthProvider";
ReactDOM.render(




} />
} />
} />



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

Looge kaitstud marsruute

To kaitsta tundlikke teid, kontrollige kaitstud lehele (nt profiililehele) navigeerida üritava kasutaja autentimise olekut.

Muutma Profile.js kasutaja ümbersuunamiseks, kui ta pole autentitud.

import { useContext } kohast "react";
importida AuthContext failist "./AuthContext";
import { useNavigate, Navigate } from "react-router-dom";
import { signOut } saidist "./firebase";
const Profiil = () => {
 const { kasutaja } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = async () => {
 ootama väljalogimist();
 };
 if (!kasutaja) {
 tagasi ;
 }
 tagasi (
 <>
Profiil

Logi välja
 );
};
ekspordi vaikeprofiil;

Rakendus tinglikult renderdab profiililehele, suunates kasutaja sisselogimislehele, kui ta pole autentitud.

Firebase'i autentimisega edasiminek

Selles õpetuses kasutasite Firebase'i kasutajate autentimiseks nende e-posti ja parooli abil. Samuti lõite Firestore'is kasutajakirjeid. Firebase pakub funktsioone töötamiseks autentimisteenuse pakkujatega, nagu Google, Facebook ja Twitter.

10 Reaktsiooni parimat tava, mida peate 2022. aastal järgima

Loe edasi

Autori kohta