Blazor中AddOidcAuthentication实现OIDC弹窗登录的配置咨询

结论 #

AddOidcAuthentication 没有原生提供和 AddMsalAuthentication 里 options.ProviderOptions.LoginMode 直接对应的配置项，默认走全页重定向到认证站点的逻辑，但可以通过自定义认证服务的方式实现弹窗登录效果。

实现方案 #

Blazor WebAssembly 的 OIDC 认证底层基于 oidc-client-js 库，该库本身支持 signinPopup 弹窗登录能力，你只需要替换默认的重定向登录逻辑即可：

1. 自定义认证服务，重写默认的登录方法

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using Microsoft.JSInterop;
using Microsoft.Extensions.Options;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;

public class PopupOidcAuthService : RemoteAuthenticationService<RemoteAuthenticationState, OidcProviderOptions>
{
    public PopupOidcAuthService(
        IJSRuntime jsRuntime,
        IOptionsSnapshot<RemoteAuthenticationOptions<OidcProviderOptions>> options,
        NavigationManager navigationManager,
        ILoggerFactory loggerFactory)
        : base(jsRuntime, options, navigationManager, loggerFactory)
    { }

    protected override async Task<RemoteAuthenticationResult<RemoteAuthenticationState>> SignInAsync(
        RemoteAuthenticationContext<RemoteAuthenticationState> context)
    {
        try
        {
            // 调用底层oidc-client的弹窗登录方法
            await JSRuntime.InvokeVoidAsync("window.AuthenticationService.signinPopup");
            return new RemoteAuthenticationResult<RemoteAuthenticationState>
            {
                Status = RemoteAuthenticationResultStatus.Success,
                State = context.State
            };
        }
        catch (Exception ex)
        {
            return new RemoteAuthenticationResult<RemoteAuthenticationState>
            {
                Status = RemoteAuthenticationResultStatus.Failure,
                ErrorMessage = ex.Message
            };
        }
    }
}

2. 在 Program.cs 中替换默认的认证服务

// 原有OIDC配置保留
builder.Services.AddOidcAuthentication(options =>
{
    options.ProviderOptions.Authority = "你的IdentityServer4地址";
    options.ProviderOptions.ClientId = "你的客户端ID";
    options.ProviderOptions.ResponseType = "code";
    // 其余原有配置不变
});

// 注册自定义的弹窗认证服务，覆盖默认实现
builder.Services.AddScoped<IAuthenticationService, PopupOidcAuthService>();

注意事项 #

1. 需要在 IdentityServer4 侧配置对应客户端允许跨域请求，否则弹窗会被浏览器拦截
2. 建议单独配置弹窗登录的回调地址，和原有重定向回调地址区分开，避免逻辑冲突
3. 部分浏览器的广告拦截规则会默认拦截登录弹窗，需要做好兼容提示

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