.Net Core WebApi + Angular 项目中的安全 SPA

Question

我正在构建基于 .Net Core 3.1 + Angular 模板的应用程序。该应用程序正在使用 Azure AD 对用户进行身份验证。

后端配置如下：

services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
        .AddAzureADBearer(options => Configuration.Bind("AzureActiveDirectory", options));

前端使用@azure/msal-angular 将用户在第一个未验证的调用重定向到Api。这很好用。

现在我想保护更多的应用程序。我希望在用户未通过身份验证时下载 angular 文件或任何静态文件 NOT。

我如何做到这一点？如果用户未通过身份验证，如何保护根文件夹上的应用程序并将用户重定向到 Azure AD 登录页面？

Answer 1

根据这个 post：

您可以在使用 spa 之前尝试这样做：

 app.Use(async (context, next) =>
    {
        if (!context.User.Identity.IsAuthenticated)
        {
            await context.ChallengeAsync("oidc");
        }
        else
        {
            await next();
        }
    });

不确定这是否对您有帮助，但我很想知道这是否符合您的要求。

Answer 2

我找到了实现这一目标的方法。（alphaz18 你的答案正确但不完整）

首先，由于后端要重定向到 Azure AD 登录，我们可以从 SPA 中完全删除 @azure/msal-angular 模块。

现在我们需要配置后端来与此建立连接

services.AddAzureAD(options => Configuration.Bind("AzureActiveDirectory", options));

在 UseSpa 之前，我们需要启动身份验证（由 alphaz18 发现）

app.Use(async (context, next) =>
{
    if (!context.User.Identity.IsAuthenticated)
    {
        await context.ChallengeAsync(AzureADDefaults.AuthenticationScheme);
    }
    else
    {
        await next();
    }
});

因为我仍然希望 API 可以通过不记名身份验证访问，所以我发现 this answer 可以正确地混合使用。

在 Azure AD 端，我们不再需要注册 2 个应用程序，只需一个就足够了。

.Net Core WebApi + Angular 项目中的安全 SPA

Secure SPA in .Net Core WebApi + Angular project

azure-active-directory

asp.net-core

msal

asp.net-core-webapi

angular