Firebase nodrošina autentifikācijas pakalpojumus, kas ļauj ērti reģistrēt un pierakstīties lietotājus. Varat izmantot e-pastu, paroles, tālruņu numurus un identitātes nodrošinātājus, piemēram, Google un Facebook.
Šajā apmācībā jūs uzzināsit, kā pakalpojumā React izmantot Firebase autentifikāciju, lai autentificētu lietotājus, izmantojot e-pastu un paroli. Jūs glabāsiet lietotāja datus, kas savākti Firestore, NoSQL mākoņa datu bāzē, arī no Firebase.
Ņemiet vērā, ka šajā apmācībā tiek izmantota Firebase v9 un React Router v6.
Izveidojiet Firebase lietojumprogrammu
Lai savienotu savu lietojumprogrammu ar Firebase, reģistrējiet savu lietotni pakalpojumā Firebase, lai iegūtu konfigurācijas objektu. To izmantosit, lai inicializētu Firebase savā React lietojumprogrammā.
Lai izveidotu Firebase lietojumprogrammu, veiciet tālāk norādītās darbības.
- Dodieties uz Firebase konsole un noklikšķiniet Izveidojiet projektu.
- Piešķiriet savam projektam nosaukumu un noklikšķiniet izveidot lai sāktu procesu.
- Noklikšķiniet uz Web ikona (
- Piešķiriet savai lietotnei pēc savas izvēles nosaukumu un noklikšķiniet uz Reģistrēt lietotni. Jums nav jāiespējo Firebase mitināšana.
- Kopējiet konfigurācijas objektu zem Pievienojiet Firebase SDK.
Izveidojiet React lietojumprogrammu
Izmantot izveidot-reaģēt-lietotni lai uzliktu React lietotni.
npx create-react-app react-auth-firebase
Pārejiet uz mapi un palaidiet lietojumprogrammu.
cd react-auth-firebase
npm palaišanas sākums
Autentificējiet lietotājus, izmantojot Firebase funkcijas
Pirms Firebase lietošanas instalējiet to.
npm i Firebase
Izveidojiet jaunu failu, firebase.js, un inicializējiet Firebase.
importēt {inicializeApp} no "firebase/app";
const firebaseConfig = {
apiKey: ,
authDomain: ,
projekta ID: ,
uzglabāšanas kauss: ,
messagingSenderId: ,
appId:
};
// Inicializēt Firebase
const app = inicializētApp (firebaseConfig);
Izmantojiet konfigurācijas objektu, ko nokopējāt, reģistrējot lietotni.
Pēc tam importējiet izmantotos Firebase moduļus.
importēt {
getAuth,
izveidot lietotāju ar e-pastu un paroli,
pierakstīties ar e-pastu un paroli,
izrakstīties,
} no "firebase/auth";
importēt { getFirestore, addDoc, collection } no "firebase/firestore";
const db = getFirestore();
const auth = getAuth();Uz autentificēt lietotājus, jums ir jāizveido trīs funkcijas: pierakstīšanās, pierakstīšanās un izrakstīšanās.
The Pierakstīties funkcija nodod e-pastu un paroli CreateUserWithEmailAndPassword lai reģistrētu jaunu lietotāju. CreateUserWithEmailAndPassword atgriež lietotāja datus, kurus izmantosit, lai izveidotu jaunu lietotāja ierakstu datu bāzē.
const signUp = async (e-pasts, parole) => {
mēģināt {
const userCredential = gaidīt createUserWithEmailAndPassword(
Auth,
e-pasts,
parole
);
const lietotājs = userCredential.user;
gaidīt addDoc (kolekcija (db, "lietotāji"), {
uid: user.uid,
e-pasts: lietotājs.e-pasts,
});
atgriezt patiesu
} nozveja (kļūda) {
atgriezt {error: error.message}
}
};
Ņemiet vērā, ka pirms reģistrācijas jūs nepārbaudāt, vai e-pasta adrese jau tiek izmantota, jo Firebase to apstrādā jūsu vietā.
Tālāk, sadaļā ielogoties funkcija nodod e-pastu un paroli pierakstītiesArEmailUnParoli funkcija, lai pierakstītos reģistrētam lietotājam.
const signIn = async (e-pasts, parole) => {
mēģināt {
const userCredential = gaidīt pierakstīšanosArEmailAndPassword(
Auth,
e-pasts,
parole
);
const lietotājs = userCredential.user;
atgriezt patiesu
} nozveja (kļūda) {
atgriezt {error: error.message}
}
};
Gan reģistrēšanās, gan izrakstīšanās funkcija atgriež patieso vērtību, ja tā ir veiksmīga, un kļūdas ziņojumu, ja rodas kļūda.
Izrakstīšanās funkcija ir diezgan vienkārša. To sauc par izrakstīties() funkciju no Firebase.
const signOut = async() => {
mēģināt {
gaidu izrakstīšanos (auth)
atgriezt patiesu
} nozveja (kļūda) {
atgriezt nepatiesu
}
};
Izveidojiet reakcijas veidlapas
Pierakstīšanās un reģistrēšanās veidlapas no lietotāja iegūs e-pastu un paroli.
Izveidojiet jaunu komponentu Signup.js un pievienojiet tālāk norādīto.
importēt { useState } no "react";
importēt { Link } no "react-router-dom";
importēt { pierakstīšanās } no "./firebase";
const Reģistrēšanās = () => {
const [e-pasts, setEmail] = useState("");
const [parole, setPassword] = useState("");
const [kļūda, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
if (parole !== parole2) {
seterror ("Paroles nesakrīt");
} cits {
setEmail("");
uzstādīt paroli("");
const res = gaidiet reģistrēšanos (e-pasts, parole);
if (res.error) seterror (res.error)
}
};
atgriezties (
<>
Pierakstīties
{kļūda? {error}: null}
jau ir reģistrēta? Pieslēgties
);
};
eksportēt noklusējuma reģistrāciju;
Šeit jūs veidojat pierakstīšanās veidlapu un sekojat e-pasta adresei un parolei, izmantojot stāvokli. Kad esat iesniedzis veidlapu, onSubmit notikums aktivizē HandSubmit() funkcija, kas izsauc Pierakstīties() funkcija no firebase.js. Ja funkcija atgriež kļūdu, atjauniniet kļūdas stāvokli un parādiet kļūdas ziņojumu.
Pierakstīšanās veidlapai izveidojiet Signin.js un pievienojiet tālāk norādīto.
importēt { useState } no "react";
importēt {signIn} no "./firebase";
const Pieteikšanās = () => {
const [e-pasts, setEmail] = useState("");
const [parole, setPassword] = useState("");
const [kļūda, seterror] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
setEmail("");
uzstādīt paroli("");
const res = gaidiet pierakstīšanos (e-pasts, parole);
if (res.error) seterror (res.error);
};
atgriezties (
<>
{kļūda? {error}: null}
);
};
eksportēt noklusējuma Pieteikšanās;
Pierakstīšanās veidlapa ir diezgan līdzīga reģistrēšanās lapai, izņemot to, ka iesniegšana izsauc ielogoties() funkcija.
Visbeidzot, izveidojiet profila lapu. Šī ir lapa, uz kuru lietotne novirzīs lietotājus pēc veiksmīgas autentifikācijas.
Izveidot Profils.js un pievienojiet tālāk norādīto.
importēt {signOut} no "./firebase";
const Profils = () => {
const handleLogout = async () => {
gaidiet izrakstīšanos();
};
atgriezties (
<>
Profils
);
};
eksportēt noklusējuma profilu;
Šajā komponentā jums ir profila virsraksts un atteikšanās poga. The onClick apdarinātājs uz pogas aktivizē rokturisIziet funkcija, kas izraksta lietotāju.
Izveidojiet autentifikācijas maršrutus
Lai jūsu izveidotās lapas apkalpotu pārlūkprogrammā, iestatiet react-router-dom.
Uzstādīt reaģēt-router-dom:
npm i react-router-dom
In index.js, konfigurēt reaģēt-router-dom:
importēt React no "reaģēt";
importēt ReactDOM no "react-dom";
importēt { BrowserRouter, Routes, Route } no "react-router-dom";
importēt lietotni no "./App";
importēt Login no "./Login";
importēt profilu no "./Profile";
ReactDOM.render(
} />
} />
} />
document.getElementById("sakne")
);
Līdz šim brīdim lietojumprogramma var reģistrēt lietotāju, reģistrēties un izrakstīties. Tātad, kā zināt, vai lietotājs ir pieteicies vai nav?
Nākamajā šīs apmācības sadaļā jūs redzēsit, kā varat izmantot React kontekstu, lai sekotu līdzi lietotāja autentifikācijas statusam visā lietojumprogrammā.
Pārvaldiet autentifikāciju, izmantojot React Context API
React Context ir stāvokļa pārvaldības rīks, kas vienkāršo datu koplietošanu dažādās lietotnēs. Tā ir labāka alternatīva balsta urbšanai, kad dati tiek nodoti kokā no vecākiem bērnam, līdz tie sasniedz komponentu, kuram tie ir nepieciešami.
Izveidojiet autentifikācijas kontekstu
Iekš src mapi, pievienot AuthContext.js failu un izveidot un eksportēt AuthContext.
importēt { CreateContext } no "react";
const AuthContext = createContext();
eksportēt noklusējuma AuthContext;
Pēc tam izveidojiet pakalpojumu sniedzēju AuthProvider.js. Tas ļaus izmantot komponentus AuthContext.
importēt { getAuth, onAuthStateChanged } no "firebase/auth";
importēt { useState, useEffect } no 'react';
importēt AuthContext no './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ bērni }) => {
const [lietotājs, setUser] = useState (null);
useEffect(() => {
onAuthStateChanged (auth,(user) => {
setUser (lietotājs)
})
}, []);
atgriezties ({bērni}
);
};
Šeit jūs iegūstat lietotāja vērtību, izmantojot onAuthStateChanged() metode no Firebase. Šī metode atgriež lietotāja objektu, ja tas autentificē lietotāju, un nulles objektu, ja tas nevar. Izmantojot useEffect() āķis, lietotāja vērtība tiek atjaunināta katru reizi, kad mainās autentifikācijas statuss.
In index.js, aptiniet maršrutus ar AuthProvider lai nodrošinātu visu komponentu piekļuvi lietotājam kontekstā:
importēt {AuthProvider} no "./AuthProvider";
ReactDOM.render(
} />
} />
} />
,
document.getElementById("sakne")
);
Izveidojiet aizsargātus maršrutus
Uz aizsargāt jutīgus maršrutus, pārbaudiet tā lietotāja autentifikācijas statusu, kurš mēģina pāriet uz aizsargātu lapu, piemēram, profila lapu.
Modificēt Profils.js lai novirzītu lietotāju, ja tas nav autentificēts.
importēt { useContext } no "react";
importēt AuthContext no "./AuthContext";
importēt { useNavigate, Navigate } no "react-router-dom";
importēt {signOut} no "./firebase";
const Profils = () => {
const {lietotājs} = useContext (AuthContext);
const navigate = useNavigate();
const handleLogout = async () => {
gaidiet izrakstīšanos();
};
if (!lietotājs) {
atgriezties ;
}
atgriezties (
<>
Profils
);
};
eksportēt noklusējuma profilu;Lietotne nosacīti renderē profila lapu, novirzot lietotāju uz pieteikšanās lapu, ja viņš nav autentificēts.
Firebase autentifikācijas izmantošana
Šajā apmācībā jūs izmantojāt Firebase, lai autentificētu lietotājus, izmantojot viņu e-pastu un paroli. Jūs arī izveidojāt lietotāju ierakstus pakalpojumā Firestore. Firebase nodrošina funkcijas darbam ar autentifikācijas nodrošinātājiem, piemēram, Google, Facebook un Twitter.
10 Reakcijas paraugprakses, kas jums jāievēro 2022. gadā
Lasiet Tālāk
Saistītās tēmas
- Programmēšana
- Reaģēt
- Programmēšana
- JavaScript
Par autoru
Mary Gathoni ir programmatūras izstrādātāja, kuras aizraušanās ir tāda tehniska satura izveide, kas ir ne tikai informatīvs, bet arī saistošs. Kad viņa nekodē vai neraksta, viņai patīk pavadīt laiku ar draugiem un būt ārā.
Abonējiet mūsu biļetenu
Pievienojieties mūsu biļetenam, lai saņemtu tehniskos padomus, pārskatus, bezmaksas e-grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu