Non lasciare i visitatori del tuo sito in sospeso: lascia che reimpostino la password se l'hanno dimenticata.

I sistemi di autenticazione svolgono un ruolo cruciale nel fornire un'esperienza utente senza problemi e sicura. Un flusso di lavoro di autenticazione prevede in genere due processi: iscrizione e accesso.

Con l'aumentare del numero di servizi online, le persone creano account e ogni account richiede credenziali di accesso univoche. Tuttavia, questo rende facile dimenticare o confondere le credenziali di accesso. Per risolvere questo problema, la tua app dovrebbe implementare una funzione di reimpostazione della password che consenta a un utente di reimpostare la propria password in modo comodo e sicuro.

Imposta il progetto React

Puoi implementare un flusso di lavoro per la reimpostazione della password in vari modi: non esiste uno standard universale che ogni applicazione dovrebbe seguire. Invece, dovresti adattare l'approccio che scegli per soddisfare le esigenze specifiche della tua applicazione.

instagram viewer

Il flusso di lavoro che imparerai qui include i seguenti passaggi:

Per iniziare, avviare rapidamente un progetto React. Quindi, installa Axios, una libreria di richieste HTTP JavaScript.

npm installa axios

Puoi trovare il codice del progetto in questo Deposito GitHub.

Crea un componente di accesso

Nella directory src, crea un nuovo file componenti/Login.js file e aggiungere il seguente codice. Inizia definendo il processo di reimpostazione della password:

importare assios da"assio";
importare Reagisci, { useState } da"reagire";
importare { usoContesto } da"reagire";
importare { RecoveryContext } da"../App";
importare"./global.component.css";
esportarepredefinitofunzioneLogin() {
cost { setPage, setOTP, setEmail } = useContext (RecoveryContext);
cost [userEmail, setUserEmail] = useState(""); 


funzionesendOtp() {
Se (userEmail) {
 axios.get(` http://localhost: 5000/check_email? e-mail=${userEmail}`).Poi((risposta) => {
Se (risposta.stato 200) {
cost OTP = Matematica.pavimento(Matematica.casuale() * 9000 + 1000);
consolare.log (OTP);
 impostaOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/invio_e-mail", {
 OTP,
 recipient_email: userEmail,
 })
 .Poi(() => setPagina("ottimo"))
 .presa(consolare.tronco d'albero);
 } altro {
 mettere in guardia("L'utente con questa email non esiste!");
consolare.log (response.data.message);
 }}).presa(consolare.tronco d'albero);
 } altro {
 mettere in guardia("Inserisci la tua email");
 }}

Questo codice crea una funzione che invia una password monouso (OTP) all'indirizzo e-mail di un utente. Innanzitutto verifica l'utente controllando la sua e-mail nel database prima di generare e inviare l'OTP. Infine, aggiorna l'interfaccia utente con la pagina OTP.

Completa il componente di accesso aggiungendo il codice per eseguire il rendering dell'elemento del modulo JSX di accesso:

ritorno (


Accedi</h2>







 E-mail: 
"e-mail" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />


 Parola d'ordine:
"parola d'ordine" />

Crea un componente di verifica OTP

Per garantire la validità di un codice inserito da un utente, è necessario confrontarlo con il codice inviato alla sua e-mail.

Crea un nuovo componenti/OTPInput.js file e aggiungi questo codice:

importare Reagire, {useState, useContext, useEffect} da"reagire";
importare { RecoveryContext } da"../App";
importare assios da"assio";
importare"./global.component.css";
esportarepredefinitofunzioneIngresso OTP() {
cost { email, otp, setPage } = useContext (RecoveryContext);
cost [OTPinput, setOTPinput] = useState( "");
funzioneverificaOTP() {
Se (parseInt(OTPinput) otp) {
 setPagina("Ripristina");
 } altro {
 mettere in guardia("Il codice che hai inserito non è corretto, riprova invia nuovamente il link");
 }
 }

Il codice crea un componente React in cui gli utenti verificano il proprio codice OTP. Controlla che il codice inserito corrisponda a quello memorizzato nell'oggetto contesto. Se è valido, visualizza la pagina di reimpostazione della password. Al contrario, mostra un avviso che richiede all'utente di riprovare o inviare nuovamente l'OTP.

Puoi controllare il codice in questo deposito che implementa una funzione per il rinvio delle OTP e un timer di scadenza per il codice OTP.

Infine, esegui il rendering degli elementi JSX di input.

ritorno (


Verifica e-mail</h3>




Abbiamo inviato un codice di verifica alla tua email.</p>




"testo" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} />

Creare il componente Reimposta password

Crea un nuovo componenti/Reset.js file e aggiungi questo codice:

importare Reagisci, {useState, useContext} da"reagire";
importare { RecoveryContext } da"../App";
importare assios da"assio";
importare"./global.component.css";
esportarepredefinitofunzioneRipristina() {
cost [password, impostapassword] = useState("");
cost { setPage, email } = useContext (RecoveryContext);


funzionecambiare la password() {
Se (parola d'ordine) {
Tentativo {
 axios.put(" http://localhost: 5000/aggiorna-password", {
 e-mail: e-mail,
 nuovaPassword: password,
 }).Poi(() => setPagina("login"));


ritorno mettere in guardia("Password modificata con successo, effettua il login!");
 } presa (errore) {consolare.log (errore);}}
ritorno mettere in guardia("Inserisci la tua nuova password");
 }
ritorno (


 Cambia password </h2>






 Nuova password: 
 tipo="parola d'ordine"
 segnaposto="..."
 richiesto=""
 valore={password}
 onChange={(e) => setPassword (e.target.value)} />

Questo codice esegue il rendering di un modulo che consente agli utenti di inserire una nuova password. Quando l'utente fa clic su Invia, invierà una richiesta al server per aggiornare la propria password nel database. Quindi aggiornerà l'interfaccia utente se la richiesta ha esito positivo.

Aggiorna il tuo componente App.js

Apporta le modifiche seguenti al tuo file src/App.js:

importare {usaStato, creaContesto} da"reagire";
importare Login da"./componenti/Accesso";
importare Ingresso OTP da"./componenti/OTPInput";
importare Ripristina da"./componenti/Ripristina";
importare"./App.css";
esportarecost RecoveryContext = createContext();
esportarepredefinitofunzioneApp() {
cost [pagina, setPagina] = useState("login");
cost [email, setEmail] = useState("");
cost [otp, setOTP] = useState("");


funzioneNavigaComponenti() {
Se (pagina "login") ritorno<Login />;
Se (pagina "ottimo") ritorno<Ingresso OTP />;
Se (pagina "Ripristina") ritorno<Ripristina />;
 }
ritorno (
"Intestazione app"> 
 value={{ page, setPage, otp, setOTP, email, setEmail }}>



 </div>
 </RecoveryContext.Provider>
 </div>
 );
}

Questo codice definisce un oggetto di contesto che gestisce lo stato dell'app, che include l'e-mail dell'utente, il codice OTP e le varie pagine all'interno dell'app. Essenzialmente, l'oggetto contesto rende possibile passare gli stati richiesti tra diversi componenti, un'alternativa all'uso di oggetti di scena.

Include anche una funzione che gestisce la navigazione della pagina con facilità senza dover eseguire nuovamente il rendering di interi componenti.

Configura un server Express.js

Con la configurazione del client, configurare un servizio di autenticazione back-end per gestire la funzionalità di reimpostazione della password.

Per iniziare, creare un server web Expresse installa questi pacchetti:

npm install cors dotenv nodemailer mangusta

Prossimo, creare un database MongoDB O configurare un cluster MongoDB sul cloud. Copiare quindi la stringa di connessione fornita, creare un file ENV nella directory radice e incollare la stringa di connessione.

Per finire, è necessario configurare la connessione al database e definire i modelli di dati per i dati utente. Usa il codice in questo repository per impostare la connessione al database E definire i modelli di dati.

Definire le rotte API

Un servizio di backend ha idealmente diverse route che gestiscono le richieste HTTP dei client. In questo caso, dovrai definire tre percorsi che gestiranno le richieste API di invio e-mail, verifica e-mail e aggiornamento password dal client React.

Crea un nuovo file chiamato userRoutes.js nella directory principale e aggiungi il seguente codice:

cost espresso = richiedere('esprimere');
cost router = espresso. Router();
cost userController = richiedere('../controller/userController');
router.get('/controllare la posta elettronica', userControllers.checkEmail);
router.put('/aggiorna-password', userControllers.updatePassword);
router.post('/invia una email', userControllers.sendEmail);
modulo.exports = router;

Controller per le route API

I controller sono responsabili dell'elaborazione delle richieste HTTP dei client. Una volta che un client effettua una richiesta a un particolare percorso API, una funzione del controller viene richiamata ed eseguita per elaborare la richiesta e restituire una risposta appropriata.

Crea un nuovo controller/userControllers.js file e aggiungere il codice qui sotto.

Usa il codice in questo repository per definire i controller per la verifica dell'e-mail e l'aggiornamento della password Percorsi API.

Inizia definendo il controller di posta elettronica di invio:

exports.sendEmail = (richiesta, ris) => {
cost trasportatore = nodemailer.createTransport({
 servizio: 'gmail',
 sicuro: VERO,
 aut: {
 utente: processo.env. LA MIA EMAIL,
 passare: process.env. APP_PASSWORD,
 },
 });
cost { recipient_email, OTP } = req.body;


cost mailOpzioni = {
da: processo.env. LA MIA EMAIL,
 a: email_destinatario,
 soggetto: 'REIMPOSTAZIONE DELLA PASSWORD',
 HTML: `


Recupero password</h2>




Utilizzo Questo OTP per reimpostare la password. OTP è valido per1 minuto</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (errore, info) => {
Se (errore) {
consolare.log (errore);
 res.stato(500).Inviare({ Messaggio: "C'è stato un errore durante l'invio della email" });
 } altro {
consolare.tronco d'albero('Email inviata: ' + info.risposta);
 res.stato(200).Inviare({ Messaggio: "Email inviata correttamente" });
 }
 });
};

Questo codice definisce una funzione che utilizza Nodemailer per inviare un'e-mail con un ripristino OTP a un destinatario specificato. Imposta un trasportatore utilizzando il tuo account Gmail e la tua password.

Per ottenere la password dell'app Gmail, è necessario generare una password per l'app nelle impostazioni del tuo account Google. Utilizzerai quindi questa password al posto della tua normale password Gmail per autenticare Nodemailer.

Configurare il punto di ingresso del server

Crea un file server.js nella directory principale e aggiungi questo codice:

cost espresso = richiedere('esprimere');
cost cor = richiedere('cor');
cost app = espresso();
cost porto = 5000;
richiedere('dotenv'.config();
cost nodemailer = richiedere('nodemailer');
cost connectDB = richiedere('./utils/dbconfig');
connettiDB();
app.use (express.json());
app.use (express.urlencoded({ esteso: VERO }));
app.use(cors());
cost userRoute = richiedere('./percorsi/percorsi utente');
app.use('/', userRoute);
app.listen (porta, () => {
consolare.tronco d'albero(`Il server è in ascolto http://localhost:${porta}`);
});

Con il client e il server configurati, è possibile eseguire i server di sviluppo per testare la funzionalità della password.

Creazione di un servizio di reimpostazione password personalizzato

Creare un sistema di reimpostazione della password adattandolo alla tua applicazione e ai suoi utenti è l'approccio migliore, anche se esistono soluzioni predefinite a pagamento. Durante la progettazione di questa funzionalità, è necessario tenere conto sia dell'esperienza dell'utente che della sicurezza, poiché gli attacchi sono una minaccia costante.