Blazor WebAssembly页面刷新后OIDC认证状态丢失问题求助

Blazor WebAssembly默认将OIDC认证状态存储在内存中，刷新页面后内存数据清空，导致认证状态丢失。要解决这个问题，需要将认证状态持久化到浏览器存储（如localStorage或sessionStorage），并正确配置OIDC客户端参数。

1. 配置持久化存储 #

在Program.cs中，配置OIDC认证时指定使用浏览器存储来保存认证状态：

builder.Services.AddOidcAuthentication(options =>
{
    // 从appsettings.json加载Keycloak配置
    builder.Configuration.Bind("Keycloak", options.ProviderOptions);
    
    // 启用令牌持久化到浏览器存储
    options.ProviderOptions.SaveTokens = true;
    
    // 指定使用WebAssembly内置的浏览器存储实现（默认用localStorage）
    options.ProviderOptions.Store = new WebAssemblyStorageOidcStore(new BrowserStorage());
    
    // 可选：改用sessionStorage（仅当前会话有效，关闭浏览器后清除）
    // options.ProviderOptions.Store = new WebAssemblyStorageOidcStore(new BrowserStorage(sessionStorage: true));
})
// 可选：自定义Claims转换逻辑（根据业务需求添加）
.AddAccountClaimsPrincipalFactory<CustomUserClaimsPrincipalFactory>();

对应的appsettings.json Keycloak配置示例：

{
  "Keycloak": {
    "Authority": "https://your-keycloak-domain/auth/realms/your-realm-name",
    "ClientId": "your-blazor-client-id",
    "RedirectUri": "https://localhost:5001/authentication/login-callback",
    "PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
    "ResponseType": "code",
    "Scope": "openid profile email roles"
  }
}

2. 检查Keycloak客户端配置 #

确保Keycloak后台的客户端配置符合Blazor WASM的单页应用特性：

• Access Type设置为public（无后端服务，无法安全存储客户端密钥）
• Valid Redirect URIs包含应用的登录回调地址（如https://localhost:5001/authentication/login-callback）
• Post Logout Redirect URIs包含登出回调地址
• 启用Standard Flow Enabled（OIDC授权码流）

3. 配置令牌自动刷新 #

为避免持久化令牌过期后需重新登录，开启自动刷新逻辑：

builder.Services.AddOidcAuthentication(options =>
{
    // 其他配置...
    
    options.ProviderOptions.RefreshTokenMode = OidcRefreshTokenMode.OnExpiration;
    options.ProviderOptions.ClockSkew = TimeSpan.FromMinutes(1); // 允许的服务器与客户端时钟偏差
})

4. 安全注意事项 #

• localStorage会长期保存令牌，适合需要持久登录的场景；敏感业务建议用sessionStorage，关闭浏览器后自动清除
• 必须做好应用的XSS防护，避免令牌被恶意脚本窃取
• 不要在前端存储额外敏感信息，Keycloak返回的JWT令牌仅保留必要用户声明即可

内容的提问来源于stack exchange，提问作者Frank Raúl Pérez Pérez