Firebase tarjoaa todennuspalveluita, joiden avulla voit helposti rekisteröidä ja kirjautua sisään käyttäjiä. Voit käyttää sähköpostia, salasanoja, puhelinnumeroita ja identiteetintarjoajia, kuten Google ja Facebook.

Tässä opetusohjelmassa opit, kuinka voit käyttää Firebase-todennusta Reactissa käyttäjien todentamiseen sähköpostiosoitteen ja salasanan avulla. Tallennat kerätyt käyttäjätiedot Firestoreen, NoSQL-pilvitietokantaan myös Firebasesta.

Huomaa, että tässä opetusohjelmassa käytetään Firebase v9:ää ja React Router v6:ta.

Luo Firebase-sovellus

Voit yhdistää sovelluksesi Firebase, rekisteröi sovelluksesi Firebasessa saadaksesi määritysobjektin. Tätä käytät Firebasen alustamiseen React-sovelluksessasi.

Luo Firebase-sovellus noudattamalla seuraavia ohjeita.

1. Suuntaa kohti Firebase-konsoli ja napsauta Luo projekti.
2. Anna projektillesi nimi ja napsauta luoda aloittaaksesi prosessin.
3. Klikkaa Web kuvake (
4. Anna sovelluksellesi haluamasi nimi ja napsauta Rekisteröi sovellus. Sinun ei tarvitse ottaa Firebase Hosting -palvelua käyttöön.
instagram viewer
5. Kopioi alla oleva konfigurointiobjekti Lisää Firebase SDK.

Luo React-sovellus

Käyttää luo-reagoi-sovellus rakentaaksesi React-sovelluksen.

npx create-react-app react-auth-firebase

Siirry kansioon ja käynnistä sovellus.

cd react-auth-firebase
npm ajon aloitus

Todenna käyttäjät Firebase-toiminnoilla

Asenna se ennen Firebasen käyttöä.

npm Firebase

Luo uusi tiedosto, firebase.js, ja alusta Firebase.

tuoda { alustaaApp } "firebasesta/sovelluksesta";
const firebaseConfig = {
 apiKey: ,
 authDomain: ,
 projektitunnus: ,
 varastosäiliö: ,
 messagingSenderId: ,
 appId: 
};
// Alusta Firebase
const app = alustaaApp (firebaseConfig);

Käytä konfigurointiobjektia, jonka kopioit sovelluksen rekisteröinnin yhteydessä.

Tuo seuraavaksi käyttämäsi Firebase-moduulit.

tuonti {
 getAuth,
 luoKäyttäjäSähköpostillaAndSalasanalla,
 kirjaudu sisäänSähköpostillaJaSalasanalla,
 Kirjaudu ulos,
} from "firebase/auth";
tuonti { getFirestore, addDoc, collection } "firebase/firestore"-tiedostosta;
const db = getFirestore();
const auth = getAuth();

Vastaanottaja todentaa käyttäjät, sinun on luotava kolme toimintoa: kirjautuminen, sisäänkirjautuminen ja uloskirjautuminen.

The Kirjaudu toiminto välittää sähköpostin ja salasanan CreateUserWithEmailAndPassword rekisteröidäksesi uuden käyttäjän. CreateUserWithEmailAndPassword palauttaa käyttäjätiedot, joita käytät uuden käyttäjätietueen luomiseen tietokantaan.

const signUp = async (sähköposti, salasana) => {
 yrittää {
 const userCredential = odota createUserWithEmailAndPassword(
 auth,
 sähköposti,
 Salasana
 );
 const user = userCredential.user;
 odota addDoc (kokoelma (db, "käyttäjät"), {
 uid: user.uid,
 sähköposti: user.email,
 });
 palata tosi
 } saalis (virhe) {
 palauta {error: error.message}
 }
};

Huomaa, että et tarkista, onko sähköposti jo käytössä ennen rekisteröintiä, koska Firebase hoitaa sen puolestasi.

Seuraavaksi vuonna Kirjaudu sisään toiminto välittää sähköpostiosoitteen ja salasanan kirjaudu sisäänSähköpostillaJaSalasanalla toiminto kirjautuaksesi sisään rekisteröityneen käyttäjän.

const signIn = async (sähköposti, salasana) => {
 yrittää {
 const userCredential = odota kirjautumistaSähköpostillaAndPassword(
 auth,
 sähköposti,
 Salasana
 );
 const user = userCredential.user;
 palata tosi
 } saalis (virhe) {
 palauta {error: error.message}
 }
};

Sekä kirjautumis- että uloskirjautumisfunktio palauttavat todellisen, jos onnistuu, ja virheilmoituksen, jos virhe tapahtuu.

Uloskirjautumistoiminto on melko yksinkertainen. Se kutsuu Kirjaudu ulos() toiminto Firebasesta.

const signOut = async() => {
 yrittää {
 odota uloskirjautumista (auth)
 palata tosi
 } saalis (virhe) {
 palauttaa väärin
 }
};

Luo reagointilomakkeita

Kirjautumis- ja kirjautumislomakkeet keräävät sähköpostiosoitteen ja salasanan käyttäjältä.

Luo uusi komponentti Signup.js ja lisää seuraava.

tuo { useState } "react"-kentästä;
tuo { Link } "react-router-dom":sta;
tuo { kirjautuminen } osoitteesta "./firebase";
const Ilmoittautuminen = () => {
 const [sähköposti, setEmail] = useState("");
 const [salasana, setPassword] = useState("");
 const [virhe, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (salasana !== salasana2) {
 seterror("Salasanat eivät täsmää");
 } muu {
 setEmail("");
 aseta salasana("");
 const res = odota kirjautumista (sähköposti, salasana);
 if (res.error) seterror (res.error)
 }
 };
 paluu (
 <>
Kirjaudu



 {virhe? 
{virhe}
: tyhjä}


 type="email"
 name="sähköposti"
 arvo={email}
 placeholder="Sähköpostisi"
 edellytetään
 onChange={(e) => setEmail (e.target.value)}
 />
 type="salasana"
 name="salasana"
 arvo={salasana}
 placeholder="Salasanasi"
 edellytetään
 onChange={(e) => setPassword (e.target.value)}
 />
Lähetä




 jo rekisteröity? Kirjaudu sisään





 );
};
vie oletusarvoinen kirjautuminen;

Täällä luot kirjautumislomakkeen ja pidät kirjaa sähköpostiosoitteesta ja salasanasta tilan avulla. Kun lähetät lomakkeen, onSubmitissa tapahtuma laukaisee handleSubmit() toiminto, joka kutsuu Kirjaudu() toiminto alkaen firebase.js. Jos toiminto palauttaa virheen, päivitä virhetila ja näytä virheilmoitus.

Luo kirjautumislomaketta varten Signin.js ja lisää seuraava.

tuo { useState } "react"-kentästä;
tuo { kirjautuminen } kohteesta "./firebase";
const Kirjaudu = () => {
 const [sähköposti, setEmail] = useState("");
 const [salasana, setPassword] = useState("");
 const [virhe, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 aseta salasana("");
 const res = odota sisäänkirjautumista (sähköpostiosoite, salasana);
 if (res.error) seterror (res.error);
 };
 paluu (
 <>
 {virhe? 
{virhe}
: tyhjä}


 type="teksti"
 name="sähköposti"
 arvo={email}
 placeholder="Sähköpostisi"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="salasana"
 name="salasana"
 arvo={salasana}
 placeholder="Salasanasi"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
Vie oletusarvo Kirjautuminen;

Kirjautumislomake on melko samanlainen kuin kirjautumissivu, paitsi että lähetys kutsuu Kirjaudu sisään() toiminto.

Luo lopuksi Profiilisivu. Tämä on sivu, jolle sovellus ohjaa käyttäjät onnistuneen todennuksen jälkeen.

Luoda Profile.js ja lisää seuraava.

tuo { signOut } osoitteesta "./firebase";
const Profiili = () => {
 const handleLogout = async () => {
 odota uloskirjautumista();
 };
 paluu (
 <>
Profiili

Kirjautua ulos
 );
};
Vie oletusprofiili;

Tässä komponentissa sinulla on Profiili-otsikko ja uloskirjautumispainike. The klikkaamalla painikkeen käsittelijä laukaisee kahvaLogout toiminto, joka kirjaa käyttäjän ulos.

Luo todennusreitit

Jos haluat palvella luomiasi sivuja selaimeen, määritä react-router-dom.

Asentaa react-router-dom:

npm i react-router-dom

Sisään index.js, konfiguroida react-router-dom:

tuonti React from "react";
tuo ReactDOM "react-domista";
tuo { BrowserRouter, Routes, Route } osoitteesta "react-router-dom";
tuo sovellus osoitteesta "./App";
tuo sisäänkirjautuminen osoitteesta "./Login";
tuo profiili osoitteesta "./Profile";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("juuri")
);

Tähän asti sovellus voi rekisteröidä käyttäjän, rekisteröityä ja kirjautua ulos. Mistä sitten tietää, onko käyttäjä kirjautunut sisään vai ei?

Tämän opetusohjelman seuraavassa osassa näet, kuinka voit käyttää React-kontekstia seurataksesi käyttäjän todennustilaa sovelluksessa.

Hallitse todennusta React Context API: lla

React Context on tilanhallintatyökalu, joka yksinkertaistaa tietojen jakamista sovellusten välillä. Se on parempi vaihtoehto potkuriporaukselle, jossa tiedot siirtyvät vanhemmalta lapselle, kunnes ne saavuttavat sitä tarvitsevan komponentin.

Luo todennuskonteksti

Vuonna src kansio, lisää AuthContext.js tiedosto ja luo ja vie AuthContext.

tuo { createContext } "reactista";
const AuthContext = createContext();
vie oletusarvoinen AuthContext;

Luo seuraavaksi palveluntarjoaja sisään AuthProvider.js. Se mahdollistaa komponenttien käytön AuthContext.

tuoda { getAuth, onAuthStateChanged } tiedostosta "firebase/auth";
tuo { useState, useEffect } kentästä 'react';
tuo AuthContext kohteesta './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ lapset }) => {
 const [käyttäjä, setUser] = useState (nolla);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (käyttäjä)
 })
 }, []);
paluu (
{lapset}
 );
 };

Täällä saat käyttäjäarvon käyttämällä onAuthStateChanged() menetelmä Firebasesta. Tämä menetelmä palauttaa käyttäjäobjektin, jos se todentaa käyttäjän, ja nollan, jos se ei pysty. Käyttämällä useEffect()-koukku, käyttäjäarvo päivitetään aina, kun todennustila muuttuu.

Sisään index.js, kääri reitit AuthProvider varmistaaksesi, että kaikki komponentit pääsevät käyttämään käyttäjää tässä yhteydessä:

tuo { AuthProvider } osoitteesta "./AuthProvider";
ReactDOM.render(




} />
} />
} />



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

Luo suojattuja reittejä

Vastaanottaja suojaa herkkiä reittejä, tarkista sellaisen käyttäjän todennustila, joka yrittää navigoida suojatulle sivulle, kuten profiilisivulle.

Muuttaa Profile.js uudelleenohjataksesi käyttäjän, jos häntä ei ole todennettu.

tuo { useContext } "react"-kentästä;
tuo AuthContext tiedostosta "./AuthContext";
tuo { useNavigate, Navigate } kohteesta "react-router-dom";
tuo { signOut } osoitteesta "./firebase";
const Profiili = () => {
 const { user } = useContext (AuthContext);
 const navigate = useNavigate();
 const handleLogout = async () => {
 odota uloskirjautumista();
 };
 if (!user) {
 palata ;
 }
 paluu (
 <>
Profiili

Kirjautua ulos
 );
};
Vie oletusprofiili;

Sovellus ehdollisesti renderöi profiilisivulle ohjaamalla käyttäjän kirjautumissivulle, jos häntä ei ole todennettu.

Jatketaan Firebase-todennuksen avulla

Tässä opetusohjelmassa käytit Firebasea käyttäjien todentamiseen heidän sähköpostiosoitteensa ja salasanansa avulla. Loit myös käyttäjätietueita Firestoressa. Firebase tarjoaa toimintoja todennuspalveluntarjoajien, kuten Googlen, Facebookin ja Twitterin, kanssa työskentelemiseen.

10 Reactin parasta käytäntöä, joita sinun on noudatettava vuonna 2022

Lue Seuraava

Kirjailijasta