So erstellen Sie ein Firebase-Login und melden sich bei React an
Firebase ist ein System, das Entwicklern viele Plattformen zum Erstellen von Web-Apps bietet. Eines der wesentlichen Elemente in einer App besteht darin, Benutzer zu erstellen und ihnen die Anmeldung zu ermöglichen. Mal sehen, wie wir ein Firebase-Login schreiben können, das vollständig und dennoch sehr einfach zu implementieren ist.
Erstellen Sie Ihre Firebase-App
Sie müssen zuerst ein Firebase-App-Projekt erstellen, gehen Sie also zur Firebase-Konsole und fügen Sie ein neues Projekt hinzu. Sie fügen die App hier hinzu.
https://console.firebase.google.com/
Es wird ein Assistent gestartet, der Sie nach dem Namen des Projekts fragt.
Auf dem nächsten Bildschirm werden Sie gefragt, ob Sie die Analyse aktivieren möchten. Schalten Sie es aus und klicken Sie auf die Schaltfläche Projekt erstellen . Es dauert eine Weile, bis Ihr Projekt bereitgestellt ist. Danach erhalten Sie eine Schaltfläche zum Fortfahren, die Sie zur Projektübersicht führt.
Sie müssen dem Firebase-Projekt jetzt eine Firebase-App hinzufügen. Macht Sinn? Ein Firebase-Projekt ermöglicht es Ihnen, mehrere Firebase-Apps für iOS, Android, Web und Unity zu enthalten. Lassen Sie uns zunächst eine Web-App erstellen, da wir React verwenden, um unser Firebase-Login zu erstellen.
Sie werden aufgefordert, dieser App einen Namen zu geben, und Sie erhalten die Schlüssel, die Sie zum Herstellen einer Verbindung mit Firebase benötigen. Sie sehen in etwa so aus:
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",
};
Wir verwenden diese Schlüssel in unserer React- App, um einen Anbieter zu konfigurieren, der uns den Zugriff auf Firebase in jeder Komponente unter dem Anbieter ermöglicht.
Gehen Sie schließlich in der linken Seitenleiste zur Authentifizierung, der Registerkarte Anmeldemethode, und aktivieren Sie die E- Mail/Passwort – Authentifizierung.
Sie sind bereit!
Installieren Sie Firebase-Abhängigkeiten
Firebase ist für verschiedene Stacks verfügbar, einschließlich JavaScript und Node.js, die wir jetzt verwenden werden. Wir werden nur zwei Abhängigkeiten mit npm installieren:
firebase
, die es uns ermöglicht, auf Dinge wie dieauth
Bibliothek zuzugreifen, die wir verwenden, um die Anmeldung durchzuführen und auch einen neuen Benutzer zu erstellenreactfire
, eine Sammlung nützlicher Tools für die Arbeit mit Firebase in React. Wir verwenden sieuseFirebaseApp
, um eine Verbindung zum Kontext herzustellen und auf Firebase zuzugreifen
Installieren wir sie mit
npm i firebase reactfire
Die Struktur der React- App wird wie folgt sehr einfach sein:
|-- index.js
|-- App.js
|-- FirebaseUser
|-- index.js
und sie hängen wie folgt zusammen:
Richten Sie den Firebase-Anbieter ein
Lassen Sie uns die erste Datei für die Firebase-Anmeldung und -Anmeldung schreiben! Wir müssen es eigentlich nicht schreiben, da dies zu der Datei hinzugefügt werden sollte, in der Sie ausgeben ReactDOM.render()
, in unserem Fall wird es sein 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"
};
Dies importiert die FirebaseAppProvider
und fügt die Konfigurationsschlüssel hinzu, die Sie ihm übergeben. Sie können nun die Root-Komponente umschließen, die in unserem Fall App
beim Anbieter liegt:
ReactDOM.render(, document.getElementById('root')
);
Groß! Jetzt können alle unten aufgeführten Komponenten auf Firebase zugreifen!
Verwenden Sie die Anmelde- und Registrierungskomponente von Firebase
Lassen Sie uns jetzt die App
Komponente schreiben, in die wir die Komponente importieren und verwenden FirebaseUser
, um einen Benutzer zu erstellen und sich anzumelden. Hier gibt es nichts wirklich mit Firebase zu tun. Wir werden eine Anmeldung und Anmeldung mit derselben Komponente implementieren, damit Sie sehen können, wie wir den Code wiederverwenden können. In dieser Komponente implementieren wir also ein Paar Schaltflächen, die beim Klicken FirebaseUser
in einem Anmeldemodus oder a dargestellt werden Anmeldemodus:
Richten Sie das Firebase-Login ein und melden Sie sich an
Dafür erstellen wir eine Komponente. Wir müssen zuerst einige Module importieren:
import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';
Wir werden useState
für ein paar Dinge sorgen, von der Feststellung, ob der Benutzer authentifiziert ist, bis zum Festlegen von Fehlern. Wir werden den useFirebaseApp
Hook verwenden, um auf die Firebase-Verbindung zuzugreifen. Dies ist nur möglich, weil wir den Firebase-Anbieter im vorherigen Schritt eingerichtet haben und er nur unter der Hierarchie verfügbar ist, in der er hinzugefügt wurde. Schließlich importieren wir die auth
Bibliothek, damit wir die Firebase-Methoden aufrufen können, um Benutzer zu erstellen und sich anzumelden. Dies ist ein effizienter Weg, da wir nur diese Bibliothek laden und keine anderen wie firestore
für die NoSQL-Datenbank oder messaging
für Nachrichten und Benachrichtigungen.
Als Nächstes fügen wir einen Quick Hook hinzu, um unsere Eingabefelder zu verwalten:
Und schließlich die vollständige Komponente, die wir unten aufschlüsseln, um auf die interessantesten Teile hinzuweisen, die sich auf die Firebase-Anmeldung und -Anmeldung beziehen.
Zuerst verbinden wir uns mit der Firebase-Instanz:
const firebase = useFirebaseApp();
Wie bereits erwähnt, ist dies möglich, weil wir die App
Komponente zuvor mit dem Firebase-Anbieter umschlossen haben. Jetzt, da wir mit Firebase verbunden sind, können wir die auth
Funktionalität nutzen und Folgendes aufrufen signInWithEmailAndPassword
:
Wenn es erfolgreich ist, werden die zurückgegebenen Daten festgelegt und die Formularfelder werden durch ersetzt
Logged in as ${ auth?.user.email ?? '' }
Die zurückgegebenen Daten sind ein großes Objekt mit sehr interessanten Eigenschaften, daher lohnt es console.log()
sich, unserer setReceivedData()
Funktion ein hinzuzufügen, um zu sehen, was sie sonst noch enthält.
Der Vorgang zum Erstellen eines Benutzers ist ähnlich, außer dass wir die Funktion verwenden createUserWithEmailAndPassword()
.
Fazit
Um unsere Firebase-Anmeldung zu testen und sich anzumelden, können Sie versuchen, sich für einen Benutzer anzumelden, der nicht existiert, damit Sie die Fehler sehen können. Erstellen Sie danach einen Benutzer und melden Sie sich als Benutzer an.
Demo des Firebase-Logins und Anmeldung.
Fun Fact: Chrome beschwert sich, dass das Passwort 123456, das ich zum Testen verwende, kompromittiert ist, was wahr ist.
Wenn Sie jetzt zurück zur Firebase-App > Authentifizierung > Benutzer gehen, sehen Sie den neuen Benutzer (möglicherweise müssen Sie die Aktualisierungsschaltfläche neben Benutzer hinzufügen verwenden).
Zusammenfassend sind die wesentlichen Schritte zur Integration von Firebase in unsere React-App:
- Richten Sie den Firebase-Anbieter ein und umschließen Sie die Stammkomponente (oder den Stamm der Hierarchie, in der Sie ihn verwenden möchten).
- Haken Sie mit dem Firebase-Anbieter an
useFirebaseApp
- nutzen Sie die Authentifizierungsfunktionen!
Überprüfen Sie das GitHub-Repository unter https://github.com/eliorivero/firebase-login-sign-up. Der einzige Unterschied zu diesem ist, dass ich die Schlüssel zum Konfigurieren von Firebase aus einer .env-Datei lade, um zu vermeiden, dass sie öffentlich zugänglich gemacht werden.
Wenn Sie Fragen haben, lassen Sie es mich in den Kommentaren unten wissen!