您如何（如果可能）使用以下代码在网站中实现 Bcrypt 和 JWT？

Posted 2023-03-10

【中文标题】您如何（如果可能）使用以下代码在网站中实现 Bcrypt 和 JWT？

【英文标题】：How (If possible) do you implement Bcrypt and JWT in a website using the following code?

【发布时间】：2019-09-21 10:35:27

【问题描述】：

我现在正在学习 Node.js 课程，我正在完成一个使用 JWT 和 Bcrypt 进行身份验证的 API。代码可以在下面的链接中找到。代码相当简单，我完全理解，但我的问题是，这将如何用于网络应用程序而不使用邮递员？是否甚至可以使用 html 表单、按钮或其他方式从前端在 req.headers 中发送这些身份验证承载令牌？不使用 Passport 就没有办法实现这一点吗？如果可能的话，请有人给我一个简短的答案，让我知道如何做，因为我在谷歌上搜索了几个小时，试图看看这种身份验证方法是否可以以某种方式用于网络应用程序。

https://github.com/andrewjmead/node-course-v3-code/tree/master/task-manager/src

【问题讨论】：

请。在问题中发布您的代码，而不是作为链接

【参考方案1】：

我使用您提供的链接查看了您的代码。简短的回答是YES，您可以从前端在req.headers.authorization 内发送不记名令牌。

您发送它的方式取决于您的前端实现。

如果您使用 fetch API，您可以使用 fetch API 请求选项发送不记名令牌

fetch ('yoururl', 
    method: 'POST',  //your request verb
    body: JSON.stringify('yourObjectData'), //if making a post request
    headers: 
      "Content-Type": "application/json",
      "Authorization": `Bearer $yourtoken` //your token can then be accessed using req.headers.authorization 
    ,
)

在此处查看更多详细信息如何使用 fetch api https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

如果你使用jquery，这个答案应该也可以How Set Authorization headers at HTML Form or at A href

我很确定还有其他方法可以从前端发送令牌。我使用了 fetch API。

【讨论】：

哇，我不知道 fetch 可以做到这一点。它是否重定向到该页面？因为我知道 fetch 仅用于从给定页面获取数据。还是没关系？发送令牌，所以每当我前往该给定路由时，身份验证中间件就可以工作？

还有一个问题。我如何首先访问令牌以进行 fetch 调用？我可以访问注册和登录路由上的令牌，但是如何将该令牌发送到每个路由，以便我可以在所有 HTML/javascript 模板中访问它？

我不完全理解你的第一个问题。对于第二个，您可以使用localStorage.setItem('token', yourTokenString) 将令牌保存在本地存储中。然后可以使用localStorage.getItem('token') 从任何页面访问令牌。这是我现在知道的技术。我敢肯定还有其他方法。

我知道您在 localstorage 中设置项目的方式是这样，但是如何将该令牌发送到客户端以便进行设置？它仅在我的服务器端可用，不是吗？还是我在服务器端编写该代码？

是的。不过，如果您打算保留浏览器历史记录，我建议您使用window.location.href。

【参考方案2】：

这对于不使用邮递员的网络应用程序如何工作？

首先，您需要创建一个 HTML 表单/Angular 应用程序，其中包含用户名和密码等登录输入 然后执行 ajax 调用（如果它的 html 应用程序）或服务调用（如果是 angular）/users/login 并发布用户输入的值，您将获得一个成功验证的令牌。 然后将令牌存储在本地存储/cookie 中，然后显示仪表板页面。 当用户导航到其他页面时，如果它的 Angular 应用程序使用拦截器在每个请求上传递 Bearer 令牌。该应用程序将验证并提供 json 响应。

是否可以在 req.headers 中使用 HTML 表单、按钮或其他方式从前端发送这些身份验证承载令牌？

是的，您可以在 req.headers 中传递它。参考：https://www.illucit.com/en/angular/angular-5-httpinterceptor-add-bearer-token-to-httpclient-requests/

不使用 Passport 就没有办法做到这一点吗？

是的 注意：使用 Passport 的优点：Passport 是 Node.JS 的身份验证中间件，它不是针对任何特定的身份验证方法，像 OAuth、JWT 这样的身份验证方法是在 Passport by Strategy 模式中实现的，所以这意味着你可以在不影响应用程序的其他部分的情况下交换身份验证机制。Passport 使用策略，例如本地策略或随着社交网络的兴起，使用 OAuth 提供程序（如 facebook 或 twitter）进行单点登录

参考：这里有完整的例子https://www.toptal.com/angular/angular-6-jwt-authentication

【讨论】：

具有我需要的大部分内容的惊人答案。但是还有一个问题，如果我不使用角度，我如何将不记名令牌传递给其他页面？只有普通的 HTML、JavaScript？

是否可以在路由中设置 app.local （例如 users/login ），以便所有路由都可以访问它？还是只能在 app.js 中设置一个本地？

对于普通的 Javascript / HTML，你可以通过这种方式 xhr.setRequestHeader("Authorization", "Bearer" + tokenElement.innerHTML);参考：jonathanmh.com/example-json-web-tokens-vanilla-javascript。第二个问题“app.local”没看懂，请举例说明

例如：router.post('/users/login', async (req, res) => try const user = await User.findByCredentials(req.body.email, req.body .password) const token = await user.generateAuthToken() app.local.token = token catch (e) res.status(400).send() ) 是否可以从此在本地存储中设置令牌像这样的路线，每条路线都可以到达吗？

您应该在客户端（使用 JS）示例中执行此操作：window.localStorage.setItem('access_token', token) 然后当您想要检索它时：window.localStorage.getItem('access_token ')