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

Question

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

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

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

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

优点

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

缺点

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

<小时/>

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

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

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

优点

• 使用 VueJS、vuex 和 axios 可能更容易实现
• 可能不需要实现 Express 服务器(中间件服务器)

缺点

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

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

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

Answer 1

我不太确定您想要完成什么，但如果您只想登录(验证)您的用户，您可以限制自己获取 id token 。如果您想访问 protected 资源(像 MS Graph 这样的 API 或您自己使用 Express 或其他东西的 API)，您将需要获取 access token 。 Azure AD B2C token 始终是 JWT，因此可以使用 MSAL、passport-azure-ad 等支持库对其进行解码。

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