Firebase’i sisselogimise loomine ja Reactis registreerumine

Firebase on süsteem, mis pakub arendajatele veebirakenduste loomiseks palju platvorme. Üks rakenduse olulisi elemente on kasutajate loomine ja sisselogimise võimaldamine. Vaatame, kuidas saame kirjutada Firebase’i sisselogimise, mis on täielik, kuid väga lihtne rakendada.

Looge oma Firebase’i rakendus

Esmalt peate looma Firebase’i rakenduse projekti, nii et minge Firebase’i konsooli ja lisage uus projekt. Lisate rakenduse siia.

https://console.firebase.google.com/

See käivitab assistendi, kes küsib teilt projekti nime.

Järgmisel ekraanil küsitakse, kas soovite analüütika lubada. Lülitage see välja ja klõpsake nuppu Loo projekt. Projekti ettevalmistamine võtab veidi aega ja pärast seda näete nuppu Jätka, mis viib teid projekti ülevaate juurde.

Nüüd peate Firebase’i projekti lisama Firebase’i rakenduse. Kõlab loogiliselt? Firebase’i projekt võimaldab teil sisaldada mitut Firebase’i rakendust iOS-i, Androidi, veebi ja Unity jaoks. Praegu loome veebirakenduse, kuna kasutame Firebase’i sisselogimise loomiseks Reacti.

Teil palutakse sellele rakendusele nimi anda ja teile antakse võtmed, mida peate Firebase’iga ühenduse loomiseks kasutama. Need näevad välja umbes sellised:

var firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "1234567890",
};

Kasutame neid võtmeid oma rakenduses React, et konfigureerida pakkuja, mis võimaldab meil Firebase’ile juurde pääseda mis tahes teenusepakkuja all olevas komponendis.

Lõpuks avage vasakpoolsel külgribal Autentimine, vahekaart Sisselogimismeetod ja lubage meili/parooli autentimine.

Kõik on valmis!

Installige Firebase’i sõltuvused

Firebase on saadaval erinevate virnade jaoks, sealhulgas JavaScripti ja Node.js -i jaoks, mida me nüüd kasutame. Installime npm-iga ainult kaks sõltuvust:

• firebase, mis võimaldab meil pääseda juurde näiteks authteegile, mida kasutame sisselogimiseks ja ka uue kasutaja loomiseks
• reactfire, kasulike tööriistade kogum Firebase’iga töötamiseks rakenduses React. Kasutame useFirebaseAppneid kontekstiga ühenduse loomiseks ja Firebase’ile juurdepääsuks

Paigaldame need koos

npm i firebase reactfire

Rakenduse React struktuur on väga lihtne:

|-- index.js
|-- App.js
|-- FirebaseUser
    |-- index.js

ja need on seotud järgmiselt:

Seadistage Firebase’i pakkuja

Kirjutame esimese faili Firebase’i sisselogimiseks ja registreerumiseks! Me ei pea seda tegelikult kirjutama, sest see tuleks lisada faili, kuhu väljastate ReactDOM.render(), meie puhul on see index.js:

import { FirebaseAppProvider } from 'reactfire';

const firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "925199572988",
    appId: "1:123456789:web:12a34b56c78d90e"
};

See impordib FirebaseAppProviderja lisab sellele edastatavad konfiguratsioonivõtmed. Nüüd saate mähkida juurkomponendi, mis meie puhul on Appteenusepakkujaga:

ReactDOM.render(, document.getElementById('root')
);

Suurepärane! Nüüd pääsevad Firebase’ile juurde kõik allolevad komponendid!

Kasutage Firebase’i sisselogimis- ja registreerumiskomponenti

Kirjutame nüüd Appkomponendi, kuhu impordime ja mida kasutame FirebaseUserkasutaja loomiseks ja sisselogimiseks. Siin pole Firebase’iga tegelikult midagi seotud. Rakendame sisselogimise ja registreerumise sama komponendi abil, et saaksite näha, kuidas saame koodi uuesti kasutada, nii et selles komponendis rakendame paar nuppu, millel klõpsamisel renderdatakse FirebaseUsersisselogimisrežiimis või registreerumisrežiim:

Seadistage Firebase’i sisselogimine ja registreeruge

Loome selle jaoks komponendi. Esmalt peame importima mõned moodulid:

import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';

Uurime useStatemõnda asja, alates teadmisest, kas kasutaja on autentitud, kuni vigade määramiseni. Me kasutame useFirebaseAppFirebase’i ühendusele juurdepääsu saamiseks konksu. See on võimalik ainult seetõttu, et seadistasime Firebase’i pakkuja eelmises etapis ja see on saadaval ainult selle hierarhia all, kuhu see lisati. Lõpuks impordime authteegi, et saaksime kasutajate loomiseks ja sisselogimiseks kutsuda Firebase’i meetodeid. See on tõhus viis, kuna laadime ainult seda teeki, mitte muid, nagu firestoreNoSQL-i andmebaasi või messagingsõnumite ja teatiste jaoks.

Järgmisena lisame sisestusväljade haldamiseks kiirkonksu:

Ja lõpuks täiskomponent, mille me allpool jaotame, et tuua välja kõige huvitavamad osad, mis on seotud Firebase’i sisselogimise ja registreerumisega.

Esiteks ühendame Firebase’i eksemplari:

const firebase = useFirebaseApp();

Nagu eelnevalt märgitud, on see võimalik, kuna Apppakkisime komponendi eelnevalt Firebase’i pakkujaga. Nüüd, kui oleme Firebase’iga ühendatud, saame kasutada seda authfunktsiooni ja helistada signInWithEmailAndPassword:

Kui see õnnestub, määrab see tagastatud andmed ja vormiväljad asendatakse väljadega

Logged in as ${ auth?.user.email ?? '' }

Tagastatud andmed on suur objekt, millel on väga huvitavad omadused, nii et tasub lisada console.log()meie setReceivedData()funktsiooni, et näha, mida see veel sisaldab.

Kasutaja loomise protsess on sarnane, välja arvatud see, et kasutame funktsiooni createUserWithEmailAndPassword().

Järeldus

Meie Firebase’i sisselogimise testimiseks ja registreerumiseks võite proovida sisse logida kasutajaga, keda pole olemas, et saaksite vigu näha. Pärast seda looge kasutaja ja logige seejärel kasutajana sisse.

Firebase’i sisselogimise ja registreerumise demo.
Lõbus fakt: Chrome kaebab, et parool 123456, mida ma testimiseks kasutan, on rikutud, mis on tõsi.

Kui lähete nüüd tagasi Firebase’i rakendusele > Autentimine > Kasutajad, näete uut kasutajat (peate võib-olla kasutama valiku Lisa kasutaja kõrval olevat värskendamisnuppu).

Kokkuvõtteks on olulised sammud Firebase’i integreerimiseks meie Reacti rakendusse:

• seadistage Firebase’i pakkuja ja mähitage juurkomponent (või hierarhia juur, kus soovite seda kasutada)
• konks kasutades Firebase’i pakkujatuseFirebaseApp
• kasutage autentimisfunktsioone!

Kontrollige GitHubi hoidlat aadressil https://github.com/eliorivero/firebase-login-sign-up. Ainus erinevus selle puhul on see, et laadin Firebase’i konfigureerimiseks võtmed .env-failist, et vältida nende avalikku paljastamist.

Kui teil on küsimusi, andke mulle allolevates kommentaarides teada!