Dieses Handbuch ist eine Ergänzung zu „So richten Sie die Firebase-Authentifizierung mit einer React-Webanwendung ein“ . In der Einleitung dieses Leitfadens habe ich darauf hingewiesen, dass Firebase über die grundlegende E-Mail-/Passwort-Authentifizierung hinaus noch andere Authentifizierungsschemata bietet. Eine dieser Alternativen ist die passwortlose Authentifizierung .
Die passwortlose Authentifizierung ist eine attraktive Option beim Erstellen von Anwendungen. Es vereinfacht die Benutzererfahrung, da Ihre Benutzer sich ihre Passwörter nicht merken müssen und sich daher auch keine Sorgen machen müssen, sie zu verlieren. Es erleichtert auch die Entwicklungserfahrung, da keine Passworterfassungs- oder Verwaltungslogik entworfen werden muss.
In dieser Anleitung erstellen Sie einen einfachen Anmelde-/Bestätigungs-/Profil-/Abmelde-Workflow, der die passwortlose Authentifizierung von Firebase implementiert.
Google legt verschiedene Limits für die Firebase-Authentifizierung fest. Wenn Sie den kostenlosen Spark- Plan nutzen, beachten Sie, dass Sie auf 5 Anmeldelink-E-Mails pro Tag beschränkt sind. Während der Spark-Plan für Testzwecke ausreichend sein kann, müssen Sie ein Upgrade auf den nutzungsbasierten Blaze- Plan durchführen, um dieses Limit zu überschreiten.
In dieser Anleitung beziehe ich mich auf die Anleitung „So richten Sie die Firebase-Authentifizierung mit einer React-Webanwendung ein“ als Voraussetzungsanleitung und auf das zugehörige Projekt als Voraussetzungsprojekt .
Um diesen Leitfaden auszufüllen, benötigen Sie Folgendes:
Im Leitfaden zu den Voraussetzungen haben Sie ein neues Firebase-Projekt für die grundlegende E-Mail-/Passwort-Authentifizierung erstellt. Jetzt aktivieren Sie dasselbe Projekt für die passwortlose Authentifizierung. Melden Sie sich bei Ihrem Firebase-Konto an und klicken Sie auf „Zur Konsole gehen“ .
Klicken Sie auf Ihr Authentifizierungsprojekt, das im Firebase-Projekt-Dashboard aufgeführt ist. In diesem Handbuch wird der Projektname my-auth-test
verwendet.
Klicken Sie im linken Bereichsmenü auf Authentifizierung .
Klicken Sie im Hauptfenster auf die Registerkarte Anmeldemethode .
Aufgrund Ihrer Arbeit im Leitfaden zu den Voraussetzungen sollte in der Tabelle „Anmeldeanbieter“ in der Spalte „ Anbieter “ bereits „E-Mail/Passwort“ mit dem Status „ Aktiviert “ angezeigt werden. Klicken Sie auf das Stiftsymbol, um das Konfigurationsfenster für den E-Mail-/Passwort- Anbieter zu öffnen.
Klicken Sie auf den Schalter, um den E-Mail-Link (passwortlose Anmeldung) zu aktivieren.
Klicken Sie auf Speichern .
Ihr Firebase-Projekt ist jetzt für die Unterstützung der passwortlosen Authentifizierung konfiguriert.
Erstellen Sie ein neues React-Projekt mit dem gewünschten Anwendungsnamen. Dieses Handbuch verwendet passwordless-auth
.
npx create-react-app passwordless-auth
Für diese Anleitung ist die Installation von 3 Node.js-Paketen erforderlich:
Installieren Sie jedes der drei oben genannten Pakete über npm
:
npm install firebase
npm install react-router-dom
npm install bootstrap
firebase.js
aus dem Prerequisite-Projekt Im vorausgesetzten Projekt haben Sie eine Datei firebase.js
erstellt, die Ihre Firebase-Projektkonfigurationsdaten verwendet, um eine Instanz des Firebase-Authentifizierungsdienstes zu erstellen. Ihre Datei firebase.js
sollte die folgende Struktur mit den Konfigurationswerten Ihres Firebase-Projekts haben:
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth }
Kopieren Sie firebase.js
in Ihren neuen React-Projektordner.
Wenn Sie die Konfiguration Ihres Firebase-Projekts überprüfen müssen, klicken Sie im linken Bedienfeldmenü auf das Zahnradsymbol neben „Projektübersicht“ . Die Registerkarte „Allgemein“ sollte bereits ausgewählt sein. Scrollen Sie nach unten zum Abschnitt „Ihre Apps“ , der den Bereich „Web-Apps“ enthält. Die Option „npm“ im Bereich „Web-Apps“ sollte bereits ausgewählt sein. Die Werte Ihrer Projektkonfiguration werden im angezeigten Codeblock aufgelistet.
Die React-Anwendung besteht aus 5 Komponenten: App
, Layout
, Login
, Confirm
und Profile
.
App
App
Komponente definiert die gesamte Anwendungsstruktur, einschließlich Routing. Layout
Layout
Komponente gibt das Anwendungs-Markup an, das über alle Routen hinweg konsistent bleibt. Login
Confirm
Confirm
weitergeleitet, wenn er auf einen Anmeldelink klickt. Profile
Profile
weitergeleitet.Profile
auf die Schaltfläche „Abmelden“ klicken, um sich von seinem Konto abzumelden. Das endgültige src
Verzeichnis enthält die folgenden Dateien:
src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx
reportWebVitals.js
setupTests.js
logo.svg
index.css
App.css
App.test.js
Kopieren Sie index.js
aus dem erforderlichen Projekt in Ihren neuen Projektordner. Dieses Handbuch verwendet dieselbe Datei. Wenn Sie index.js
neu erstellen müssen, lesen Sie Schritt 5b.2 des Leitfadens zu den Voraussetzungen oder kopieren Sie den Codeblock unten.
Kopieren Sie Layout.jsx
aus dem erforderlichen Projekt in Ihren neuen Projektordner. Dieses Handbuch verwendet dieselbe Datei. Wenn Sie Layout.jsx
neu erstellen müssen, lesen Sie Schritt 5d des Leitfadens zu den Voraussetzungen oder kopieren Sie den Codeblock unten. Optional können Sie den Projekttext im <p>
-Tag von Layout.jsx
auf React With Firebase Passwordless Authentication
oder einen anderen Titel aktualisieren, den Sie bevorzugen.
Ihre index.js
und Layout.jsx
Dateien sollten wie folgt aussehen:
// index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );
// Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( <div className = "container-fluid"> <div className = "row justify-content-center mt-3"> <div className = "col-md-4 text-center"> <p className = "lead">React With Firebase Passwordless Authentication</p> </div> <Outlet /> </div> </div> ) } export default Layout
App.js
Die App.js
Datei ist weitgehend dieselbe wie im vorausgesetzten Projekt, mit Änderungen in nur zwei Zeilen. Um das Erstellen der Datei zu erleichtern, kopieren Sie App.js
aus dem erforderlichen Projekt in Ihren neuen Projektordner.
Löschen Sie die folgende import
aus der Datei und ersetzen Sie sie wie unten gezeigt:
// Delete this line: import Signup from "./Signup";
// Replace it with: import Confirm from "./Confirm";
Löschen Sie die folgende <Route>
aus der Datei und ersetzen Sie sie wie unten gezeigt:
// Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route>
// Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route>
Speichern Sie App.js
Die vollständige Datei sollte nun wie folgt aussehen:
import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( <BrowserRouter> <Routes> <Route path = "/" element = { <Layout></Layout> }> <Route index element = { <Login></Login> }></Route> <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> <Route path = "/profile" element = { <Profile></Profile> } ></Route> </Route> </Routes> </BrowserRouter> ) } export default App
Beachten Sie, dass die Login
Komponente wieder die Ausgangsroute der Anwendung ist, wie es beim vorausgesetzten Projekt der Fall war.
Login.jsx
Bei der passwortlosen Authentifizierung müssen Sie natürlich kein Passwortfeld einschließen und auch den Status für die Passworteingabe nicht verwalten. Das Anmeldeformular muss also nur die E-Mail-Adresse des Benutzers erfassen.
Erstellen Sie eine neue Login.jsx
Datei im src
Verzeichnis.
Fügen Sie den folgenden Code hinzu:
import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button> </div> </form> </div> </div> ) }
Login.jsx
.
Nach der Erfassung der E-Mail-Adresse des Benutzers sendet das Login.jsx
Formular über die sendSignInLinkToEmail
Methode von Firebase eine E-Mail mit einem Anmeldelink an seine Adresse. Bei Erfolg wird der Benutzer benachrichtigt, dass die E-Mail gesendet wurde. Beachten Sie, dass das actionCodeSettings
Objekt als Parameter an die sendSignInLinkToEmail
-Methode übergeben wird und die URL enthält, zu der der Benutzer weitergeleitet wird, wenn er auf den per E-Mail gesendeten Anmeldelink klickt. In diesem Fall wird die URL der in App.js
angegebenen Route /confirm
zugeordnet.
Confirm.jsx
. signInWithEmailLink
Methode von Firebase wird verwendet, um einen Benutzer anzumelden, der auf einen Anmeldelink geklickt hat. Wie Sie gleich sehen werden, benötigt die Methode einen email
Parameter und der Wert von email
muss mit der E-Mail-Adresse übereinstimmen, die der Benutzer bei der Anmeldung über das Anmeldeformular verwendet hat. Confirm.jsx
zeigt dem Benutzer ein Formular zur Bestätigung seiner E-Mail-Adresse an und versucht anschließend, den Benutzer anzumelden.
Erstellen Sie eine neue Datei Confirm.jsx
im Verzeichnis src
.
Fügen Sie den folgenden Code hinzu:
import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "[email protected]" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button> </div> </form> </div> </div> ) } export default Confirm
Confirm.jsx
.
Die Methode isSignInWithEmailLink
prüft zunächst, ob der vom Benutzer verwendete Anmeldelink gültig ist. Wenn dies der Fall ist, wird die Methode signInWithEmailLink
aufgerufen, um den Benutzer anzumelden. Um es noch einmal zu betonen: Der an die Methode signInWithEmailLink
übergebene E- email
Wert muss mit der E-Mail-Adresse übereinstimmen, die der Benutzer im Anmeldeformular verwendet hat. Beachten Sie, dass Firebase den Benutzer automatisch im Firebase-Authentifizierungsspeicher erstellt, wenn es sich um einen neuen Benutzer handelt (d. h. wenn er sich zum ersten Mal anmeldet). Dies ist ein weiteres Beispiel für die vereinfachte Erfahrung, die die passwortlose Authentifizierung bietet: Die Kontoerstellung für neue Benutzer erfolgt automatisch.
Profile.jsx
Die letzte Komponente, die Sie erstellen werden, ist Profile.jsx
. Benutzer werden zu dieser Komponente weitergeleitet, wenn sie sich erfolgreich über Confirm.jsx
anmelden. Die Route begrüßt den Benutzer mit seiner E-Mail-Adresse und bietet eine Schaltfläche zum Abmelden. Beim Abmelden wird der Benutzer zurück zur Login
weitergeleitet.
Erstellen Sie eine neue Profile.jsx
Datei im src
Verzeichnis.
Fügen Sie den folgenden Code hinzu:
import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( <div className = "container"> <div className = "row justify-content-center"> <div className = "col-md-4 text-center"> <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p> <div className = "d-grid gap-2"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button> </div> </div> </div> </div> ) } export default Profile
Profile.jsx
.Starten Sie die React-Anwendung:
npm start
locahost:3000
, wenn Ihr Browser nicht automatisch startet. Sie sollten das Login
sehen.
Geben Sie die E-Mail-Adresse ein, mit der Sie sich anmelden möchten, und klicken Sie auf „Senden“ . Wenn die Übermittlung erfolgreich war, wird eine Benachrichtigung angezeigt, dass eine E-Mail mit einem Anmeldelink an Ihre E-Mail-Adresse gesendet wurde.
Sign in to project-1078604952662
sein, wobei die 13-stellige Zahlenfolge die messagingSenderId
Ihres Firebase-Projekts darstellt (siehe Schritt 3 dieser Anleitung). Im optionalen Abschnitt unten erkläre ich, wie Sie den Namen Ihres Firebase-Projekts ändern können, um in E-Mails mit Anmeldelinks einen „benutzerfreundlichen“ Namen anzuzeigen. Öffnen Sie zunächst die E-Mail mit dem Anmeldelink und klicken Sie auf den Anmeldelink. Sie werden zum Confirm
weitergeleitet.
Geben Sie im Confirm
die E-Mail-Adresse ein, die Sie bei der Anmeldung verwendet haben. Klicken Sie auf Bestätigen . Wenn die Bestätigung erfolgreich ist, werden Sie zur Profile
weitergeleitet.
Klicken Sie auf der Profile
auf die Schaltfläche „Abmelden“ , um sich abzumelden. Wenn die Abmeldung erfolgreich ist, werden Sie zum Login
zurückgeleitet.
Die oben genannten Schritte erfassen den Workflow für die Anwendung.
Sie können Ihren Projektnamen ändern, sodass von Firebase gesendete Anmeldelink-E-Mails einen „benutzerfreundlichen“ Namen anstelle von beispielsweise project-1078604952662
anzeigen. Melden Sie sich bei Ihrem Firebase-Konto an und klicken Sie auf „Zur Konsole gehen“ .
Die passwortlose Authentifizierung scheint bei Anwendungsentwicklern eine immer beliebtere Wahl zu sein, und das ist verständlich. Neben dem offensichtlichen Vorteil, dass die Verwaltung von Passwörtern entfällt, ist auch keine E-Mail-Verifizierung erforderlich, da der Vorgang des Sendens des Anmeldelinks eine Verifizierung an sich ist.
Wie beim vorausgesetzten Projekt ist die Implementierung hier grundlegend. Sie könnten einfache Verbesserungen in Betracht ziehen, wie zum Beispiel:
Blockieren/Blacklisting bestimmter E-Mail-Adressdomänen (z. B. häufig vorkommende Spam-E-Mail-Domänen).
Lokales Speichern der vom Benutzer auf der Login
eingegebenen E-Mail-Adresse und Überprüfung der Existenz der E-Mail-Adresse auf der Confirm
. Wenn der Benutzer bei diesem Ansatz auf demselben Gerät, auf dem er auf die Login
zugegriffen hat, auf einen Anmeldelink klickt, muss er seine E-Mail-Adresse nicht erneut auf der Confirm
eingeben, da diese wiederhergestellt wird aus dem lokalen Speicher. Dies sorgt für ein noch reibungsloseres Benutzererlebnis.
Weitere Informationen zur passwortlosen Firebase-Authentifizierung finden Sie in der offiziellen Dokumentation .