Estoy atascado en este problema. Las API de backend están escritas en Node.js y estoy manejando estas API en la interfaz que está en React.js . El código de backend y frontend tiene una estructura de repositorio separada. Por lo tanto, todas las funciones de inicio de sesión, registro y olvido de contraseña se realizarán a través de solicitudes del lado del cliente.
Los puntos finales de las API se implementan en el servidor que tiene la siguiente estructura de URL.
POST - https://133.44.163.89:5000/user/forgetPassword GET - https://133.44.163.89:5000/user/56546dsfsdAhora estoy consumiendo estos puntos finales en mi entorno local frontend que tiene la siguiente URL.
http://localhost:3000Estoy enfrentando un problema con el punto final de contraseña olvidada, básicamente es una solicitud posterior y toma el correo electrónico del usuario en el cuerpo.
POST - https://133.44.163.89:5000/user/forgetPassword body: { email: 'example@example.com' }En la respuesta exitosa, enviará un correo electrónico con un enlace. El enlace tiene la siguiente estructura.
https://133.44.163.89:5000/user/56546dsfsd/forgetPassword/ddeef95c508 user-id token Lo que el desarrollador de backend quiere de mí es que cuando haga clic en esta URL, se abra una página en el frontend con un formulario de restablecimiento de contraseña. Pero el enlace HOST es diferente, ¿cómo puedo mapear este enlace HOST ( https://133.44.163.89:5000 ) en el frontend HOST (http://localhost:3000) para abrir la página?
¿Cuál debería ser la solución a este problema?
para fines de desarrollador, el desarrollador de back-end debe enviarle el enlace con localhost, cuando su aplicación está en modo de producción, BE Dev debe enviar el enlace con el dominio de producción.
Debe tener dos puntos finales:
En reaccionar, debe crear una ruta para restablecer la contraseña si está utilizando reaccionar-router-dom su código se ve así
<Switch> <Route path="/login" component={<Login />} exact /> <Route path="/user/:userId/forgetPassword/:token" component={<ResetPassword />} exact /> <Redirect to="/login" from="*" /> </Switch>En su componente ResetPassword, si está usando ganchos, puede usar
import { useParams } from 'react-router-dom'; const {userId, token} = useParams();Esto depende del enrutador de reacción que esté utilizando.
Realmente no entiendo la estructura de su proceso de restablecimiento de contraseña. Por lo general, esto funciona de la siguiente manera
enviar una solicitud de restablecimiento de contraseña. es decir, lo que haces con
POST - https://133.44.163.89:5000/user/forgetPassword body: { email: 'example@example.com' }el servidor envía un correo electrónico con un enlace al formulario de restablecimiento de contraseña . En su caso, esto probablemente sería algo como lo siguiente
http://localhost:3000/passwordResetForm?userid=abc&token=xyzEs decir, cuando hace clic en ese enlace, se abre el formulario de restablecimiento de contraseña en su navegador y puede ingresar su nueva contraseña
Al enviar el formulario de restablecimiento de contraseña, envía una solicitud como la siguiente al servidor
POST - https://133.44.163.89:5000/user/abc/forgetPassword/xyz body: { newpassword: 'foobar'} Para obtener la URL correcta para el correo electrónico, podría, por ejemplo, agregar un parámetro returnUrl adicional a la primera solicitud.
POST - https://133.44.163.89:5000/user/forgetPassword body: { email: 'example@example.com', returnUrl: 'http://localhost:3000' } Si la solicitud de una nueva contraseña solo se puede enviar desde la interfaz, también puede utilizar el encabezado de Origin enviado con la solicitud (establecido automáticamente por el navegador)
app.post("/user/forgetPassword", (req, res) => { //let returnurl = req.body.returnUrl; //use whatever fits //let returnurl = req.get("origin"); //your usecase more ... sendEmail(returnurl); //insert the correct url in the email res.sendStatus(200); }Alternativa
Un proceso alternativo sería no usar enlaces en el correo electrónico, sino simplemente enviar el token por correo electrónico como el siguiente
El usuario hace clic en "Olvidé mi contraseña" en la interfaz, ingresa su correo electrónico y la interfaz envía la solicitud al servidor.
POST - https://133.44.163.89:5000/user/forgetPassword body: { email: 'example@example.com' }Una vez que el servidor acepta la solicitud, muestra entradas adicionales para el token de restablecimiento y la nueva contraseña
El servidor envía un correo electrónico que solo contiene el token de solicitud
El usuario ingresa este token y una nueva contraseña en el formulario de restablecimiento de contraseña ya abierto (de los pasos 1 y 2). Al enviar el formulario, el token de solicitud y la nueva contraseña se envían al servidor
POST - https://133.44.163.89:5000/forgetPassword/xyz body: { newpassword: 'foobar'}Ni siquiera necesita el ID de usuario en esta solicitud, porque con el token de reinicio, puede determinar fácilmente qué usuario envió la solicitud.
Debe proporcionar una ruta de back-end y una ruta de front-end del mismo dominio.
Use domain address instead of IP
según su estructura de enlace
https://<domain>/user/<userId>/forgetPassword/<token>
cree un punto final desde el lado del cliente en <Route \> [ver react-router npm]
<Switch> <Route exact path="/login" component={<Login />} /> <Route exact path="/user/:userId/forgetPassword/:token" component={<ResetPassword />} /> . .... ... . <Redirect to="/login" /> </Switch>Ahora, necesita crear un componente para restablecer la contraseña
import React from 'react'; import { useParams } from 'react-router-dom'; function ResetPassword (props) { // get your userId, token using useParams const { userId, token } = useParams(); // now you can use this userId, and token as per your requirement return ( // your reset password code <YourComponent> ) }