Firebase-kirjautumistunnuksen luominen ja Reactissa rekisteröityminen
Firebase on järjestelmä, joka tarjoaa kehittäjille monia alustoja verkkosovellusten rakentamiseen. Yksi sovelluksen olennaisista osista on luoda käyttäjiä ja antaa heidän kirjautua sisään. Katsotaanpa, kuinka voimme kirjoittaa Firebase-sisäänkirjautumisen, joka on täydellinen mutta erittäin helppo toteuttaa.
Luo Firebase-sovellus
Sinun on ensin luotava Firebase-sovellusprojekti, joten siirry Firebase-konsoliin ja lisää uusi projekti. Lisäät sovelluksen tähän.
https://console.firebase.google.com/
Se käynnistää avustajan, joka kysyy projektin nimeä.
Seuraava näyttö kysyy, haluatko ottaa analytiikan käyttöön. Kytke se pois päältä ja napsauta Luo projekti -painiketta. Projektin valmistelu kestää hetken, ja sen jälkeen saat Jatka -painikkeen, joka vie sinut projektin yleiskatsaukseen.
Sinun on nyt lisättävä Firebase-sovellus Firebase-projektiin. Käydä järkeen? Firebase-projektin avulla voit sisältää useita Firebase-sovelluksia iOS:lle, Androidille, Webille ja Unitylle. Luodaan toistaiseksi verkkosovellus, koska käytämme Firebase-kirjautumistunnuksemme luomiseen Reactia.
Sinua pyydetään nimeämään tämä sovellus, ja sinulle annetaan avaimet, joita sinun tulee käyttää muodostaaksesi yhteyden Firebaseen. Ne näyttävät tältä:
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",
};
Käytämme näitä avaimia React -sovelluksessamme palveluntarjoajan määrittämiseen, jotta voimme käyttää Firebasea missä tahansa palveluntarjoajan alaisuudessa olevassa komponentissa.
Siirry lopuksi vasemman sivupalkin Todennus -kohtaan, Kirjautumistapa- välilehteen ja ota sähköposti-/salasanatodennus käyttöön .
Olet valmis!
Asenna Firebase-riippuvuudet
Firebase on saatavilla erilaisille pinoille, mukaan lukien JavaScript ja Node.js, joita aiomme käyttää nyt. Asennamme vain kaksi riippuvuutta npm:llä:
firebase
, jonka avulla voimme käyttää asioita, kutenauth
kirjastoa, jota käytämme kirjautumiseen ja myös uuden käyttäjän luomiseenreactfire
, kokoelma hyödyllisiä työkaluja Firebasen kanssa työskentelemiseen Reactissa. Käytämme niitäuseFirebaseApp
yhteyden muodostamiseen kontekstiin ja Firebaseen
Asennamme ne kanssa
npm i firebase reactfire
React -sovelluksen rakenne on hyvin yksinkertainen, seuraavasti:
|-- index.js
|-- App.js
|-- FirebaseUser
|-- index.js
ja ne liittyvät seuraavasti:
Määritä Firebase-palveluntarjoaja
Kirjoitetaan ensimmäinen tiedosto Firebase-kirjautumista ja rekisteröitymistä varten! Meidän ei itse asiassa tarvitse kirjoittaa sitä, koska tämä pitäisi lisätä tiedostoon, johon annat ReactDOM.render()
, meidän tapauksessamme se on 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"
};
Tämä tuo FirebaseAppProvider
ja lisää sille välitettävät määritysavaimet. Voit nyt kääriä juurikomponentin, joka meidän tapauksessamme on App
palveluntarjoajan kanssa:
ReactDOM.render(, document.getElementById('root')
);
Loistava! Nyt kaikki alla olevat komponentit pääsevät Firebaseen!
Käytä Firebasen kirjautumis- ja rekisteröitymiskomponenttia
Kirjoita nyt App
komponentti, johon tuomme ja käytämme FirebaseUser
komponenttia käyttäjän luomiseen ja kirjautumiseen. Tässä ei ole varsinaisesti mitään Firebaseen liittyvää. Aiomme toteuttaa kirjautumisen ja kirjautumisen käyttämällä samaa komponenttia, jotta voit nähdä, kuinka voimme käyttää koodia uudelleen, joten tässä komponentissa toteutamme painikkeet, joita napsautettuna hahmonnetaan FirebaseUser
sisäänkirjautumistilassa tai kirjautumistila:
Määritä Firebase-kirjautuminen ja rekisteröidy
Luomme tätä varten komponentin. Meidän on ensin tuotava joitain moduuleja:
import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';
Aiomme useState
tehdä muutamia asioita, kuten tietää, onko käyttäjä todennettu, virheiden asettamiseen. Käytämme useFirebaseApp
koukkua Firebase-yhteyden muodostamiseen. Tämä on mahdollista vain, koska määritimme Firebase-palveluntarjoajan edellisessä vaiheessa, ja se on saatavilla vain siinä hierarkiassa, johon se lisättiin. Lopuksi tuomme auth
kirjaston, jotta voimme kutsua Firebase-menetelmiä käyttäjien luomista ja kirjautumista varten. Tämä on tehokas tapa, koska lataamme vain tämän kirjaston, emme muita, kuten firestore
NoSQL-tietokantaa tai messaging
viestejä ja ilmoituksia varten.
Seuraavaksi lisäämme pikakoukun syöttökenttien hallintaan:
Ja lopuksi koko komponentti, jonka erittelemme alla osoittaaksemme kiinnostavimmat osat, jotka liittyvät Firebase-kirjautumiseen ja rekisteröitymiseen.
Ensin kytketään Firebase-instanssiin:
const firebase = useFirebaseApp();
Kuten aiemmin mainittiin, tämä on mahdollista, koska olemme aiemmin paketoineet App
komponentin Firebase-palveluntarjoajan kanssa. Nyt kun olemme koukussa Firebaseen, voimme käyttää auth
toimintoa ja soittaa signInWithEmailAndPassword
:
Kun se onnistuu, se asettaa palautetut tiedot ja lomakekentät korvataan
Logged in as ${ auth?.user.email ?? '' }
Palautettu data on suuri objekti, jolla on erittäin mielenkiintoisia ominaisuuksia, joten kannattaa lisätä console.log()
funktioomme setReceivedData()
nähdäksesi mitä muuta se sisältää.
Käyttäjän luontiprosessi on samanlainen, paitsi että käytämme funktiota createUserWithEmailAndPassword()
.
Johtopäätös
Testaaksesi Firebase-kirjautumista ja rekisteröitymistä, voit yrittää kirjautua sisään sellaisen käyttäjän kohdalla, jota ei ole olemassa, jotta näet virheet. Luo sen jälkeen käyttäjä ja kirjaudu sisään käyttäjänä.
Firebase-esittely kirjautumisesta ja rekisteröitymisestä.
Hauska tosiasia: Chrome valittaa, että testaukseen käyttämäni salasana 123456 on vaarantunut, mikä on totta.
Jos palaat nyt Firebase-sovellukseen > Todennus > Käyttäjät, näet uuden käyttäjän (sinun on ehkä käytettävä Päivitä-painiketta Lisää käyttäjä -kohdan vieressä).
Yhteenvetona totean, että Firebasen integroiminen React-sovellukseemme ovat seuraavat:
- määritä Firebase-palveluntarjoaja ja kääri juurikomponentti (tai hierarkian juuri, jossa haluat käyttää sitä)
- liitä Firebase-palveluntarjoajaan käyttämällä
useFirebaseApp
- käytä todennustoimintoja!
Tarkista GitHub-arkisto osoitteessa https://github.com/eliorivero/firebase-login-sign-up. Ainoa ero tässä on se, että lataan Firebasen määritysavaimet .env-tiedostosta, jotta vältytään paljastamasta niitä julkisesti.
Jos sinulla on kysyttävää, kerro minulle alla olevissa kommenteissa!