Angular + .NET Core + Microsoft 身份

Question

我正在尝试创建一个使用 Angular (SPA) 和 Microsoft Identity 的 .NET Core 8.0 网站。基本上，要访问此站点，您必须具有 AD (Azure) 登录名才能访问该站点。我使用以下模板创建了该网站：

在

program.cs

中我添加了：

app.UseAuthentication();

但我没有弹出登录窗口。

我已通过连接的服务配置了 Azure AD，并在

appsettings.json

中查看信息。

这是我的设置：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAd"));

// Add services to the container.
builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();
app.UseAuthentication();
app.MapControllers();

app.MapFallbackToFile("/index.html");

app.Run();

任何帮助都可以！

Answer 1

要在 Angular 应用程序中启用 Azure AD 身份验证并触发登录弹出窗口（或重定向，具体取决于您的偏好），您需要在服务器旁边配置客户端。

Microsoft 提供了有关如何使用 Azure AD 在 Angular 中启用身份验证的全面指南。本指南逐步解释了该过程。

Azure 提供了两个关键库来促进这种集成：

• @azure/msal-browser：用于身份验证和令牌管理的核心库。
• @azure/msal-angular：围绕

  msal-browser

  的包装，专为 Angular 应用程序量身定制。

要实现Azure AD身份验证，只需按照官方文档配置您的应用程序即可。设置包括在 Azure AD 中注册您的应用程序、更新角度配置以及使用

MsalService

处理登录流程。

通过正确设置库，您可以根据应用程序的要求选择弹出或重定向流程进行身份验证。