Blazor托管WASM集成数据库认证与Keycloak OIDC认证异常问题

1. 适配RemoteAuthenticatorView的依赖接口 #

RemoteAuthenticatorView底层依赖IRemoteAuthenticationStateProvider<T>接口，当你用自定义CompositeAuthStateProvider替换默认认证状态提供者后，必须让它实现这个接口，同时内部持有OIDC默认的RemoteAuthenticationStateProvider实例，在处理OIDC相关认证动作时委托给它执行。

示例代码：

public class CompositeAuthStateProvider : AuthenticationStateProvider, IRemoteAuthenticationStateProvider<RemoteAuthenticationState>
{
    private readonly CustomAuthStateProvider _localAuthProvider;
    private readonly RemoteAuthenticationStateProvider<RemoteAuthenticationState> _oidcAuthProvider;
    private AuthenticationStateProvider _currentProvider;

    public CompositeAuthStateProvider(CustomAuthStateProvider localAuthProvider, 
                                      RemoteAuthenticationStateProvider<RemoteAuthenticationState> oidcAuthProvider)
    {
        _localAuthProvider = localAuthProvider;
        _oidcAuthProvider = oidcAuthProvider;
        _currentProvider = _localAuthProvider; // 默认使用本地数据库认证
    }

    // 切换认证模式的方法
    public void SwitchToOidc()
    {
        _currentProvider = _oidcAuthProvider;
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    public void SwitchToLocal()
    {
        _currentProvider = _localAuthProvider;
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    public bool IsUsingOidc() => _currentProvider == _oidcAuthProvider;

    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        return _currentProvider.GetAuthenticationStateAsync();
    }

    // 实现IRemoteAuthenticationStateProvider接口方法，全部委托给OIDC提供者
    public Task<RemoteAuthenticationState> GetAuthenticatedStateAsync(string? returnUrl)
    {
        return _oidcAuthProvider.GetAuthenticatedStateAsync(returnUrl);
    }

    public Task<RemoteAuthenticationResult<RemoteAuthenticationState>> SignInAsync(RemoteAuthenticationContext<RemoteAuthenticationState> context)
    {
        return _oidcAuthProvider.SignInAsync(context);
    }

    public Task<RemoteAuthenticationResult<RemoteAuthenticationState>> SignOutAsync(RemoteAuthenticationContext<RemoteAuthenticationState> context)
    {
        return _oidcAuthProvider.SignOutAsync(context);
    }
}

2. 修正服务注册顺序与关联 #

在客户端Program.cs中，先完成OIDC认证的配置注册，再注册自定义认证提供者和复合认证提供者，同时显式绑定IRemoteAuthenticationStateProvider到复合提供者实例：

// 先配置Keycloak OIDC认证
builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Keycloak", options.ProviderOptions);
    // 补充OIDC配置：回调地址、客户端ID等
});

// 注册自定义本地认证提供者
builder.Services.AddScoped<CustomAuthStateProvider>();

// 注册复合认证提供者，替换默认的AuthenticationStateProvider
builder.Services.AddScoped<AuthenticationStateProvider, CompositeAuthStateProvider>();

// 显式注册IRemoteAuthenticationStateProvider，确保RemoteAuthenticatorView能获取到正确实例
builder.Services.AddScoped<IRemoteAuthenticationStateProvider<RemoteAuthenticationState>>(sp =>
    (CompositeAuthStateProvider)sp.GetRequiredService<AuthenticationStateProvider>());

3. 调整登录页面的逻辑处理 #

在登录页面中，根据用户选择的认证方式切换提供者，再渲染对应的登录组件：

@inject CompositeAuthStateProvider AuthProvider

<div>
    <button @onclick="AuthProvider.SwitchToLocal">数据库账号登录</button>
    <button @onclick="AuthProvider.SwitchToOidc">Keycloak登录</button>
</div>

@if (AuthProvider.IsUsingOidc())
{
    <RemoteAuthenticatorView Action="RemoteAuthenticationActions.Login" />
}
else
{
    <!-- 自定义数据库登录表单 -->
    <input type="text" @bind="Username" placeholder="用户名" />
    <input type="password" @bind="Password" placeholder="密码" />
    <button @onclick="LocalLogin">登录</button>
}

@code {
    private string Username { get; set; }
    private string Password { get; set; }

    private async Task LocalLogin()
    {
        // 调用CustomAuthStateProvider的本地登录逻辑
        await ((CustomAuthStateProvider)AuthProvider.GetLocalProvider()).LoginAsync(Username, Password);
    }
}

4. 排查类型转换异常的关键点 #

如果仍出现InvalidCastException，重点检查：

• 确认CompositeAuthStateProvider完整实现了IRemoteAuthenticationStateProvider<RemoteAuthenticationState>的所有方法
• 服务注册时，IRemoteAuthenticationStateProvider的实例是否正确指向CompositeAuthStateProvider
• 切换认证模式后，是否调用了NotifyAuthenticationStateChanged通知组件状态更新

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