如何通过集成msal.js的React前端实现.NET Core API访问安全控制

核心逻辑就两步：前端登录后获取对应API的访问令牌随请求传给后端，后端中间件自动校验令牌合法性，拦截未授权请求，不需要自己写复杂的鉴权逻辑。

前端（React + MSAL.js）调整 #

• 初始化MSAL实例时，补充后端API对应的权限范围配置，不要只申请ID令牌，要同步申请API访问令牌：
  配置里把你后端在B2C注册的API权限范围加进去，格式一般是api://<后端API应用注册ID>/access_as_user，同时把B2C的域名加到knownAuthorities配置里，避免MSAL把请求当成非信任域拦截。
• 封装统一的请求拦截逻辑：每次调用后端接口前，先调用MSAL实例的acquireTokenSilent方法拿缓存的有效访问令牌，放到请求头的Authorization字段里，格式为Bearer <令牌内容>；如果静默取令牌失败（比如登录过期），再触发交互登录流程即可。
• 令牌直接交给MSAL默认的会话存储管理就行，不要手动存在localStorage里，避免XSS风险。

后端（.NET Core）配置步骤 #

• 先在Azure AD B2C租户中给后端API单独注册一个应用，不要和前端共用同一个应用注册：给这个后端应用暴露一个API权限（比如命名为access_as_user），再把前端的应用注册添加为授权客户端，允许前端申请这个权限。
• 给后端项目安装官方JWT校验NuGet包：Microsoft.AspNetCore.Authentication.JwtBearer，不用自己手写令牌签名、过期时间校验逻辑，官方中间件已经全部实现了。
• 修改服务配置代码（.NET 6+ 是Program.cs，旧版本是Startup.cs），添加JWT鉴权中间件配置，参考代码如下：

// 添加鉴权服务
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        // 替换成你自己B2C租户的地址、使用的登录用户流名称
        options.Authority = "https://<你的B2C租户名>.b2clogin.com/<你的B2C租户ID>/<登录用户流名，比如B2C_1_signupsignin>/v2.0/";
        // *注意：Audience填你后端API在B2C注册的应用（客户端）ID，别填成前端的*
        options.Audience = "<后端API应用注册ID>";
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = $"https://<你的B2C租户名>.b2clogin.com/<你的B2C租户ID>/v2.0/"
        };
        // 可选：添加自定义权限校验逻辑
        options.Events = new JwtBearerEvents
        {
            OnTokenValidated = context =>
            {
                // 校验令牌是否携带了API要求的访问权限
                var scopeValue = context.Principal?.FindFirst("http://schemas.microsoft.com/identity/claims/scope")?.Value;
                if (string.IsNullOrWhiteSpace(scopeValue) || !scopeValue.Split(' ').Contains("access_as_user"))
                {
                    context.Fail("无接口访问权限");
                }
                return Task.CompletedTask;
            }
        };
    });

// 注意中间件顺序，必须在接口路由映射之前添加鉴权、授权中间件
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

• 给需要登录才能访问的控制器或接口方法添加[Authorize]特性，允许公开访问的接口不加特性或者加[AllowAnonymous]特性即可。

常见踩坑点 #

• B2C的Authority地址必须带v2.0后缀，否则会出现令牌元数据拉取失败的问题
• 本地调试时记得在B2C应用注册里把前后端的本地调试地址加到重定向URI、CORS允许列表里，避免跨域或重定向报错
• 不要为了调试方便关闭令牌签名校验、过期时间校验，否则鉴权完全不生效
• 不要在前端把访问令牌泄露给第三方站点，请求拦截器只在调用你自己的后端接口时往请求头里加令牌

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