使用 Passport.js 的 Vue.js 客户端和 Express.js 服务器的完整 Oauth2 身份验证流程

Posted 2023-03-07

【中文标题】使用 Passport.js 的 Vue.js 客户端和 Express.js 服务器的完整 Oauth2 身份验证流程

【英文标题】：Full Oauth2 Authentication Flow with Vue.js Client and Express.js Server Using Passport.js

【发布时间】：2019-11-08 20:27:51

【问题描述】：

我在理解如何使用从 OAuth2 身份验证流程接收到的承载访问令牌时遇到问题。

在我的例子中，客户端是 Vue.js，服务器是 Express.js，认证中间层是 Passport.js。

Passport和认证流程的配置是标准的：

这是一种 OAuth2 Passport 策略（在我的情况下为 Asana） 在服务器上有路由 /auth/asana 调用 passport.authenticate。 在服务器上有路由 /auth/asana/cb 用于来自 Asana 的回调。 并且有一个成功的 URL 指向客户端。

这是我做的一步一步：

在客户端/家庭用户上单击“身份验证”，然后我会重定向到服务器/身份验证/asana。 server/auth/asana 使用 Passport.js 重定向到 Asana，以便用户进行身份验证。 server/auth/asana/cb 从 Asana 接收经过身份验证的用户。 server/auth/asana/cb 将用户重定向回客户端/home。 我现在想从客户端/主页开始使用 API 来获取数据。

这里有 3 个问题：

在服务器（使用 Passport.js 的 Express.js）上，如何获取 Bearer Access Token？ 在客户端 (Vue.js) 上，承载访问令牌应该存储在哪里，以便可以在针对外部 API（在本例中为 Asana）的请求中使用？ 承载访问令牌应该如何从服务器（Express.js）传输到客户端（Vue.js）？

请注意，我已经阅读了很多关于这方面的文章，步骤 1 到 4 很好，验证代码等也很有效。但似乎我在这里遗漏了一些基本的东西，因为没有一篇文章解释了如何在经过身份验证后实际使用承载访问令牌。

【参考方案1】：

根据the Asana API documentation，access_token 应传递到Authorization 标头中，如下所示：

curl https://app.asana.com/api/1.0/users/me \
  -H "Authorization: Bearer ACCESS_TOKEN"

这是为基于 OAuth2 的 API 传递访问令牌的标准方式。如果您仍然难以通过，您可以使用 API 工具（如 Pizzly）为您处理 OAuth 舞蹈。