Blazor WASM中Azure MSAL与自定义JWT认证的类型转换异常问题

我正尝试为一个已使用JWT处理认证的Blazor WASM应用添加Azure MSAL认证，但注册自定义AuthenticationStateProvider后，运行时抛出异常：

未处理的组件渲染异常：指定的转换无效。
System.InvalidCastException: 指定的转换无效。

查看源码后发现，异常原因是MSAL类期望IServiceProvider返回的AuthenticationStateProvider实现了IRemoteAuthenticationService<TRemoteAuthenticationState>接口。

以下是我使用的AuthenticationStateProvider实现代码：

public class ApiAuthenticationStateProvider : AuthenticationStateProvider
{
    private readonly HttpClient _httpClient;
    private readonly ILocalStorageService _localStorage;

    public ApiAuthenticationStateProvider(AuthenticationHttpClient authHttpClient, ILocalStorageService localStorage)
    {
        _httpClient = authHttpClient.HttpClient;
        _localStorage = localStorage;
    }
    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var savedToken = await _localStorage.GetItemAsync<string>("authToken");

        if (string.IsNullOrWhiteSpace(savedToken))
        {
            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        }

        _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", savedToken);

        return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(savedToken), "jwt")));
    }

    public void MarkUserAsAuthenticated(string email)
    {
        var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, email) }, "apiauth"));
        var authState = Task.FromResult(new AuthenticationState(authenticatedUser));
        NotifyAuthenticationStateChanged(authState);
    }

    public void MarkUserAsLoggedOut()
    {
        var anonymousUser = new ClaimsPrincipal(new ClaimsIdentity());
        var authState = Task.FromResult(new AuthenticationState(anonymousUser));
        NotifyAuthenticationStateChanged(authState);
    }

    private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
    {
        var claims = new List<Claim>();
        var payload = jwt.Split('.')[1];
        var jsonBytes = ParseBase64WithoutPadding(payload);
        var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes);

        keyValuePairs.TryGetValue(ClaimTypes.Role, out object roles);

        if (roles != null)
        {
            if (roles.ToString().Trim().StartsWith("["))
            {
                var parsedRoles = JsonSerializer.Deserialize<string[]>(roles.ToString());

                foreach (var parsedRole in parsedRoles)
                {
                    claims.Add(new Claim(ClaimTypes.Role, parsedRole));
                }
            }
            else
            {
                claims.Add(new Claim(ClaimTypes.Role, roles.ToString()));
            }
            keyValuePairs.Remove(ClaimTypes.Role);
        }

        claims.AddRange(keyValuePairs.Select(kvp => new Claim(kvp.Key, kvp.Value.ToString())));

        return claims;
    }

    private byte[] ParseBase64WithoutPadding(string base64)
    {
        switch (base64.Length % 4)
        {
            case 2: base64 += "=="; break;
            case 3: base64 += "="; break;
        }
        return Convert.FromBase64String(base64);
    }
}

我通过以下方式注册：builder.Services.AddScoped<AuthenticationStateProvider, ApiAuthenticationStateProvider>();

是否有解决该问题的方法？我已查看过相关Stack Overflow问题，但未能解决。

解决方案 #

问题核心是MSAL的认证体系依赖实现了IRemoteAuthenticationService的AuthenticationStateProvider，而自定义的ApiAuthenticationStateProvider仅继承了AuthenticationStateProvider，未实现该接口，导致类型转换失败。以下是两种可行解决方法：

方法一：让自定义Provider实现IRemoteAuthenticationService接口 #

修改自定义Provider，使其实现IRemoteAuthenticationService<RemoteAuthenticationState>接口，补全所需方法的逻辑（可根据需求集成MSAL或保留原有JWT逻辑）：

public class ApiAuthenticationStateProvider : AuthenticationStateProvider, IRemoteAuthenticationService<RemoteAuthenticationState>
{
    private readonly HttpClient _httpClient;
    private readonly ILocalStorageService _localStorage;

    public ApiAuthenticationStateProvider(AuthenticationHttpClient authHttpClient, ILocalStorageService localStorage)
    {
        _httpClient = authHttpClient.HttpClient;
        _localStorage = localStorage;
    }

    // 原有GetAuthenticationStateAsync、MarkUserAsAuthenticated等方法...

    public async Task<RemoteAuthenticationResult<RemoteAuthenticationState>> SignInAsync(RemoteAuthenticationContext<RemoteAuthenticationState> context)
    {
        // 示例：若继续使用原有JWT认证，返回成功结果；若集成MSAL，在此调用MSAL登录逻辑
        return new RemoteAuthenticationResult<RemoteAuthenticationState>
        {
            Status = RemoteAuthenticationStatus.Success,
            State = context.State
        };
    }

    public async Task<RemoteAuthenticationResult<RemoteAuthenticationState>> SignOutAsync(RemoteAuthenticationContext<RemoteAuthenticationState> context)
    {
        // 执行原有登出逻辑，同时可清理MSAL相关状态
        MarkUserAsLoggedOut();
        return new RemoteAuthenticationResult<RemoteAuthenticationState>
        {
            Status = RemoteAuthenticationStatus.Success,
            State = context.State
        };
    }

    public async Task<RemoteAuthenticationResult<RemoteAuthenticationState>> RegisterAsync(RemoteAuthenticationContext<RemoteAuthenticationState> context)
    {
        // 若无需注册功能，返回失败或NotAllowed状态
        return new RemoteAuthenticationResult<RemoteAuthenticationState>
        {
            Status = RemoteAuthenticationStatus.Failed,
            ErrorMessage = "注册功能未实现"
        };
    }
}

方法二：装饰MSAL默认的AuthenticationStateProvider #

不直接替换默认Provider，而是通过装饰器模式合并原有JWT逻辑与MSAL认证状态：

1. 调整自定义Provider代码：注入MSAL默认的AuthenticationStateProvider，在GetAuthenticationStateAsync中优先检查MSAL认证状态，再回退到原有JWT逻辑：

public class ApiAuthenticationStateProvider : AuthenticationStateProvider
{
    private readonly HttpClient _httpClient;
    private readonly ILocalStorageService _localStorage;
    private readonly AuthenticationStateProvider _msalAuthStateProvider;

    public ApiAuthenticationStateProvider(AuthenticationHttpClient authHttpClient, ILocalStorageService localStorage, AuthenticationStateProvider msalAuthStateProvider)
    {
        _httpClient = authHttpClient.HttpClient;
        _localStorage = localStorage;
        _msalAuthStateProvider = msalAuthStateProvider;
    }

    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        // 优先检查MSAL认证状态
        var msalAuthState = await _msalAuthStateProvider.GetAuthenticationStateAsync();
        if (msalAuthState.User.Identity.IsAuthenticated)
        {
            return msalAuthState;
        }

        // 回退到原有JWT认证逻辑
        var savedToken = await _localStorage.GetItemAsync<string>("authToken");
        if (string.IsNullOrWhiteSpace(savedToken))
        {
            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        }

        _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", savedToken);
        return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(savedToken), "jwt")));
    }

    // 原有MarkUserAsAuthenticated、MarkUserAsLoggedOut等方法...
}

2. 调整注册顺序：先注册MSAL认证服务，再注册自定义Provider：

// 先配置并注册MSAL认证
builder.Services.AddMsalAuthentication(options =>
{
    // 填入你的MSAL配置参数
});

// 注册自定义Provider，注入默认的AuthenticationStateProvider
builder.Services.AddScoped<AuthenticationStateProvider, ApiAuthenticationStateProvider>();

关键注意事项 #

• 若同时支持JWT和MSAL认证，需明确认证状态的优先级（如MSAL优先或JWT优先）
• 确保AddMsalAuthentication在注册自定义Provider之前执行，保证默认Provider先被注入容器
• 实现IRemoteAuthenticationService时，需保证方法逻辑符合MSAL组件的预期，避免后续功能异常

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