如何在Blazor WASM应用中集成hello.dev第三方认证器？

核心问题原因 #

Blazor WASM的认证模型与Server端完全不同：Server端依赖ASP.NET Core的Cookie/OIDC中间件处理认证流程，而WASM需要在客户端直接配置OIDC服务并注册对应的AuthenticationStateProvider，你当前的WASM项目缺少这部分关键配置。

缺失的配置环节 #

1. 在WASM项目的Program.cs中注册OIDC认证服务 #

替换或添加以下代码，配置hello.dev的OIDC参数：

builder.Services.AddOidcAuthentication(options =>
{
    // 配置hello.dev身份提供者信息
    options.ProviderOptions.Authority = "https://issuer.hello.coop";
    options.ProviderOptions.ClientId = builder.Configuration["HelloAuthentication:ClientId"];
    
    // 授权码流配置（hello.dev支持的模式）
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.RedirectUri = "authentication/login-callback"; // WASM默认回调地址
    options.ProviderOptions.PostLogoutRedirectUri = "authentication/logout-callback"; // 登出回调地址
    
    // 配置需要的权限范围
    options.ProviderOptions.Scope.Clear();
    options.ProviderOptions.Scope.Add("openid");
    options.ProviderOptions.Scope.Add("name");
    options.ProviderOptions.Scope.Add("email");
    
    // 启用PKCE（WASM推荐的安全机制，默认已开启，显式声明更稳妥）
    options.ProviderOptions.ResponseMode = "query";
});

2. 在App.razor中添加认证状态级联 #

必须用<CascadingAuthenticationState>包裹路由组件，才能在子组件中通过级联参数获取认证状态：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>抱歉，该地址不存在。</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

3. 组件中获取认证状态（与Server端写法一致） #

现在可以在任意组件中使用级联参数获取当前用户信息，无需修改原有代码：

[CascadingParameter]
private Task<AuthenticationState> AuthState { get; set; }

// 获取当前用户示例
var currentUser = (await AuthState).User;
var userName = currentUser.Identity.Name;
var userEmail = currentUser.Claims.FirstOrDefault(c => c.Type == "email")?.Value;

4. 调整登录/登出逻辑（可选，替代后端LoginController） #

WASM可以直接在前端处理登录/登出，无需调用后端Controller：

<AuthorizeView>
    <Authorized>
        欢迎，@context.User.Identity.Name！
        <button @onclick="Logout">登出</button>
    </Authorized>
    <NotAuthorized>
        <button @onclick="Login">登录</button>
    </NotAuthorized>
</AuthorizeView>

@code {
    [Inject]
    private NavigationManager NavManager { get; set; }

    [Inject]
    private IAuthenticationService AuthService { get; set; }

    private async Task Login()
    {
        await AuthService.SignInAsync();
    }

    private async Task Logout()
    {
        await AuthService.SignOutAsync();
        NavManager.NavigateTo("/");
    }
}

注意事项 #

• 如果是WASM托管模式（WASM + ASP.NET Core后端），后端的LoginController可以保留，但建议优先使用WASM客户端的OIDC流程，减少后端依赖。
• 确保hello.dev控制台中已将authentication/login-callback添加到允许的回调地址列表中，否则会出现认证失败。

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