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

Question

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

在我的情况下，客户端是Vue.js，服务器是Express.js，身份验证中间层是Passport.js。

Passport和身份验证流程的配置是标准的：

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

这是我要做的步骤：

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

这是3个问题：

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

请注意，我已经阅读了很多有关此的文章，第1步至第4步很好，进行身份验证的代码等也很好用。但是似乎这里缺少基本的东西，因为没有一篇文章解释了如何通过身份验证后实际使用Bearer Access Token。

Answer 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​​工具（例如Bearer.sh）来为您处理OAuth舞蹈。