.NET 8 Blazor（InteractiveAuto模式）Azure AD B2C认证实现问题求助

问题根源 #

• RemoteAuthenticatorView是Blazor WebAssembly专属认证组件，依赖WebAssembly端的IRemoteAuthenticationService服务。
• InteractiveAuto模式同时运行Server和WebAssembly渲染逻辑，混用WebAssembly服务注册会与Server端默认的ServerAuthenticationStateProvider冲突，触发类型转换错误。

分步解决方案 #

1. 配置客户端（WebAssembly）认证服务 #

在Blazor Web App的客户端项目（或Client文件夹下的Program.cs）中，注册Azure AD B2C的MSAL认证服务，不要使用通用的AddApiAuthorization：

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    // 添加你的API访问范围
    options.ProviderOptions.DefaultAccessTokenScopes.Add("https://your-tenant-name.onmicrosoft.com/your-api/api/scope");
});

确保appsettings.json中配置正确的Azure AD B2C参数：

{
  "AzureAdB2C": {
    "Authority": "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/B2C_1_signup_signin",
    "ClientId": "your-client-id",
    "ValidateAuthority": false
  }
}

2. 配置Server端认证服务 #

在Server项目的Program.cs中，添加Azure AD B2C认证支持，兼容InteractiveAuto模式：

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie()
.AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAdB2C"));

builder.Services.AddAuthorization();

// 启用Blazor交互式组件支持
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

3. 调整RemoteAuthenticatorView的使用 #

确保认证页面仅在WebAssembly/InteractiveAuto渲染上下文加载，示例页面代码：

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string? Action { get; set; }
}

在Blazor Web App的路由配置中，将该页面的渲染模式设置为InteractiveAuto或InteractiveWebAssembly，避免Server端渲染时加载该组件。

4. 避免服务冲突 #

不要在Server端的Program.cs中添加AddApiAuthorization()，该方法专为纯WebAssembly项目设计，会与Server端认证服务冲突，仅在客户端项目中配置WebAssembly认证服务即可。

验证步骤 #

1. 启动项目，访问认证页面，检查是否正常跳转到Azure AD B2C登录界面。
2. 登录成功后，验证用户状态是否正确获取，API调用是否能携带认证令牌。

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