✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

So erstellen Sie ein Firebase-Login und melden sich bei React an

18

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/

So erstellen Sie ein Firebase-Login und melden sich bei React an

Es wird ein Assistent gestartet, der Sie nach dem Namen des Projekts fragt.

So erstellen Sie ein Firebase-Login und melden sich bei React an

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.

So erstellen Sie ein Firebase-Login und melden sich bei React an

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.

So erstellen Sie ein Firebase-Login und melden sich bei React an

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 die authBibliothek zuzugreifen, die wir verwenden, um die Anmeldung durchzuführen und auch einen neuen Benutzer zu erstellen
  • reactfire, eine Sammlung nützlicher Tools für die Arbeit mit Firebase in React. Wir verwenden sie useFirebaseApp, 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 FirebaseAppProviderund fügt die Konfigurationsschlüssel hinzu, die Sie ihm übergeben. Sie können nun die Root-Komponente umschließen, die in unserem Fall Appbeim 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 AppKomponente 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 FirebaseUserin 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 useStatefür ein paar Dinge sorgen, von der Feststellung, ob der Benutzer authentifiziert ist, bis zum Festlegen von Fehlern. Wir werden den useFirebaseAppHook 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 authBibliothek, 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 firestorefür die NoSQL-Datenbank oder messagingfü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 AppKomponente zuvor mit dem Firebase-Anbieter umschlossen haben. Jetzt, da wir mit Firebase verbunden sind, können wir die authFunktionalitä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.

So erstellen Sie ein Firebase-Login und melden sich bei React 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).

So erstellen Sie ein Firebase-Login und melden sich bei React an

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 anuseFirebaseApp
  • 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!

Aufnahmequelle: startfunction.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen