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, kuten authkirjastoa, jota käytämme kirjautumiseen ja myös uuden käyttäjän luomiseen
• reactfire, kokoelma hyödyllisiä työkaluja Firebasen kanssa työskentelemiseen Reactissa. Käytämme niitä useFirebaseAppyhteyden 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:

index.js --import--> ./App.js --import--> ./FirebaseUser

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 FirebaseAppProviderja lisää sille välitettävät määritysavaimet. Voit nyt kääriä juurikomponentin, joka meidän tapauksessamme on Apppalveluntarjoajan 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 Appkomponentti, johon tuomme ja käytämme FirebaseUserkomponenttia 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 FirebaseUsersisäänkirjautumistilassa tai kirjautumistila:

import React, { useState } from 'react';
import FirebaseUser from './FirebaseUser';

function App() {
  const [ signInOrUp, setSignInOrUp ] = useState( '' );
  return (Firebase login
      {
        signInOrUp?(): (<>
             setSignInOrUp( 'signin') } >Log in with existing user
             setSignInOrUp( 'signup') } >Create a new user) }

  );
}

export default App;

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 useStatetehdä muutamia asioita, kuten tietää, onko käyttäjä todennettu, virheiden asettamiseen. Käytämme useFirebaseAppkoukkua 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 authkirjaston, 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 firestoreNoSQL-tietokantaa tai messagingviestejä ja ilmoituksia varten.

Seuraavaksi lisäämme pikakoukun syöttökenttien hallintaan:

const useField =() => {
    const [ value, setValue ] = useState( '' );
    return { value, onChange: x => setValue( 'string' === typeof x? x: x.target.value) };
};

Ja lopuksi koko komponentti, jonka erittelemme alla osoittaaksemme kiinnostavimmat osat, jotka liittyvät Firebase-kirjautumiseen ja rekisteröitymiseen.

function FirebaseUser ({ action = 'signin' }) {
    const email = useField();
    const password = useField();
    const [ auth, setAuth ] = useState( null );
    const [ error, setError ] = useState( '' );
    const firebase = useFirebaseApp();
    const setReceivedData = data => setAuth( data );
    const setReceivedError = error => setError( error.message );

    const signIn = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
    };

    const signUp = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .createUserWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
    };

    const manage = 'signin' === action? {
            success: `Logged in as ${ auth?.user.email ?? '' }`,
            method: signIn,
            label: 'Sign In'
        }: {
            success: `Signed up as ${ auth?.user.email ?? '' }`,
            method: signUp,
            label: 'Sign Up'
        };

    return ({
                auth? ({ manage.success }
                ): (<>

                            { manage.label }
                            {
                                error && { error }
                            }) }

    );
}

export default FirebaseUser;

Ensin kytketään Firebase-instanssiin:

const firebase = useFirebaseApp();

Kuten aiemmin mainittiin, tämä on mahdollista, koska olemme aiemmin paketoineet Appkomponentin Firebase-palveluntarjoajan kanssa. Nyt kun olemme koukussa Firebaseen, voimme käyttää authtoimintoa ja soittaa signInWithEmailAndPassword:

const signIn = e => {
        e.preventDefault();
        setError( '' );
        firebase.auth()
            .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );
};

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!