.NET Core OIDC 质询重定向不适用于 Angular 前端

Question

我正在尝试实现前端模式的令牌中介后端/后端（我的前端是 Angular v18）。我希望我的前端是愚蠢的并且没有任何处理令牌的知识。我有一个 ASP.NET Core 8 Web API，它设置 OIDC 配置如下：

//... other code removed for brevity
builder.Services.AddAuthentication.AddOpenIdConnect(
    OpenIdConnectDefaults.AuthenticationScheme,
    opts =>
    {
        opts.Authority = builder.Configuration["Authority"];
        opts.ClientId = builder.Configuration["ClientId"];
        opts.ClientSecret = builder.Configuration["ClientSecret"];
        opts.CallbackPath = "/signin-oidc";
        opts.ResponseType = "code";
        opts.UsePkce = true;

        if (builder.Environment.IsDevelopment())
        {
            opts.RequireHttpsMetadata = false;
        }

        opts.GetClaimsFromUserInfoEndpoint = true;
        opts.ClaimActions.MapAll();

    });

使用以下中间件，检查特定的 cookie，如果不存在，则发起挑战：

app.Use(
async (context, next) =>
{
    if (!context.Request.Cookies.ContainsKey(AuthConstants.CookieSessionKey))
    {
        await context.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme);
    }
    else
    {
        await next.Invoke(context);
    }
});

如果我直接从浏览器调用 API 中的端点，则整个流程有效，但如果我尝试从 Angular 应用程序调用它，则整个流程无效，例如：

this.http.get<UserSession>("https://localhost:7030/.well-known/bff-getsessioninfo")
    .subscribe(resp => {
        console.log(resp);
    })

相反，后端返回 200，Angular 尝试反序列化响应，但失败了，因为它是 IdP 登录页面的 HTML

语法错误：意外的标记'<', "

我的预期流程是：

1. 前端尝试获取用户会话信息
2. 由于缺少会话 cookie，后端看到未经身份验证的请求。
3. 后端触发OIDC挑战
4. 重定向至 IdP 进行登录
5. 使用访问令牌重定向到我的后端
6. 使用 cookie 集将用户会话信息发送回我的角度前端

为什么从 Angular 调用时不能正确重定向？

Answer 1

尝试将响应类型设置为

'text'

，以便 Angular 可以解析响应。

this.http.get<UserSession>("https://localhost:7030/.well-known/bff-getsessioninfo", 
    { responseType: 'text' }) // <- changed here!
    .subscribe(resp => {
        console.log(resp);
    })