Einführung  Dieses Handbuch ist eine Ergänzung zu   . 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   . „So richten Sie die Firebase-Authentifizierung mit einer React-Webanwendung ein“ 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.  Bevor Sie beginnen  Google legt verschiedene   für die Firebase-Authentifizierung fest. Wenn Sie den kostenlosen   Plan nutzen, beachten Sie, dass Sie auf 5 Anmeldelink-E-Mails pro Tag   sind. Während der Spark-Plan für Testzwecke ausreichend sein kann, müssen Sie ein Upgrade auf den nutzungsbasierten   Plan durchführen, um dieses Limit zu überschreiten. Limits Spark- beschränkt Blaze-  Voraussetzungen  In dieser Anleitung beziehe ich mich auf die Anleitung   als   und auf das zugehörige Projekt als   . „So richten Sie die Firebase-Authentifizierung mit einer React-Webanwendung ein“ Voraussetzungsanleitung Voraussetzungsprojekt  Um diesen Leitfaden auszufüllen, benötigen Sie Folgendes:  Den Leitfaden zu den Voraussetzungen einschließlich aller Voraussetzungen abgeschlossen haben.  Schritt 1 – Aktivieren der passwortlosen Authentifizierung mit Ihrem Firebase-Projekt  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   an und klicken Sie auf   . Firebase-Konto „Zur Konsole gehen“  Klicken Sie auf Ihr Authentifizierungsprojekt, das im Firebase-Projekt-Dashboard aufgeführt ist. In diesem Handbuch wird der Projektname   verwendet. my-auth-test  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   in der Spalte „   “ bereits   mit dem Status „   “ angezeigt werden. Klicken Sie auf das Stiftsymbol, um das Konfigurationsfenster für den   Anbieter zu öffnen. „Anmeldeanbieter“ Anbieter „E-Mail/Passwort“ Aktiviert E-Mail-/Passwort-  Klicken Sie auf den Schalter, um den   zu aktivieren. E-Mail-Link (passwortlose Anmeldung)  Klicken Sie auf   . Speichern  Ihr Firebase-Projekt ist jetzt für die Unterstützung der passwortlosen Authentifizierung konfiguriert.  Schritt 2 – Erstellen eines neuen React-Projekts und Installieren von Paketen  Schritt 2a – Erstellen eines neuen Reaktionsprojekts  Erstellen Sie ein neues React-Projekt mit dem gewünschten Anwendungsnamen. Dieses Handbuch verwendet   . passwordless-auth   npx create-react-app passwordless-auth  Schritt 2b – Pakete installieren  Für diese Anleitung ist die Installation von 3 Node.js-Paketen erforderlich:    : Das Firebase SDK. Firebase    : Für das Routing. React Router DOM    : Zum Stylen. Bootstrap  Installieren Sie jedes der drei oben genannten Pakete über   : npm   npm install firebase   npm install react-router-dom   npm install bootstrap  Schritt 3 – Kopieren Sie   aus dem Prerequisite-Projekt firebase.js  Im vorausgesetzten Projekt haben Sie eine Datei   erstellt, die Ihre Firebase-Projektkonfigurationsdaten verwendet, um eine Instanz des Firebase-Authentifizierungsdienstes zu erstellen. Ihre Datei   sollte die folgende Struktur mit den Konfigurationswerten   Firebase-Projekts haben: firebase.js firebase.js Ihres   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   in Ihren neuen React-Projektordner. firebase.js  Wenn Sie die Konfiguration Ihres Firebase-Projekts überprüfen müssen, klicken Sie im linken Bedienfeldmenü auf das Zahnradsymbol neben   . Die Registerkarte   sollte bereits ausgewählt sein. Scrollen Sie nach unten zum Abschnitt   , der den Bereich   enthält. Die Option   im Bereich   sollte bereits ausgewählt sein. Die Werte Ihrer Projektkonfiguration werden im angezeigten Codeblock aufgelistet. „Projektübersicht“ „Allgemein“ „Ihre Apps“ „Web-Apps“ „npm“ „Web-Apps“  Schritt 4 – Erstellen der React-Anwendung  Schritt 4a – Übersicht über die React-Anwendungskomponenten  Die React-Anwendung besteht aus 5 Komponenten:   ,   ,   ,   und   . App Layout Login Confirm Profile   App  Die   Komponente definiert die gesamte Anwendungsstruktur, einschließlich Routing. App   Layout  Die   Komponente gibt das Anwendungs-Markup an, das über alle Routen hinweg konsistent bleibt. Layout   Login  Der Einstiegspunkt des Benutzers in die Anwendung ist das Anmeldeformular.  Wenn ein Benutzer versucht, sich über seine E-Mail-Adresse anzumelden, wird eine E-Mail mit einem Anmeldelink an seine E-Mail-Adresse gesendet.   Confirm  Der Benutzer wird zur   weitergeleitet, wenn er auf einen Anmeldelink klickt. Confirm  Die Seite fordert den Benutzer auf, die E-Mail-Adresse zu bestätigen, die er bei der Anmeldung verwendet hat.   Profile  Nach der Bestätigung seiner E-Mail-Adresse wird der Benutzer zur   weitergeleitet. Profile  Der Benutzer kann auf der   auf die Schaltfläche „Abmelden“ klicken, um sich von seinem Konto abzumelden. Profile  Das endgültige   Verzeichnis enthält die folgenden Dateien: src   src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx  Schritt 4b – Bereinigen der React-Projektvorlage und Kopieren von Dateien aus dem Voraussetzungsprojekt  Sie können dieselben Dateien aus der React-Projektvorlage löschen, wie in Schritt 5b.1 des Leitfadens zu den Voraussetzungen beschrieben. Löschen Sie die folgenden Dateien aus Ihrem React-Projekt:   reportWebVitals.js   setupTests.js   logo.svg   index.css   App.css   App.test.js  Kopieren Sie   aus dem erforderlichen Projekt in Ihren neuen Projektordner. Dieses Handbuch verwendet dieselbe Datei. Wenn Sie   neu erstellen müssen, lesen Sie Schritt 5b.2 des Leitfadens zu den Voraussetzungen oder kopieren Sie den Codeblock unten. index.js index.js  Kopieren Sie   aus dem erforderlichen Projekt in Ihren neuen Projektordner. Dieses Handbuch verwendet dieselbe Datei. Wenn Sie   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   -Tag von   auf   oder einen anderen Titel aktualisieren, den Sie bevorzugen. Layout.jsx Layout.jsx <p> Layout.jsx React With Firebase Passwordless Authentication  Ihre   und   Dateien sollten wie folgt aussehen: index.js Layout.jsx   // 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  Schritt 4c – Erstellen  App.js  Die   Datei ist weitgehend dieselbe wie im vorausgesetzten Projekt, mit Änderungen in nur zwei Zeilen. Um das Erstellen der Datei zu erleichtern, kopieren Sie   aus dem erforderlichen Projekt in Ihren neuen Projektordner. App.js App.js  Löschen Sie die folgende   aus der Datei und ersetzen Sie sie wie unten gezeigt: import   // Delete this line: import Signup from "./Signup";   // Replace it with: import Confirm from "./Confirm";  Löschen Sie die folgende   aus der Datei und ersetzen Sie sie wie unten gezeigt: <Route>   // 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   Komponente wieder die Ausgangsroute der Anwendung ist, wie es beim vorausgesetzten Projekt der Fall war. Login  Schritt 4d – Erstellen von  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   Datei im   Verzeichnis. Login.jsx src  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 = "name@example.com" 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> ) }  Speichern Sie   . Login.jsx  Nach der Erfassung der E-Mail-Adresse des Benutzers sendet das   Formular über die   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   Objekt als Parameter an die   -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   angegebenen Route   zugeordnet. Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail App.js /confirm  Schritt 4e – Erstellen von   . Confirm.jsx    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   Parameter und der Wert von   muss mit der E-Mail-Adresse übereinstimmen, die der Benutzer bei der Anmeldung über das Anmeldeformular verwendet hat.   zeigt dem Benutzer ein Formular zur Bestätigung seiner E-Mail-Adresse an und versucht anschließend, den Benutzer anzumelden. signInWithEmailLink email email Confirm.jsx  Erstellen Sie eine neue Datei   im Verzeichnis   . Confirm.jsx 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 = "name@example.com" 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  Speichern Sie   . Confirm.jsx  Die Methode   prüft zunächst, ob der vom Benutzer verwendete Anmeldelink gültig ist. Wenn dies der Fall ist, wird die Methode   aufgerufen, um den Benutzer anzumelden. Um es noch einmal zu betonen: Der an die Methode   übergebene E-   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. isSignInWithEmailLink signInWithEmailLink signInWithEmailLink email  Schritt 4f – Erstellen von  Profile.jsx  Die letzte Komponente, die Sie erstellen werden, ist   . Benutzer werden zu dieser Komponente weitergeleitet, wenn sie sich erfolgreich über   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   weitergeleitet. Profile.jsx Confirm.jsx Login  Erstellen Sie eine neue   Datei im   Verzeichnis. Profile.jsx src  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  Speichern Sie   . Profile.jsx  Schritt 5 – Testen der Anwendung  Starten Sie die React-Anwendung:   npm start  Navigieren Sie in Ihrem Browser zu   , wenn Ihr Browser nicht automatisch startet. Sie sollten das   sehen.  locahost:3000 Login  Geben Sie die E-Mail-Adresse ein, mit der Sie sich anmelden möchten, und klicken Sie auf   . Wenn die Übermittlung erfolgreich war, wird eine Benachrichtigung angezeigt, dass eine E-Mail mit einem Anmeldelink an Ihre E-Mail-Adresse gesendet wurde.  „Senden“  Melden Sie sich bei Ihrem E-Mail-Konto an und suchen Sie nach der E-Mail mit dem Firebase-Anmeldelink. Die Betreffzeile sollte ähnlich wie   sein, wobei die 13-stellige Zahlenfolge die   Ihres Firebase-Projekts darstellt (siehe Schritt 3 dieser Anleitung). Im   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   weitergeleitet.  Sign in to project-1078604952662 messagingSenderId optionalen Confirm  Geben Sie im   die E-Mail-Adresse ein, die Sie bei der Anmeldung verwendet haben. Klicken Sie auf   . Wenn die Bestätigung erfolgreich ist, werden Sie zur   weitergeleitet.  Confirm Bestätigen Profile  Klicken Sie auf der   auf die Schaltfläche   , um sich abzumelden. Wenn die Abmeldung erfolgreich ist, werden Sie zum   zurückgeleitet. Profile „Abmelden“ Login  Die oben genannten Schritte erfassen den Workflow für die Anwendung.  Optional: Ändern Sie Ihren Projektnamen  Sie können Ihren Projektnamen ändern, sodass von Firebase gesendete Anmeldelink-E-Mails einen „benutzerfreundlichen“ Namen anstelle von beispielsweise   anzeigen. Melden Sie sich bei Ihrem   an und klicken Sie auf   . project-1078604952662 Firebase-Konto „Zur Konsole gehen“  Klicken Sie auf Ihr Authentifizierungsprojekt, das im Firebase-Projekt-Dashboard aufgeführt ist.  Klicken Sie im linken Bedienfeldmenü auf das Zahnradsymbol neben   . Die Registerkarte   sollte bereits ausgewählt sein. „Projektübersicht“ „Allgemein“  Scrollen Sie im Abschnitt   nach unten zur Option   . „Ihr Projekt“ „Öffentlich zugänglicher Name“  Klicken Sie auf das Stiftsymbol und ändern Sie Ihren Projektnamen wie gewünscht.  Klicken Sie auf   . In Ihren Anmeldelink-E-Mails wird nun der aktualisierte Projektname angezeigt. Speichern  Fazit und nächste Schritte  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   eingegebenen E-Mail-Adresse und Überprüfung der Existenz der E-Mail-Adresse auf der   . Wenn der Benutzer bei diesem Ansatz auf demselben Gerät, auf dem er auf die   zugegriffen hat, auf einen Anmeldelink klickt, muss er seine E-Mail-Adresse nicht erneut auf der   eingeben, da diese wiederhergestellt wird aus dem lokalen Speicher. Dies sorgt für ein noch reibungsloseres Benutzererlebnis. Login Confirm Login Confirm  Weitere Informationen zur passwortlosen Firebase-Authentifizierung finden Sie in der   . offiziellen Dokumentation

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Dieses Audio ist in der Originalsprache der Geschichte produziert!

So richten Sie die passwortlose Firebase-Authentifizierung mit einer React-Webanwendung ein

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps