使用 VueJS SPA 和 Vuex 的 Passport-azure-ad 与 OAuth 2.0 授权代码流（使用 PKCE）

Question

我一直在研究最适合我需要的模式。这是我目前正在运行的。 https://docs.microsoft.com/en-us/azure/active-directory/develop/sample-v2-code

• 我正在使用
• VueJS CLI 2（但应该很快就能升级到 VueJS 3。）
• Vuex
• Azure B2C

到目前为止，我已经尝试使用 passport-azure-ad 来实现 VueJS，但结果好坏参半。我从 express 服务器收到了我的令牌并创建了 MongoDB 会话，但是，我无法转换 JWT 令牌或将其提供给 Vue。在身份验证并转移到另一台服务器之后，关于该实现如何工作的文档确实不多，但是，我并没有真正深入研究这一点，因为我不知道这是否仍然是使用中间件服务器的正确方法。

Passport-Azure-AD 方法 - https://github.com/AzureAD/passport-azure-ad

优点

• 我喜欢我有一个使用策略进行身份验证和授权的 NPM 包。当我阅读它时，我确实喜欢这种模式，但我看到 MS 告诉我另一个最佳实践是使用 MSAL 2 和 PKE 作为最佳实践。什么给了？

缺点

• 默认情况下，这会在 MongoDB 中实现会话管理，现在我需要将其传递给 Vuex。我真的需要两种不同的会话管理策略吗？
• 当有我可以使用的 JS 库时，为客户端运行 VueJS 并为中间件运行快速服务器实例以控制安全性似乎过度。 MSAL。

---

MSAL 2.0 示例代码 - https://github.com/Azure-Samples/ms-identity-javascript-v2

在阅读了 PKE 之后，我相信 MSAL 2.0 有点不同 - https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-overview

MSAL 2.0 对用户进行身份验证并获取令牌，然后将该令牌发送到 API 并不时刷新。这似乎是与护照不同的策略，而且看起来更干净一些，而且似乎我可以在没有中间件服务器（ express ）的情况下实现这一点，只需使用 VueJS 和 vuex。

优点

• 使用 VueJS、vuex 和 axios 可能更容易实现
• 可能不需要实现快速服务器（中间件服务器）

缺点

• 需要实现更多编码和配置

我已经审查了一些使用 Nuxt 与 passport-azure-ad 和 VueJS 的软件包，但是，我们目前没有使用 Nuxt，并且希望尽可能避免使用它。

我真的需要一些关于如何有效解决此问题的想法，因为这里有很多选择，而且它们在最佳实践方面相互矛盾。

Answer 1

我不太确定您要完成什么，但如果您只想登录（验证）您的用户，您可以限制自己获得id token。如果您想访问受保护的资源（如 MS Graph 之类的 API 或您自己的使用 express 或其他方式），您将需要获得access token。 Azure AD B2C 令牌始终是 JWT，因此可以使用 MSAL、passport-azure-ad 等支持库对其进行解码。

也就是说，MSAL 主要用于客户端应用程序。 passport-azure-ad 主要由服务器 (API) 应用程序使用。如果您想构建自己的 API，您将需要 express 和 passport-azure-ad 或类似的东西。