使用 Vue JS 和 .Net Core Web API 之类的堆栈 - 我在哪里实施身份验证（Azure AD）？

Question

我对“在哪里”（如果不是两者都在哪一层）感到困惑，我将在我的应用程序中使用 Azure AD 实现身份验证。

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

但是，我还需要保护对我的 web API 的调用，这显然不是 ADAL JS 完成的。

问题

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

进一步的背景（如有必要）

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

编辑

这是我想太多了吗？ 它是 web API 在 Azure 中使用 AD 进行身份验证的简单案例，接收令牌并将该令牌转发给客户端以传递吗？

Answer 1

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

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

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

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

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

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