Angular前端调用时.NET Core OIDC挑战重定向失效问题

1. AJAX请求的重定向特性：Angular的HttpClient发起的是XMLHttpRequest/fetch请求，这类请求会自动跟随后端返回的302重定向，而非触发浏览器页面跳转。当后端检测到未认证并返回302到IdP登录页时，HttpClient会直接请求登录页并获取其HTML内容（状态码变为200），前端尝试将HTML解析为JSON时自然报错。
2. BFF流程逻辑误解：你期望的是浏览器级别的登录重定向，但AJAX请求无法触发整个页面跳转，只能在请求内部处理重定向，因此无法进入正常的OIDC登录流程。

方案1：改用浏览器导航替代AJAX请求 #

对于需要触发认证的场景，不要用AJAX请求，直接让浏览器导航到BFF端点，这样才能触发完整的OIDC重定向流程：

// 替换HttpClient请求，直接跳转页面
window.location.href = "https://localhost:7030/.well-known/bff-getsessioninfo";

浏览器发起普通导航请求后，后端检测到未认证会返回302重定向，浏览器自动跳转到IdP登录页，完成登录后再跳回BFF端点，返回会话信息并设置Cookie。

方案2：后端区分AJAX请求返回401，前端拦截跳转 #

后端修改中间件逻辑 #

检测请求是否为AJAX，对AJAX请求返回401状态码，对普通导航请求正常触发OIDC挑战：

app.Use(async (context, next) =>
{
    if (!context.Request.Cookies.ContainsKey(AuthConstants.CookieSessionKey))
    {
        // 判断是否为AJAX请求
        bool isAjaxRequest = context.Request.Headers.ContainsKey("X-Requested-With") 
            && context.Request.Headers["X-Requested-With"] == "XMLHttpRequest"
            || context.Request.Headers.Accept.Any(a => a.Contains("application/json"));

        if (isAjaxRequest)
        {
            // AJAX请求返回401，让前端处理跳转
            context.Response.StatusCode = StatusCodes.Status401Unauthorized;
            return;
        }
        else
        {
            // 普通导航请求触发OIDC登录重定向
            await context.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme);
        }
    }
    else
    {
        await next.Invoke(context);
    }
});

前端添加HTTP拦截器 #

全局监听401响应，触发浏览器跳转到BFF认证端点：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError((error: HttpErrorResponse) => {
                if (error.status === 401) {
                    // 跳转到BFF端点触发浏览器级重定向
                    window.location.href = "https://localhost:7030/.well-known/bff-getsessioninfo";
                }
                return throwError(() => error);
            })
        );
    }
}

在Angular模块中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
    ]
})
export class AppModule { }

方案3：使用ASP.NET Core官方BFF库（推荐） #

官方的Microsoft.AspNetCore.Bff包内置了BFF模式的最佳实践，自动处理AJAX请求的认证逻辑和令牌中转，避免手动配置的问题：

1. 安装NuGet包：Microsoft.AspNetCore.Bff
2. 配置BFF服务：

builder.Services.AddBff()
    .AddRemoteApis();

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = "cookie";
    options.DefaultChallengeScheme = "oidc";
})
.AddCookie("cookie")
.AddOpenIdConnect("oidc", opts =>
{
    opts.Authority = builder.Configuration["Authority"];
    opts.ClientId = builder.Configuration["ClientId"];
    opts.ClientSecret = builder.Configuration["ClientSecret"];
    opts.ResponseType = "code";
    opts.UsePkce = true;
    opts.GetClaimsFromUserInfoEndpoint = true;
    opts.ClaimActions.MapAll();
    opts.CallbackPath = "/signin-oidc";
    opts.SignedOutCallbackPath = "/signout-callback-oidc";
});

3. 配置BFF中间件：

app.UseRouting();

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

// 映射BFF内置的登录、登出等管理端点
app.MapBffManagementEndpoints();

// 标记受保护的API端点为BFF API，自动处理认证逻辑
app.MapGet("/.well-known/bff-getsessioninfo", (HttpContext context) =>
{
    // 返回会话信息
    return Results.Json(new { /* 会话数据 */ });
})
.RequireAuthorization()
.AsBffApiEndpoint();

官方BFF库会自动区分AJAX和普通请求：未认证的AJAX请求返回401，普通请求触发302重定向，前端只需拦截401并跳转即可。

• BFF模式的核心是浏览器与BFF通过Cookie认证，BFF负责与IdP/后端API的令牌交互，前端仅需和BFF通信，认证相关操作必须通过浏览器页面跳转完成。
• 确保Angular应用与BFF处于同一域名（或子域名），并正确配置Cookie的SameSite属性，保证Cookie正常共享。

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