Lassen Sie Ihre Website-Besucher nicht im Stich – lassen Sie sie ihr Passwort zurücksetzen, wenn sie es vergessen haben.
Authentifizierungssysteme spielen eine entscheidende Rolle bei der Bereitstellung einer nahtlosen und sicheren Benutzererfahrung. Ein Authentifizierungs-Workflow umfasst normalerweise zwei Prozesse: Registrierung und Anmeldung.
Da die Anzahl der Online-Dienste zunimmt, erstellen Benutzer Konten, und für jedes Konto sind eindeutige Anmeldedaten erforderlich. Dies macht es jedoch leicht, Anmeldeinformationen zu vergessen oder zu verwechseln. Um dies zu beheben, sollte Ihre App eine Funktion zum Zurücksetzen des Passworts implementieren, mit der ein Benutzer sein Passwort bequem und sicher zurücksetzen kann.
Richten Sie das React-Projekt ein
Sie können einen Workflow zum Zurücksetzen von Passwörtern auf verschiedene Arten implementieren – es gibt keinen universellen Standard, dem jede Anwendung folgen sollte. Stattdessen sollten Sie den von Ihnen gewählten Ansatz an die spezifischen Anforderungen Ihrer Anwendung anpassen.
Der Arbeitsablauf, den Sie hier kennenlernen werden, umfasst die folgenden Schritte:
Um loszulegen, schnelles Bootstrapping eines React-Projekts. Als nächstes installieren Axios, eine JavaScript-HTTP-Anforderungsbibliothek.
npm installiert AxiosDarin finden Sie den Code des Projekts GitHub-Repository.
Erstellen Sie eine Anmeldekomponente
Erstellen Sie im src-Verzeichnis eine neue Komponenten/Login.js Datei und fügen Sie den folgenden Code hinzu. Beginnen Sie mit der Definition des Prozesses zum Zurücksetzen des Passworts:
importieren Axios aus"axios";
importieren Reagieren, { useState } aus"reagieren";
importieren { useContext } aus"reagieren";
importieren { Wiederherstellungskontext } aus"../App";
importieren"./global.component.css";ExportStandardFunktionAnmeldung() {
konst {setPage, setOTP, setEmail} = useContext (RecoveryContext);
konst [Benutzer-E-Mail, setBenutzer-E-Mail] = useState ("");FunktionsendOtp() {
Wenn (Benutzer Email) {
axios.get(` http://localhost: 5000/check_email? E-Mail=${userEmail}`).Dann((Antwort) => {
Wenn (Antwortstatus 200) {
konst OTP = Mathematik.Boden(Mathematik.willkürlich() * 9000 + 1000);
Konsole.log (OTP);
setOTP(OTP);
setEmail (Benutzer-E-Mail);
axios.post(" http://localhost: 5000/send_email", {
OTP,
Empfänger-E-Mail: Benutzer-E-Mail,
})
.Dann(() => setPage("otp"))
.fangen(Konsole.Protokoll);
} anders {
Alarm("Benutzer mit dieser E-Mail existiert nicht!");
Konsole.log (Antwort.Daten.Nachricht);
}}).fangen(Konsole.Protokoll);
} anders {
Alarm("Bitte geben Sie ihre E-Mail-Adresse ein");
}}
Dieser Code erstellt eine Funktion, die ein Einmalkennwort (OTP) an die E-Mail-Adresse eines Benutzers sendet. Es verifiziert zunächst den Benutzer, indem es seine E-Mail in der Datenbank überprüft, bevor das OTP generiert und gesendet wird. Schließlich aktualisiert es die Benutzeroberfläche mit der OTP-Seite.
Vervollständigen Sie die Anmeldekomponente, indem Sie Code hinzufügen, um das Anmelde-JSX-Formularelement zu rendern:
zurückkehren (Anmeldung</h2>
Passwort:
"Passwort" />
Erstellen Sie eine OTP-Verifizierungskomponente
Um die Gültigkeit eines von einem Benutzer eingegebenen Codes sicherzustellen, müssen Sie ihn mit dem an seine E-Mail gesendeten Code vergleichen.
Erstelle eine neue components/OTPInput.js Datei und füge diesen Code hinzu:
importieren Reagieren, { useState, useContext, useEffect } aus"reagieren";
importieren { Wiederherstellungskontext } aus"../App";
importieren Axios aus"axios";
importieren"./global.component.css";ExportStandardFunktionOTP-Eingabe() {
konst { E-Mail, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
FunktionverifizierenOTP() {
Wenn (parseInt(OTP-Eingabe) otp) {
setPage("zurücksetzen");
} anders {
Alarm("Der eingegebene Code ist nicht korrekt, versuchen Sie es erneut, senden Sie den Link erneut.");
}
}
Der Code erstellt eine React-Komponente, in der Benutzer ihren OTP-Code überprüfen. Es prüft, ob der eingegebene Code mit dem im Kontextobjekt hinterlegten übereinstimmt. Wenn es gültig ist, wird die Seite zum Zurücksetzen des Passworts angezeigt. Umgekehrt zeigt es eine Warnung an, die den Benutzer auffordert, es erneut zu versuchen oder das OTP erneut zu senden.
Sie können den Code darin überprüfen Repository das eine Funktion zum erneuten Senden von OTPs und einen Ablauftimer für den OTP-Code implementiert.
Rendern Sie schließlich die eingegebenen JSX-Elemente.
zurückkehren (
E-Mail-Bestätigung</h3>
Wir haben einen Bestätigungscode an Ihre E-Mail gesendet.</p>
Erstellen Sie die Komponente „Kennwort zurücksetzen“.
Erstelle eine neue Komponenten/Reset.js Datei und füge diesen Code hinzu:
importieren Reagieren, {useState, useContext} aus"reagieren";
importieren { Wiederherstellungskontext } aus"../App";
importieren Axios aus"axios";
importieren"./global.component.css";ExportStandardFunktionZurücksetzen() {
konst [Passwort, setPassword] = useState("");
konst {setPage, email} = useContext (RecoveryContext);FunktionKennwort ändern() {
Wenn (Passwort) {
versuchen {
axios.put(" http://localhost: 5000/Update-Passwort", {
Email Email,
neuesPasswort: Passwort,
}).Dann(() => setPage("Anmeldung"));zurückkehren Alarm("Passwort erfolgreich geändert, bitte anmelden!");
} fangen (Fehler) {Konsole.log (Fehler);}}
zurückkehren Alarm("Bitte geben Sie Ihr neues Passwort ein");
}
zurückkehren (Passwort ändern </h2>
Dieser Code rendert ein Formular, das es Benutzern ermöglicht, ein neues Passwort einzugeben. Wenn der Benutzer auf Senden klickt, wird eine Anfrage an den Server gesendet, um sein Passwort in der Datenbank zu aktualisieren. Es aktualisiert dann die Benutzeroberfläche, wenn die Anfrage erfolgreich ist.
Aktualisieren Sie Ihre App.js-Komponente
Nehmen Sie die folgenden Änderungen an Ihrer src/App.js-Datei vor:
importieren { useState, createContext } aus"reagieren";
importieren Anmeldung aus"./komponenten/Login";
importieren OTP-Eingabe aus"./components/OTPInput";
importieren Zurücksetzen aus"./Komponenten/Zurücksetzen";
importieren"./App.css";
Exportkonst RecoveryContext = createContext();ExportStandardFunktionApp() {
konst [Seite, setPage] = useState("Anmeldung");
konst [E-Mail, setE-Mail] = useState("");
konst [otp, setOTP] = useState("");FunktionKomponenten navigieren() {
Wenn (Buchseite "Anmeldung") zurückkehren<Anmeldung />;
Wenn (Buchseite "otp") zurückkehren<OTP-Eingabe />;
Wenn (Buchseite "zurücksetzen") zurückkehren<Zurücksetzen />;
}
zurückkehren ("App-Header">
value={{ page, setPage, otp, setOTP, email, setEmail }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Dieser Code definiert ein Kontextobjekt, das den Status der App verwaltet, einschließlich der E-Mail des Benutzers, des OTP-Codes und der verschiedenen Seiten innerhalb der App. Im Wesentlichen ermöglicht das Kontextobjekt, die erforderlichen Zustände zwischen verschiedenen Komponenten zu übergeben – eine Alternative zur Verwendung von Props.
Es enthält auch eine Funktion, die die Seitennavigation mit Leichtigkeit handhabt, ohne dass ganze Komponenten neu gerendert werden müssen.
Richten Sie einen Express.js-Server ein
Konfigurieren Sie mit dem Client-Setup einen Back-End-Authentifizierungsdienst, um die Funktionalität zum Zurücksetzen des Kennworts zu handhaben.
Um loszulegen, Erstellen Sie einen Express-Webserver, und installieren Sie diese Pakete:
npm installiere cors dotenv nodemailer mongooseNächste, Erstellen Sie eine MongoDB-Datenbank oder Konfigurieren Sie einen MongoDB-Cluster in der Cloud. Kopieren Sie dann die bereitgestellte Verbindungszeichenfolge, erstellen Sie eine ENV-Datei im Stammverzeichnis und fügen Sie die Verbindungszeichenfolge ein.
Zum Abschluss müssen Sie die Datenbankverbindung konfigurieren und die Datenmodelle für Ihre Benutzerdaten definieren. Verwenden Sie den Code in diesem Repository, um Datenbankverbindung einrichten Und Definieren Sie die Datenmodelle.
Definieren Sie die API-Routen
Ein Back-End-Dienst verfügt idealerweise über mehrere Routen, die die HTTP-Anforderungen der Clients verarbeiten. In diesem Fall müssen Sie drei Routen definieren, die die API-Anforderungen zum Senden von E-Mails, zur E-Mail-Überprüfung und zum Aktualisieren des Passworts vom React-Client verwalten.
Erstellen Sie eine neue Datei namens userRoutes.js im Stammverzeichnis und fügen Sie den folgenden Code hinzu:
konst ausdrücken = erfordern('äußern');
konst Router = Express. Router();
konst userControllers = erfordern('../controllers/userControllers');router.get('/E-Mail überprüfen', userControllers.checkEmail);
router.put('/Kennwort aktualisieren', userControllers.updatePassword);
router.post('/E-Mail senden', userControllers.sendEmail);
Modul.exports = Router;
Controller für die API-Routen
Controller sind für die Verarbeitung der HTTP-Anforderungen von Clients verantwortlich. Sobald ein Client eine Anfrage an eine bestimmte API-Route stellt, wird eine Controller-Funktion aufgerufen und ausgeführt, um die Anfrage zu verarbeiten und eine entsprechende Antwort zurückzugeben.
Erstelle eine neue controllers/userControllers.js Datei und fügen Sie den folgenden Code hinzu.
Verwenden Sie den Code in diesem Repository, um Definieren Sie Controller für die E-Mail-Verifizierung und das Update-Passwort API-Routen.
Beginnen Sie mit der Definition des E-Mail-Sendecontrollers:
exports.sendEmail = (erforderlich, res) => {
konst transporter = nodemailer.createTransport({
Service: "gmail",
sicher: WAHR,
Authentifizierung: {
Benutzer: process.env. MEINE E-MAIL,
übergeben: process.env. APP_PASSWORT,
},
});konst { empfänger_email, OTP } = req.body;
konst mailOptions = {
aus: process.env. MEINE E-MAIL,
an: Empfänger_E-Mail,
Thema: 'PASSWORT ZURÜCKSETZEN',
html: `Passwortwiederherstellung</h2>
Verwenden Das OTP, um Ihr Passwort zurückzusetzen. OTP ist gültig für1 Minute</p>
${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail (mailOptions, (Fehler, Info) => {
Wenn (Fehler) {
Konsole.log (Fehler);
res.status(500).schicken({ Nachricht: "Beim Senden der E-Mail ist ein Fehler aufgetreten" });
} anders {
Konsole.Protokoll('E-Mail gesendet: ' + info.antwort);
res.status(200).schicken({ Nachricht: "Email wurde erfolgreich Versendet" });
}
});
};
Dieser Code definiert eine Funktion, die Nodemailer verwendet, um eine E-Mail mit einem OTP-Reset an einen bestimmten Empfänger zu senden. Es richtet einen Transporter mit Ihrem eigenen Gmail-Konto und Passwort ein.
Um Ihr Gmail-App-Passwort zu erhalten, müssen Sie Generieren Sie in Ihren Google-Kontoeinstellungen ein App-Passwort. Sie verwenden dieses Passwort dann anstelle Ihres regulären Gmail-Passworts, um den Nodemailer zu authentifizieren.
Konfigurieren Sie den Server-Einstiegspunkt
Erstellen Sie eine server.js-Datei im Stammverzeichnis und fügen Sie diesen Code hinzu:
konst ausdrücken = erfordern('äußern');
konst Kors = erfordern('kors');
konst app = ausdrücken ();
konst Hafen = 5000;
erfordern('dotenv').config();
konst Knotenmailer = erfordern('Knotenmailer');
konst connectDB = erfordern('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ erweitert: WAHR }));
app.use (cors());
konst userRoutes = erfordern('./routes/userRoutes');
app.use('/', Benutzerrouten);
app.listen (port, () => {
Konsole.Protokoll(`Server lauscht http://localhost:${port}`);
});
Wenn sowohl der Client als auch der Server eingerichtet sind, können Sie die Entwicklungsserver ausführen, um die Kennwortfunktionalität zu testen.
Erstellen eines benutzerdefinierten Kennwortzurücksetzungsdienstes
Das Erstellen eines Passwortrücksetzungssystems durch Anpassen an Ihre Anwendung und ihre Benutzer ist der beste Ansatz, auch wenn es kostenpflichtige, vorgefertigte Lösungen gibt. Beim Entwerfen dieser Funktion sollten Sie sowohl die Benutzererfahrung als auch die Sicherheit berücksichtigen, da Angriffe eine ständige Bedrohung darstellen.
