首页 > 解决方案 > Blazor WASM IdentityServer4 注销警报

问题描述

我正在将新的独立 Blazor WASM 身份验证流程与 IdentityServer4 一起使用。我想向用户提供一条消息,说明他们由于不活动而被注销。我已经使用低质量的 js alert() 实现了此功能,但我想知道是否可以使用自定义弹出窗口或发送到 identityserver 的重定向参数来实现此功能,以在 identityserver 登录页面上向他们显示警报。

我想不出一种方法来中断 OnLogoutSucceeded 之后发生的立即重定向。js alert() 暂停重定向并正常工作。我可以修改传出登录重定向 uri 以向 IDS4 提供参数吗?

<RemoteAuthenticatorView Action="@Action" OnLogOutSucceeded="LogoutSucceeded">
</RemoteAuthenticatorView>

@code{
    [Parameter] public string Action { get; set; }

    private async Task LogoutSucceeded()
    {
        await JsInterop.InvokeVoidAsync("alert", "You have been logged out due to inactivity.");
    }
}

标签: identityserver4blazorblazor-webassembly

解决方案


我想到了:

//program.cs
  builder.Services.AddOidcAuthentication<ApplicationAuthenticationState>(options =>
            {
                //options
            });

//Authentication.razor
<RemoteAuthenticatorViewCore Action="@Action"
                             TAuthenticationState="ApplicationAuthenticationState"
                             OnLogOutSucceeded="LogoutSucceeded"
                             AuthenticationState="AuthState" />

 [Parameter]
    public string Action { get; set; }

    public ApplicationAuthenticationState AuthState { get; set; } = new ApplicationAuthenticationState();

    public bool Idled { get; set; }

    protected override void OnInitialized()
    {
        if (RemoteAuthenticationActions.IsAction(RemoteAuthenticationActions.LogOut, Action))
        {
            var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
            if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("idle", out var param))
            {
                AuthState.Idle = !string.IsNullOrWhiteSpace(param);
            }
        }
    }

  private void LogoutSucceeded(ApplicationAuthenticationState state)
    {
        Idled = state.Idle;
        if (Idled)
        {
             // save redirect for later
            var returnUrl = state.ReturnUrl;
            // cancel redirect
            state.ReturnUrl = null;

              // implement custom flow
        }
    }

推荐阅读