使用 Vue JS 和 .Net Core Web API 等堆栈 - 我在哪里实现身份验证 (Azure AD)？

Question

我对要在应用程序中使用 Azure AD 实施身份验证的“何处”（如在哪一层，如果不是两层）感到困惑。

所以我有一个 Vue JS 前端，并且我已经阅读了如何利用 ADAL JS 来帮助客户端进行身份验证。

但是，我还需要对 Web API 的调用进行保护，而 ADAL JS 显然无法做到这一点。

问题

如何使用 Azure AD 将对 Web api 的调用限制为仅限经过身份验证的用户（他们需要通过 vue js 应用程序登录）？然后，类似地，允许 Web api 通过 Azure AD 进行身份验证，以便从 Blob 存储中检索内容？

进一步的背景信息（如果需要）

一个示例流程是用户登录（在 vue js 应用程序中），将文件发布到我的 Web api，该文件将其放入 blob 存储 (azure) 中。经过身份验证的用户稍后可以请求此文件（在 azure 中需要将其限制为仅限经过身份验证的用户），然后将其返回给经过身份验证的客户端。

编辑

我是不是想太多了？这是 Web API 在 Azure 中使用 AD 进行身份验证、接收令牌并将该令牌转发到客户端进行传递的简单情况吗？

Answer 1

您的 Vue 应用需要使用 MSAL.js 或 ADAL.js 处理身份验证。然后，它可以使用 OAuth 隐式流程获取对后端 API 的访问令牌。

您的后端 API 使用调用者获取的 JSON Web 令牌对调用者进行身份验证。

您可以通过定义范围和应用程序权限来控制哪些应用程序可以调用您的 API，然后将它们分配给您想要具有这些访问权限的应用程序。然后，您的 API 需要检查令牌是否具有这些权限:)

权限和同意： https: //learn.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent

前端登录： https: //learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in

前端获取令牌：https ://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token