Nenechávejte návštěvníky svého webu na holičkách – nechte je resetovat své heslo, pokud ho zapomněli.
Autentizační systémy hrají klíčovou roli při poskytování bezproblémové a bezpečné uživatelské zkušenosti. Pracovní postup ověřování obvykle zahrnuje dva procesy: přihlášení a přihlášení.
S rostoucím počtem online služeb si lidé vytvářejí účty a každý účet vyžaduje jedinečné přihlašovací údaje. To však usnadňuje zapomenutí nebo záměnu přihlašovacích údajů. K vyřešení tohoto problému by vaše aplikace měla implementovat funkci resetování hesla, která uživateli umožní pohodlně a bezpečně resetovat heslo.
Nastavte projekt React
Pracovní postup pro resetování hesla můžete implementovat různými způsoby – neexistuje univerzální standard, který by měla každá aplikace dodržovat. Místo toho byste měli zvolený přístup přizpůsobit tak, aby vyhovoval specifickým potřebám vaší aplikace.
Pracovní postup, o kterém se zde dozvíte, zahrnuje následující kroky:
Začít, rychle zavést projekt React. Dále nainstalujte Axios, knihovna požadavků HTTP JavaScriptu.
npm nainstalovat axiosZde najdete kód projektu úložiště GitHub.
Vytvořte přihlašovací komponentu
V adresáři src vytvořte nový komponenty/Login.js soubor a přidejte následující kód. Začněte definováním procesu resetování hesla:
import axios z"axios";
import Reagovat, { useState } z"reagovat";
import { useContext } z"reagovat";
import { RecoveryContext } z"../Aplikace";
import"./global.component.css";vývoznívýchozífunkcePřihlásit se() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState("");funkceodeslatOtp() {
-li (e-mail uživatele) {
axios.get(` http://localhost: 5000/kontrolní_e-mail? email=${userEmail}`).pak((Odezva) => {
-li (stav.odpověď 200) {
konst OTP = Matematika.podlaha(Matematika.random() * 9000 + 1000);
řídicí panel.log (OTP);
setOTP(OTP);
setEmail (uživatelský e-mail);
axios.post(" http://localhost: 5000/odeslat_e-mail", {
jednorázové heslo,
recipient_email: userEmail,
})
.pak(() => setPage("otp"))
.chytit(řídicí panel.log);
} jiný {
upozornění ("Uživatel s tímto e-mailem neexistuje!");
řídicí panel.log (response.data.message);
}}).chytit(řídicí panel.log);
} jiný {
upozornění ("Zadejte prosím svůj email");
}}
Tento kód vytvoří funkci, která odešle jednorázové heslo (OTP) na e-mailovou adresu uživatele. Nejprve ověří uživatele kontrolou jeho e-mailu v databázi před vygenerováním a odesláním OTP. Nakonec aktualizuje uživatelské rozhraní pomocí stránky OTP.
Dokončete přihlašovací komponentu přidáním kódu pro vykreslení přihlašovacího prvku formuláře JSX:
vrátit se (Přihlášení</h2>
Heslo:
"Heslo" />
Vytvořte komponentu OTP Verification
Chcete-li zajistit platnost kódu zadaného uživatelem, musíte jej porovnat s kódem zaslaným na jeho e-mail.
Vytvoř nový komponenty/OTPInput.js soubor a přidejte tento kód:
import Reagovat, { useState, useContext, useEffect } z"reagovat";
import { RecoveryContext } z"../Aplikace";
import axios z"axios";
import"./global.component.css";vývoznívýchozífunkceOTPInput() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funkceověřitOTP() {
-li (parseInt(OTPinput) otp) {
setPage("resetovat");
} jiný {
upozornění ("Kód, který jste zadali, není správný, zkuste znovu odeslat odkaz");
}
}
Kód vytváří komponentu React, kde uživatelé ověřují svůj OTP kód. Zkontroluje, zda se zadaný kód shoduje s kódem uloženým v kontextu objektu. Pokud je platné, zobrazí se stránka pro resetování hesla. Naopak zobrazuje výstrahu, která uživatele vyzve, aby to zkusil znovu nebo znovu odeslal jednorázové heslo.
Kód můžete zkontrolovat v tomto úložiště který implementuje funkci pro opětovné zasílání jednorázových hesel a časovač vypršení platnosti kódu OTP.
Nakonec vyrenderujte vstupní prvky JSX.
vrátit se (
Ověření e-mailem</h3>
Na váš e-mail jsme zaslali ověřovací kód.</p>
Vytvořte komponentu Reset Password Component
Vytvoř nový komponenty/Reset.js soubor a přidejte tento kód:
import Reagovat, {useState, useContext} z"reagovat";
import { RecoveryContext } z"../Aplikace";
import axios z"axios";
import"./global.component.css";vývoznívýchozífunkceResetovat() {
konst [heslo, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);funkcezměnit heslo() {
-li (Heslo) {
Snaž se {
axios.put(" http://localhost: 5000/aktualizace-hesla", {
email: email,
newPassword: heslo,
}).pak(() => setPage("přihlásit se"));vrátit se upozornění ("Heslo bylo úspěšně změněno, přihlaste se prosím!");
} chytit (chyba) {řídicí panel.log (chyba);}}
vrátit se upozornění ("Zadejte prosím své nové heslo");
}
vrátit se (Změnit heslo </h2>
Tento kód vykreslí formulář, který uživatelům umožňuje zadat nové heslo. Když uživatel klikne na odeslat, odešle serveru požadavek na aktualizaci hesla v databázi. Pokud je požadavek úspěšný, aktualizuje uživatelské rozhraní.
Aktualizujte svou komponentu App.js
Proveďte v souboru src/App.js následující změny:
import { useState, createContext } z"reagovat";
import Přihlásit se z"./components/Login";
import OTPInput z"./components/OTPInput";
import Resetovat z"./components/Reset";
import"./App.css";
vývozníkonst RecoveryContext = createContext();vývoznívýchozífunkceAplikace() {
konst [page, setPage] = useState("přihlásit se");
konst [e-mail, setEmail] = useState("");
konst [otp, setOTP] = useState("");funkceNavigateComponents() {
-li (strana "přihlásit se") vrátit se<Přihlásit se />;
-li (strana "otp") vrátit se<OTPInput />;
-li (strana "resetovat") vrátit se<Resetovat />;
}
vrátit se ("Záhlaví aplikace">
value={{ stránka, setPage, otp, setOTP, email, setEmail }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Tento kód definuje kontextový objekt, který spravuje stav aplikace, který zahrnuje e-mail uživatele, kód OTP a různé stránky v aplikaci. Objekt kontextu v podstatě umožňuje předávat požadované stavy mezi různými komponentami – alternativa k používání rekvizit.
Obsahuje také funkci, která snadno zvládá navigaci po stránkách, aniž by bylo nutné znovu vykreslovat celé komponenty.
Nastavte server Express.js
S nastavením klienta nakonfigurujte službu back-endového ověřování, aby zvládla funkci resetování hesla.
Začít, vytvořit expresní webový servera nainstalujte tyto balíčky:
npm install cors dotenv nodemailer mongooseDalší, vytvořit databázi MongoDB nebo nakonfigurujte cluster MongoDB v cloudu. Poté zkopírujte poskytnutý připojovací řetězec, vytvořte soubor ENV v kořenovém adresáři a vložte připojovací řetězec.
Chcete-li to dokončit, musíte nakonfigurovat připojení k databázi a definovat datové modely pro vaše uživatelská data. Použijte kód v tomto úložišti k nastavit připojení k databázi a definovat datové modely.
Definujte trasy API
Backendová služba má v ideálním případě několik cest, které zpracovávají požadavky HTTP klientů. V tomto případě budete muset definovat tři trasy, které budou spravovat požadavky API na odesílání e-mailů, ověřování e-mailů a aktualizaci hesla z klienta React.
Vytvořte nový soubor s názvem userRoutes.js v kořenovém adresáři a přidejte následující kód:
konst vyjádřit = vyžadovat('vyjádřit');
konst router = expres. Router();
konst userControllers = vyžadovat('../controllers/userControllers');router.get('/zkontrolovat email', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
router.post('/poslat e-mailem', userControllers.sendEmail);
modul.exports = router;
Ovladače pro trasy API
Kontroloři jsou zodpovědní za zpracování požadavků HTTP klientů. Jakmile klient zadá požadavek na určitou trasu API, je vyvolána a spuštěna funkce řadiče, která požadavek zpracuje a vrátí vhodnou odpověď.
Vytvoř nový controllers/userControllers.js soubor a přidejte kód níže.
Použijte kód v tomto úložišti k definovat řadiče pro ověření e-mailu a aktualizaci hesla API trasy.
Začněte definováním ovladače pro odesílání e-mailů:
exports.sendEmail = (req, req) => {
konst transporter = nodemailer.createTransport({
servis: 'gmail',
zajistit: skutečný,
auth: {
uživatel: process.env. MŮJ EMAIL,
pass: process.env. APP_PASSWORD,
},
});konst { email_příjemce, OTP } = req.body;
konst mailOptions = {
z: process.env. MŮJ EMAIL,
komu: recipient_email,
předmět: 'RESETOVAT HESLO',
html: `Obnova hesla</h2>
Použití tento OTP pro resetování hesla. Jednorázové heslo je platné pro1 minuta</p>
${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail (mailOptions, (chyba, informace) => {
-li (chyba) {
řídicí panel.log (chyba);
res.status(500).poslat({ zpráva: "Při odesílání e-mailu došlo k chybě" });
} jiný {
řídicí panel.log('Email odeslán: ' + info.odpověď);
res.status(200).poslat({ zpráva: "Email úspěšně odeslán" });
}
});
};
Tento kód definuje funkci, která používá Nodemailer k odeslání e-mailu s resetováním OTP určenému příjemci. Nastaví přepravce pomocí vašeho vlastního účtu Gmail a hesla.
Chcete-li získat heslo aplikace Gmail, musíte vygenerovat heslo aplikace v nastavení účtu Google. Toto heslo pak použijete místo svého běžného hesla k Gmailu pro ověření Nodemaileru.
Nakonfigurujte vstupní bod serveru
Vytvořte soubor server.js v kořenovém adresáři a přidejte tento kód:
konst vyjádřit = vyžadovat('vyjádřit');
konst kors = vyžadovat('cors');
konst app = express();
konst přístav = 5000;
vyžadovat('dotenv').config();
konst nodemailer = vyžadovat('nodemailer');
konst connectDB = vyžadovat('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ prodloužený: skutečný }));
app.use (cors());
konst userRoutes = vyžadovat('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (port, () => {
řídicí panel.log(`Server poslouchá na http://localhost:${port}`);
});
S nastavením klienta i serveru můžete spustit vývojové servery a otestovat funkčnost hesla.
Vytvoření vlastní služby pro resetování hesla
Vytvoření systému pro resetování hesla jeho přizpůsobením vaší aplikaci a jejím uživatelům je nejlepším přístupem, i když existují placená, předem připravená řešení. Při navrhování této funkce byste měli vzít v úvahu jak uživatelskou zkušenost, tak bezpečnost, protože útoky jsou stálou hrozbou.
