No deje a los visitantes de su sitio colgados: permítales restablecer su contraseña si la han olvidado.

Los sistemas de autenticación juegan un papel crucial para proporcionar una experiencia de usuario segura y sin problemas. Un flujo de trabajo de autenticación normalmente implica dos procesos: registro e inicio de sesión.

A medida que aumenta la cantidad de servicios en línea, las personas crean cuentas y cada cuenta requiere credenciales de inicio de sesión únicas. Sin embargo, esto hace que sea fácil olvidar o confundir las credenciales de inicio de sesión. Para abordar esto, su aplicación debe implementar una función de restablecimiento de contraseña que le permita a un usuario restablecer su contraseña de manera conveniente y segura.

Configurar el proyecto React

Puede implementar un flujo de trabajo de restablecimiento de contraseña de varias maneras: no existe un estándar universal que todas las aplicaciones deban seguir. En su lugar, debe adaptar el enfoque que elija para satisfacer las necesidades específicas de su aplicación.

instagram viewer

El flujo de trabajo que aprenderá aquí incluye los siguientes pasos:

Para empezar, Arranca rápidamente un proyecto React. A continuación, instale Axios, una biblioteca de solicitudes HTTP de JavaScript.

npm instalar axios

Puedes encontrar el código del proyecto en este repositorio GitHub.

Crear un componente de inicio de sesión

En el directorio src, cree un nuevo componentes/Login.js archivo y agregue el siguiente código. Comience definiendo el proceso de restablecimiento de contraseña:

importar axios de"axíos";
importar Reaccionar, { estado de uso } de"reaccionar";
importar { usarContexto } de"reaccionar";
importar {Contexto de recuperación} de"../Aplicación";
importar"./global.componente.css";
exportarpor defectofunciónAcceso() {
constante { setPage, setOTP, setEmail } = useContext (RecoveryContext);
constante [correoUsuario, establecerCorreoUsuario] = usarEstado(""); 


funciónenviarOtp() {
si (correo electrónico de usuario) {
 axios.get(` http://localhost: 5000/check_email? correo electrónico =${correo electrónico de usuario}`).entonces((respuesta) => {
si (respuesta.estado 200) {
constante fiscalía = Matemáticas.piso(Matemáticas.aleatorio() * 9000 + 1000);
consola.log (OTP);
 establecerOTP(OTP);
 setEmail (correoelectrónico del usuario);
 axios.post(" http://localhost: 5000/enviar_correo electrónico", {
 OTP,
 destinatario_correo electrónico: correo electrónico del usuario,
 })
 .entonces(() => Configurar página("otp"))
 .atrapar(consola.registro);
 } demás {
 alerta("¡El usuario con este correo electrónico no existe!");
consola.log (respuesta.datos.mensaje);
 }}).atrapar(consola.registro);
 } demás {
 alerta("Por favor introduzca su correo electrónico");
 }}

Este código crea una función que envía una contraseña de un solo uso (OTP) a la dirección de correo electrónico de un usuario. Primero verifica al usuario revisando su correo electrónico en la base de datos antes de generar y enviar la OTP. Finalmente, actualiza la interfaz de usuario con la página OTP.

Complete el componente de inicio de sesión agregando código para representar el elemento de formulario JSX de inicio de sesión:

devolver (


Iniciar sesión</h2>







 Correo electrónico: 
"correo electrónico" valor = {correo electrónico de usuario} onChange = {(e) => { setUserEmail (e.target.value) }} />


 Contraseña:
"contraseña" />

Crear un componente de verificación de OTP

Para garantizar la validez de un código ingresado por un usuario, debe compararlo con el código enviado a su correo electrónico.

Crear un nuevo componentes/OTPInput.js archivo y agregue este código:

importar Reaccionar, { estado de uso, contexto de uso, efecto de uso } de"reaccionar";
importar {Contexto de recuperación} de"../Aplicación";
importar axios de"axíos";
importar"./global.componente.css";
exportarpor defectofunciónEntrada OTP() {
constante { correo electrónico, otp, setPage } = useContext (RecoveryContext);
constante [EntradaOTP, establecerEntradaOTP] = usarEstado( "");
funciónverificarOTP() {
si (parseInt(Entrada OTP) otp) {
 Configurar página("reiniciar");
 } demás {
 alerta("El código que ha ingresado no es correcto, intente nuevamente y vuelva a enviar el enlace");
 }
 }

El código crea un componente React donde los usuarios verifican su código OTP. Comprueba que el código introducido coincida con el almacenado en el objeto de contexto. Si es válido, muestra la página de restablecimiento de contraseña. Por el contrario, muestra una alerta que solicita al usuario que intente nuevamente o reenvíe la OTP.

Puedes consultar el código en este repositorio que implementa una función para reenviar OTP y un temporizador de caducidad para el código OTP.

Finalmente, represente los elementos JSX de entrada.

devolver (


Verificación de correo electrónico</h3>




Hemos enviado un código de verificación a su correo electrónico.</p>




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

Crear el componente de restablecimiento de contraseña

Crear un nuevo componentes/Reset.js archivo y agregue este código:

importar Reaccionar, {useState, useContext} de"reaccionar";
importar {Contexto de recuperación} de"../Aplicación";
importar axios de"axíos";
importar"./global.componente.css";
exportarpor defectofunciónReiniciar() {
constante [contraseña, establecer contraseña] = useState ("");
constante { setPage, email } = useContext (RecoveryContext);


funcióncambiar la contraseña() {
si (contraseña) {
intentar {
 axios.poner(" http://localhost: 5000/actualizar-contraseña", {
 correo electrónico: correo electrónico,
 nueva contraseña: contraseña,
 }).entonces(() => Configurar página("acceso"));


devolver alerta("La contraseña cambió con éxito, por favor inicie sesión!");
 } atrapar (error) {consola.log (error);}}
devolver alerta("Por favor ingrese su nueva contraseña");
 }
devolver (


 Cambiar contraseña </h2>






 Nueva contraseña: 
 tipo ="contraseña"
 marcador de posición ="..."
 requerido=""
 valor={contraseña}
 onChange={(e) => setPassword (e.objetivo.valor)} />

Este código genera un formulario que permite a los usuarios ingresar una nueva contraseña. Cuando el usuario haga clic en enviar, enviará una solicitud al servidor para actualizar su contraseña en la base de datos. Luego actualizará la interfaz de usuario si la solicitud es exitosa.

Actualice su componente App.js

Realice los cambios a continuación en su archivo src/App.js:

importar { useState, createContext } de"reaccionar";
importar Acceso de"./componentes/Iniciar sesión";
importar Entrada OTP de"./componentes/OTPInput";
importar Reiniciar de"./componentes/Restablecer";
importar"./Aplicación.css";
exportarconstante RecoveryContext = createContext();
exportarpor defectofunciónaplicación() {
constante [página, establecerPágina] = usarEstado("acceso");
constante [email, setEmail] = useState("");
constante [otp, setOTP] = usarEstado("");


funciónNavegarComponentes() {
si (página "acceso") devolver<Acceso />;
si (página "otp") devolver<Entrada OTP />;
si (página "reiniciar") devolver<Reiniciar />;
 }
devolver (
"Encabezado de la aplicación"> 
 value={{ página, setPage, otp, setOTP, correo electrónico, setEmail }}>



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

Este código define un objeto de contexto que administra el estado de la aplicación, que incluye el correo electrónico del usuario, el código OTP y las distintas páginas dentro de la aplicación. Esencialmente, el objeto de contexto hace posible pasar los estados requeridos entre diferentes componentes, una alternativa al uso de accesorios.

También incluye una función que maneja la navegación de páginas con facilidad sin necesidad de volver a renderizar componentes completos.

Configurar un servidor Express.js

Con la configuración del cliente, configure un servicio de autenticación de back-end para manejar la funcionalidad de restablecimiento de contraseña.

Para empezar, crear un servidor web Expresse instale estos paquetes:

npm instalar cors dotenv nodemailer mongoose

Próximo, crear una base de datos MongoDB o configurar un clúster MongoDB en la nube. Luego copie la cadena de conexión provista, cree un archivo ENV en el directorio raíz y pegue la cadena de conexión.

Para finalizar, debe configurar la conexión de la base de datos y definir los modelos de datos para sus datos de usuario. Use el código en este repositorio para configurar la conexión a la base de datos y definir los modelos de datos.

Definir las rutas API

Idealmente, un servicio de back-end tiene varias rutas que manejan las solicitudes HTTP de los clientes. En este caso, deberá definir tres rutas que administrarán las solicitudes API de envío de correo electrónico, verificación de correo electrónico y actualización de contraseña del cliente de React.

Cree un nuevo archivo llamado userRoutes.js en el directorio raíz y agregue el siguiente código:

constante expresar = requerir('expresar');
constante enrutador = expreso. enrutador();
constante controladores de usuario = requerir('../controladores/usuarioControladores');
enrutador.get('/Revisar correo electrónico', controladores de usuario.checkEmail);
enrutador.poner('/Actualiza contraseña', controladores de usuario.updatePassword);
enrutador.post('/enviar correo electrónico', controladores de usuario. enviar correo electrónico);
módulo.exportaciones = enrutador;

Controladores para las Rutas API

Los controladores son responsables de procesar las solicitudes HTTP de los clientes. Una vez que un cliente realiza una solicitud a una ruta API en particular, se invoca y ejecuta una función de controlador para procesar la solicitud y devolver una respuesta adecuada.

Crear un nuevo controladores/controladores de usuario.js archivo y agregue el código a continuación.

Use el código en este repositorio para definir controladores para la verificación de correo electrónico y la actualización de contraseña rutas API.

Comience definiendo el controlador de correo electrónico de envío:

exportaciones.sendEmail = (requerimiento, res) => {
constante transportador = nodemailer.createTransport({
 servicio: 'gmail',
 seguro: verdadero,
 autenticación: {
 usuario: proceso.env. MI EMAIL,
 paso: proceso.env. APLICACIÓN_CONTRASEÑA,
 },
 });
constante {destinatario_email, OTP} = req.cuerpo;


constante opciones de correo = {
de: proceso.env. MI EMAIL,
 a: destinatario_correo electrónico,
 sujeto: 'RESTABLECIMIENTO DE CONTRASEÑA',
 html: `


Recuperación de contraseña</h2>




Usar este OTP para restablecer su contraseña. OTP es válido para1 minuto</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (error, info) => {
si (error) {
consola.log (error);
 res.status(500).enviar({ mensaje: "Se produjo un error al enviar el correo electrónico" });
 } demás {
consola.registro('Email enviado: ' + info.respuesta);
 res.status(200).enviar({ mensaje: "Correo electrónico enviado con éxito" });
 }
 });
};

Este código define una función que usa Nodemailer para enviar un correo electrónico con un restablecimiento de OTP a un destinatario específico. Configura un transportador utilizando su propia cuenta y contraseña de Gmail.

Para obtener la contraseña de la aplicación de Gmail, debe generar una contraseña de aplicación en la configuración de su cuenta de Google. Luego usará esta contraseña en lugar de su contraseña habitual de Gmail para autenticar el Nodemailer.

Configurar el punto de entrada del servidor

Cree un archivo server.js en el directorio raíz y agregue este código:

constante expresar = requerir('expresar');
constante corazones = requerir('corazón');
constante aplicación = expreso();
constante puerto = 5000;
requerir('dotenv').config();
constante nodemailer = requerir('nodemailer');
constante conectarDB = requerir('./utils/dbconfig');
conectarDB();
aplicación.uso (express.json());
app.use (express.urlencoded({ extendido: verdadero }));
app.use (cors());
constante rutas de usuario = requerir('./rutas/rutasusuario');
aplicación.uso('/', rutas de usuario);
app.listen (puerto, () => {
consola.registro(`El servidor está escuchando en http://localhost:${puerto}`);
});

Con el cliente y el servidor configurados, puede ejecutar los servidores de desarrollo para probar la funcionalidad de la contraseña.

Creación de un servicio de restablecimiento de contraseña personalizado

Crear un sistema de restablecimiento de contraseña adaptándolo a su aplicación y sus usuarios es el mejor enfoque, a pesar de que existen soluciones pagas y preconstruidas. Al diseñar esta función, debe tener en cuenta tanto la experiencia del usuario como la seguridad, ya que los ataques son una amenaza constante.