通过电子邮件链接打开本地环境页面答案

【问题标题】：Open a page on local environment through email link通过电子邮件链接打开本地环境页面
【发布时间】：2021-10-16 20:08:39
【问题描述】：

我被这个问题困住了。后端 API 是用 Node.js 编写的，而我在 React.js 的前端处理这些 API。后端和前端代码具有独立的存储库结构。因此，所有登录、注册和忘记密码功能都将通过客户端请求完成。

API 端点部署在具有以下 URL 结构的服务器上。

POST - https://133.44.163.89:5000/user/forgetPassword
GET -  https://133.44.163.89:5000/user/56546dsfsd

现在我正在我的前端本地环境中使用这些端点，该环境具有以下 URL。

http://localhost:3000

我面临忘记密码端点的问题，基本上它是一个发布请求，并在正文中接收用户电子邮件。

POST - https://133.44.163.89:5000/user/forgetPassword
body: { email: 'example@example.com' }

在成功回复后，它将发送一封带有链接的电子邮件。该链接具有以下结构。

https://133.44.163.89:5000/user/56546dsfsd/forgetPassword/ddeef95c508
                                user-id                    token

后端开发人员想要我的是，当您单击此 URL 时，应在前端打开一个带有密码重置表单的页面。但是HOST的链接不一样，我怎么能把这个链接HOST（https://133.44.163.89:5000）映射到前端HOST（http://localhost:3000）打开页面。

这个问题应该怎么解决？

【问题讨论】：

您实际上应该向后端开发人员提供指向您的密码重置表单的链接，并请求他在从电子邮件中单击密码重置链接后将其重定向到您的前端应用程序。那是最好的办法。他甚至可以根据您的应用程序的需要通过查询参数传递信息。至于你的密码重置表单的链接，告诉他把它放在一个 env 文件中，这样它就不会被硬编码到应用程序中。

标签： node.js reactjs react-router-dom

【解决方案1】：

出于开发目的，后端开发人员应该向您发送带有 localhost 的链接，当您的应用处于生产模式时，BE Dev 应该发送带有 prod 域的链接。

你应该有两个端点：

使用用户令牌发送电子邮件的第一个端点。
第二次接收新密码和令牌以验证用户帐户。我认为不需要 userId，如果您在令牌和用户之间进行链接，则可以获取 userId。

在反应中你需要创建一个路由来重置密码如果你使用 react-router-dom 你的代码看起来像这样

<Switch>
  <Route path="/login" component={<Login />} exact />
  <Route path="/user/:userId/forgetPassword/:token" component={<ResetPassword />} exact />
  <Redirect to="/login" from="*" />
</Switch>

在你的 ResetPassword 组件中，如果你使用钩子，你可以使用

import { useParams } from 'react-router-dom';

const {userId, token} = useParams();

这取决于你使用的 react-router。

【讨论】：

【解决方案2】：

我并不真正了解您的密码重置过程的结构。通常情况如下

发送密码重置请求。即你做什么

POST - https://133.44.163.89:5000/user/forgetPassword
body: { email: 'example@example.com' }

服务器发送一封电子邮件，其中包含指向密码重置表单的链接。在您的情况下，这可能类似于以下内容
```
http://localhost:3000/passwordResetForm?userid=abc&token=xyz
```
即当您点击该链接时，密码重置表单会在您的浏览器中打开，您可以输入新密码

在提交密码重置表单时，您向服务器发送如下请求

POST - https://133.44.163.89:5000/user/abc/forgetPassword/xyz
body: { newpassword: 'foobar'}

要获取电子邮件的正确 URL，例如，您可以在第一个请求中添加一个额外的 returnUrl 参数

POST - https://133.44.163.89:5000/user/forgetPassword
body: { email: 'example@example.com', returnUrl: 'http://localhost:3000' }

如果新密码的请求只能从前端发送，您也可以利用请求发送的Origin标头（由浏览器自动设置）

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);
}

替代方案

另一种方法是根本不使用电子邮件中的链接，而只是通过电子邮件发送令牌，如下所示

用户在前端点击“忘记密码”，输入自己的邮箱，前端向服务器提交请求
```
POST - https://133.44.163.89:5000/user/forgetPassword
body: { email: 'example@example.com' }
```
服务器接受请求后，显示重置令牌和新密码
的其他输入
服务器发送一封仅包含请求令牌的电子邮件
用户在已打开的（来自步骤 1 和 2）密码重置表单中输入此令牌和新密码。提交表单时，requesttoken 和新密码将发送到服务器
```
POST - https://133.44.163.89:5000/forgetPassword/xyz
body: { newpassword: 'foobar'}  
```
您甚至不需要此请求中的用户 ID，因为使用重置令牌，您可以轻松确定是哪个用户发送了请求。

【讨论】：

【解决方案3】：

您需要提供来自同一域的后端路由和前端路由。

Use domain address instead of IP

根据您的链接结构

https://<domain>/user/<userId>/forgetPassword/<token>

在<Route \> 中从客户端创建一个端点[参见react-router npm]

<Switch>
  <Route exact path="/login" component={<Login />} />
  <Route exact path="/user/:userId/forgetPassword/:token" component={<ResetPassword />} />
  .
  ....
  ...
  .
  <Redirect to="/login" />
</Switch>

现在，您需要为重置密码

创建组件

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>
  )
}

【讨论】：

【解决方案4】：

BE 开发人员应在其应用程序中添加环境变量，并将正确的链接与正确的域地址发送到电子邮件。

REACT_APP_URL=https://localhost:3000

【讨论】：