Nenechajte návštevníkov svojich stránok visieť – nechajte ich obnoviť si heslo, ak ho zabudli.
Autentifikačné systémy zohrávajú kľúčovú úlohu pri poskytovaní bezproblémovej a bezpečnej používateľskej skúsenosti. Pracovný postup overovania zvyčajne zahŕňa dva procesy: registráciu a prihlásenie.
S rastúcim počtom online služieb si ľudia vytvárajú účty a každý účet vyžaduje jedinečné prihlasovacie údaje. To však uľahčuje zabudnutie alebo zámenu prihlasovacích údajov. Aby ste to vyriešili, vaša aplikácia by mala implementovať funkciu obnovenia hesla, ktorá používateľovi umožní pohodlne a bezpečne obnoviť heslo.
Nastavte projekt React
Pracovný postup obnovenia hesla môžete implementovať rôznymi spôsobmi – neexistuje univerzálny štandard, ktorý by mala dodržiavať každá aplikácia. Namiesto toho by ste mali prispôsobiť zvolený prístup tak, aby vyhovoval špecifickým potrebám vašej aplikácie.
Pracovný postup, o ktorom sa tu dozviete, zahŕňa nasledujúce kroky:
Začať, rýchlo spustite projekt React. Ďalej nainštalujte Axios, knižnica požiadaviek HTTP JavaScript.
npm nainštalujte axiosTu nájdete kód projektu úložisko GitHub.
Vytvorte prihlasovací komponent
V adresári src vytvorte nový komponenty/Login.js súbor a pridajte nasledujúci kód. Začnite definovaním procesu obnovenia hesla:
importovať axios od"axios";
importovať Reagovať, { useState } od"reagovať";
importovať { useContext } od"reagovať";
importovať { RecoveryContext } od"../App";
importovať"./global.component.css";exportpredvolenáfunkciuPrihlásiť sa() {
konšt { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konšt [userEmail, setUserEmail] = useState("");funkciusendOtp() {
ak (e-mail používateľa) {
axios.get(` http://localhost: 5000/kontrolný_e-mail? email=${userEmail}`).potom((odpoveď) => {
ak (odpoveď.stav 200) {
konšt OTP = Matematika.poschodie(Matematika.random() * 9000 + 1000);
konzoly.log (OTP);
setOTP(OTP);
setEmail (e-mail používateľa);
axios.post(" http://localhost: 5000/odoslať_e-mail", {
jednorazové heslo,
recipient_email: userEmail,
})
.potom(() => setPage("otp"))
.catch(konzoly.log);
} inak {
upozornenie ("Používateľ s týmto e-mailom neexistuje!");
konzoly.log (response.data.message);
}}).catch(konzoly.log);
} inak {
upozornenie ("Zadajte svoj e-mail");
}}
Tento kód vytvára funkciu, ktorá odosiela jednorazové heslo (OTP) na e-mailovú adresu používateľa. Najprv overí používateľa kontrolou jeho e-mailu v databáze pred vygenerovaním a odoslaním OTP. Nakoniec aktualizuje používateľské rozhranie pomocou stránky OTP.
Dokončite prihlasovací komponent pridaním kódu na vykreslenie prvku formulára prihlasovacieho JSX:
vrátiť (Prihlásenie</h2>
heslo:
"heslo" />
Vytvorte komponent overenia OTP
Ak chcete zabezpečiť platnosť kódu zadaného používateľom, musíte ho porovnať s kódom zaslaným na jeho e-mail.
Vytvorte nový komponenty/OTPInput.js súbor a pridajte tento kód:
importovať Reaguj, { useState, useContext, useEffect } od"reagovať";
importovať { RecoveryContext } od"../App";
importovať axios od"axios";
importovať"./global.component.css";exportpredvolenáfunkciuOTPInput() {
konšt { email, otp, setPage } = useContext (RecoveryContext);
konšt [OTPinput, setOTPinput] = useState( "");
funkciuoveriťOTP() {
ak (parseInt(OTPinput) otp) {
setPage("resetovať");
} inak {
upozornenie ("Kód, ktorý ste zadali nie je správny, skúste znova odoslať odkaz");
}
}
Kód vytvára komponent React, kde používatelia overujú svoj OTP kód. Skontroluje, či sa zadaný kód zhoduje s kódom uloženým v objekte kontextu. Ak je platné, zobrazí sa stránka na obnovenie hesla. Naopak, zobrazuje upozornenie, ktoré používateľa vyzve, aby to skúsil znova alebo znova odoslal jednorazové heslo.
V tomto môžete skontrolovať kód Úložisko ktorý implementuje funkciu na opätovné odosielanie jednorazových hesiel a časovač vypršania platnosti kódu OTP.
Nakoniec vyrenderujte vstupné prvky JSX.
vrátiť (
Overenie e-mailom</h3>
Na váš e-mail sme poslali overovací kód.</p>
Vytvorte komponent na obnovenie hesla
Vytvorte nový komponenty/Reset.js súbor a pridajte tento kód:
importovať Reaguj, {useState, useContext} od"reagovať";
importovať { RecoveryContext } od"../App";
importovať axios od"axios";
importovať"./global.component.css";exportpredvolenáfunkciuResetovať() {
konšt [heslo, setPassword] = useState("");
konšt { setPage, email } = useContext (RecoveryContext);funkciuzmeniť heslo() {
ak (heslo) {
skúste {
axios.put(" http://localhost: 5000/aktualizácia hesla", {
email: email,
newPassword: heslo,
}).potom(() => setPage("Prihlásiť sa"));vrátiť upozornenie ("Heslo sa úspešne zmenilo, prihláste sa!");
} chytiť (chyba) {konzoly.log (chyba);}}
vrátiť upozornenie ("Zadajte svoje nové heslo");
}
vrátiť (Zmeniť heslo </h2>
Tento kód vykreslí formulár, ktorý umožňuje používateľom zadať nové heslo. Keď používateľ klikne na odoslať, odošle serveru požiadavku na aktualizáciu hesla v databáze. Potom aktualizuje používateľské rozhranie, ak je požiadavka úspešná.
Aktualizujte svoj komponent App.js
Vykonajte nižšie uvedené zmeny vo svojom súbore src/App.js:
importovať { useState, createContext } od"reagovať";
importovať Prihlásiť sa od"./components/Login";
importovať OTPInput od"./components/OTPInput";
importovať Resetovať od"./components/Reset";
importovať"./App.css";
exportkonšt RecoveryContext = createContext();exportpredvolenáfunkciuApp() {
konšt [page, setPage] = useState("Prihlásiť sa");
konšt [email, setEmail] = useState("");
konšt [otp, setOTP] = useState("");funkciuNavigovať Komponenty() {
ak (strana "Prihlásiť sa") vrátiť<Prihlásiť sa />;
ak (strana "otp") vrátiť<OTPInput />;
ak (strana "resetovať") vrátiť<Resetovať />;
}
vrátiť ("Hlavička aplikácie">
value={{ page, setPage, otp, setOTP, email, setEmail }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Tento kód definuje kontextový objekt, ktorý spravuje stav aplikácie, ktorý zahŕňa e-mail používateľa, kód OTP a rôzne stránky v rámci aplikácie. Kontextový objekt v podstate umožňuje odovzdávať požadované stavy medzi rôznymi komponentmi – alternatíva k používaniu rekvizít.
Obsahuje tiež funkciu, ktorá s ľahkosťou zvláda navigáciu po stránkach bez potreby opätovného vykresľovania celých komponentov.
Nastavte server Express.js
S nastavením klienta nakonfigurujte službu koncovej autentifikácie na spracovanie funkcie obnovenia hesla.
Začať, vytvorte expresný webový servera nainštalujte tieto balíčky:
npm install cors dotenv nodemailer mongooseĎalšie, vytvorte databázu MongoDB alebo nakonfigurovať klaster MongoDB v cloude. Potom skopírujte poskytnutý reťazec pripojenia, vytvorte súbor ENV v koreňovom adresári a prilepte reťazec pripojenia.
Na dokončenie musíte nakonfigurovať pripojenie k databáze a definovať dátové modely pre vaše užívateľské dáta. Použite kód v tomto úložisku na nastaviť pripojenie k databáze a definovať dátové modely.
Definujte trasy API
Backendová služba má v ideálnom prípade niekoľko ciest, ktoré spracovávajú HTTP požiadavky klientov. V tomto prípade budete musieť definovať tri trasy, ktoré budú spravovať požiadavky na odosielanie e-mailov, overovanie e-mailov a aktualizácie hesla z klienta React.
Vytvorte nový súbor s názvom userRoutes.js v koreňovom adresári a pridajte nasledujúci kód:
konšt vyjadriť = vyžadovať('expresné');
konšt router = expres. Router();
konšt userControllers = vyžadovať('../controllers/userControllers');router.get('/check_email', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
router.post('/poslať email', userControllers.sendEmail);
modul.export = router;
Ovládače pre trasy API
Kontrolóri sú zodpovední za spracovanie požiadaviek HTTP klientov. Akonáhle klient zadá požiadavku na konkrétnu trasu API, vyvolá sa a spustí funkcia kontroléra, ktorá spracuje požiadavku a vráti príslušnú odpoveď.
Vytvorte nový controllers/userControllers.js súbor a pridajte kód nižšie.
Použite kód v tomto úložisku na definovať ovládače pre overenie e-mailu a aktualizovať heslo API trasy.
Začnite definovaním ovládača odosielania e-mailov:
exports.sendEmail = (req, req) => {
konšt transportér = nodemailer.createTransport({
služba: 'gmail',
zabezpečiť: pravda,
auth: {
užívateľ: process.env. MÔJ EMAIL,
pass: process.env. APP_PASSWORD,
},
});konšt { recipient_email, OTP } = req.body;
konšt mailOptions = {
od: process.env. MÔJ EMAIL,
komu: recipient_email,
predmet: 'RESETOVANIE HESLA',
html: `Obnova hesla</h2>
Použite toto OTP na obnovenie hesla. Jednorazové heslo je platné pre1 minúta</p>
${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail (mailOptions, (chyba, info) => {
ak (chyba) {
konzoly.log (chyba);
res.status(500).odoslať({ správu: "Pri odosielaní e-mailu sa vyskytla chyba" });
} inak {
konzoly.log('Email odoslaný: ' + info.reakcia);
res.status(200).odoslať({ správu: "E-mail bol úspešne odoslaný" });
}
});
};
Tento kód definuje funkciu, ktorá používa Nodemailer na odoslanie e-mailu s resetovaním OTP určenému príjemcovi. Nastaví transportér pomocou vášho vlastného účtu Gmail a hesla.
Ak chcete získať heslo aplikácie Gmail, musíte to urobiť vygenerujte heslo aplikácie v nastaveniach účtu Google. Toto heslo potom použijete namiesto svojho bežného hesla služby Gmail na overenie Nodemailera.
Nakonfigurujte vstupný bod servera
Vytvorte súbor server.js v koreňovom adresári a pridajte tento kód:
konšt vyjadriť = vyžadovať('expresné');
konšt kors = vyžadovať('cors');
konšt app = express();
konšt prístav = 5000;
vyžadovať('dotenv').config();
konšt nodemailer = vyžadovať('nodemailer');
konšt pripojiťDB = vyžadovať('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ predĺžený: pravda }));
app.use (cors());
konšt userRoutes = vyžadovať('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (port, () => {
konzoly.log(`Server počúva na http://localhost:${port}`);
});
Po nastavení klienta aj servera môžete spustiť vývojové servery na testovanie funkčnosti hesla.
Vytvorenie vlastnej služby na obnovenie hesla
Vytvorenie systému obnovenia hesla jeho prispôsobením vašej aplikácii a jej používateľom je najlepším prístupom, aj keď existujú platené, vopred pripravené riešenia. Pri navrhovaní tejto funkcie by ste mali brať do úvahy používateľskú skúsenosť aj bezpečnosť, keďže útoky sú neustálou hrozbou.