Angular集成MSAL调用ASP.NET Core API报Correlation Failed错误

你当前后端配置的是面向网页端交互的OpenID Connect认证流，该流程依赖Cookie存储身份状态、跳转完成登录校验，并不适配API接收前端Bearer令牌的验证场景，因此才会触发Correlation cookie not found错误。

1. 调整Startup.cs认证配置 #

将面向网页应用的AddMicrosoftIdentityWebApp替换为面向API的AddMicrosoftIdentityWebApi，同时补全CORS配置避免跨域问题：

public void ConfigureServices(IServiceCollection services)
{
  // 补全CORS策略，允许Angular前端访问
  services.AddCors(options =>
  {
      options.AddPolicy("AllowAngularClient", policy =>
      {
          policy.WithOrigins("https://localhost:4200")
                .AllowAnyHeader()
                .AllowAnyMethod();
      });
  });
  services.AddOptions();

  services.AddControllers()
   .SetCompatibilityVersion(CompatibilityVersion.Version_3_0)
   .AddNewtonsoftJson(x => x.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore);

  // 替换为API专属的JWT认证配置
  services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
   .AddMicrosoftIdentityWebApi(Configuration);
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 注意中间件顺序，CORS必须放在认证、授权之前
  app.UseCors("AllowAngularClient");

  app.UseRouting();

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

  app.UseEndpoints(endpoints =>
  {
      endpoints.MapControllers();
  });
}

2. 简化appsettings.json配置 #

API侧校验JWT不需要客户端密钥，删除ClientSecret字段即可：

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "TenantId": "6d...",
    "ClientId": "47..."
  }
}

3. 调整AuthController实现 #

API作为被调用方不需要再通过ITokenAcquisition获取令牌，直接通过User对象即可读取当前请求的用户身份信息：

namespace Auth.Services
{
  [Route("{controller}/{action}")]
  [Authorize]
  // 继承ControllerBase即可，不需要Controller包含的网页视图相关能力
  public class AuthController : ControllerBase
  {
    [HttpGet]
    public IActionResult Index()
    {
      // 直接从上下文中读取用户信息
      var userPrincipalName = User.Identity?.Name;
      // 你的业务逻辑
      return Ok(new { username = userPrincipalName });
    }
  }
}

4. 调整Angular端scope配置 #

你当前调用自研API用的user.read是Graph API专属的scope，需要先在Azure门户的应用注册中，为你的应用添加公开API的自定义scope（格式示例：api://47.../access_as_user），再修改app.module.ts中的资源映射配置：

protectedResourceMap: new Map([
    ['https://graph.microsoft.com/v1.0/me', ['user.read']],
    ['https://localhost:44333/Auth/Index', ['api://47.../access_as_user']]
])

修改后MSAL会自动为你的API请求签发受众正确的JWT令牌，后端校验即可通过。

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