能否基于ASP.NET Core 2实现Azure AD认证后跳转至Angular 5应用？

我之前正好做过ASP.NET Core 2 + Angular 5 + Azure AD认证的类似场景，完全能实现你描述的需求——后端完成认证流程、携带claims和令牌跳转前端，同时前端调用API时能附带认证信息。下面给你详细拆解实现思路和关键步骤：

一、ASP.NET Core 2 后端配置Azure AD认证 #

首先得在Azure AD里注册两个应用（分开注册后端API和前端Angular会更清晰，权限隔离更安全）：

• 一个用于后端API，设置对应的API权限和暴露范围
• 一个用于前端Angular应用，配置重定向URI等参数

然后在后端项目中做以下配置：

1. 安装NuGet包：Microsoft.AspNetCore.Authentication.AzureAD.UI
2. 修改Startup.cs，配置认证服务和CORS（跨域是前后端分离的关键）：

public void ConfigureServices(IServiceCollection services)
{
    // 配置Azure AD认证
    services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
        .AddAzureAD(options => Configuration.Bind("AzureAd", options));

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

    // 配置允许Angular前端跨域的CORS策略
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAngularOrigin",
            builder => builder.WithOrigins("http://localhost:4200") // 替换成你的Angular部署地址
                              .AllowAnyHeader()
                              .AllowAnyMethod()
                              .AllowCredentials());
    });
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseCors("AllowAngularOrigin"); // 启用CORS策略
    app.UseAuthentication(); // 启用认证中间件
    app.UseMvc();
}

3. 在appsettings.json里填入Azure AD的配置参数：

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "Domain": "your-tenant-domain",
  "TenantId": "your-tenant-id",
  "ClientId": "your-api-client-id",
  "CallbackPath": "/signin-oidc"
}

二、Angular 5 前端集成ADAL #

你提到的ADAL Angular封装确实是这个场景的标配，步骤如下：

1. 安装ADAL包：npm install adal-angular --save
2. 在app.module.ts里初始化ADAL服务并配置路由守卫：

import { AdalService, AdalGuard } from 'adal-angular';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    AdalService,
    AdalGuard // 用于保护需要认证的路由
  ],
  exports: [RouterModule]
})
export class AppModule {
  constructor(private adalService: AdalService) {
    // 初始化ADAL配置
    const adalConfig = {
      tenant: 'your-tenant-id',
      clientId: 'your-angular-app-client-id',
      redirectUri: window.location.origin,
      postLogoutRedirectUri: window.location.origin
    };
    this.adalService.init(adalConfig);
  }
}

3. 保护路由：在路由配置中使用AdalGuard，确保未登录用户自动跳转到Azure AD登录页：

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AdalGuard] },
  // 其他路由配置
];

4. 调用后端API时携带令牌：在HTTP请求头中添加Bearer令牌，示例：

import { AdalService } from 'adal-angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private adalService: AdalService, private http: HttpClient) {}

callApi() {
  this.adalService.acquireToken('your-api-client-id') // 注意：这里传的是后端API的ClientId
    .subscribe(token => {
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
      this.http.get('https://your-api-url/api/data', { headers }).subscribe(data => {
        // 处理API返回数据
      });
    });
}

三、关于你提到的“后端主导认证后跳转前端”的场景 #

这种模式也是可行的，具体流程：

• 用户访问后端的登录接口（比如/api/login），后端重定向到Azure AD登录页
• 登录成功后Azure AD回调到后端，后端解析claims和令牌
• 后端可以通过重定向到Angular应用，并通过安全的方式传递令牌（不建议用URL参数，推荐用HttpOnly Cookie或者让前端后续从后端API获取令牌）
• 不过更推荐前端主导的认证流程（也就是上面说的ADAL直接和Azure AD交互），这种模式更符合前后端分离的架构，也更灵活。

关键注意事项 #

• 令牌目标要正确：Angular获取令牌时，必须传入后端API的ClientId，这样令牌才被后端认可
• Claims同步：后端可以通过HttpContext.User.Claims获取用户声明，前端可以通过adalService.userInfo获取用户信息，两边的claims是一致的
• 跨域配置要到位：一定要开启AllowCredentials，因为认证令牌是通过请求头传递的，需要允许携带凭证
• 回调URI匹配：Azure AD应用注册里的回调URI必须和前后端配置的完全一致，否则会出现登录回调失败的问题

内容的提问来源于stack exchange，提问作者user2818430