Blazor WASM 卡在“正在授权...”和“正在完成登录...”

Question

升级到 .Net 5.0 后，我的 blazor WASM 应用程序开始卡在“授权...”上（当用户已经登录时卡住，首先加载重定向到登录屏幕工作正常，所以我必须清除缓存如果我希望它工作）和“完成登录...”（使用类似 https://localhost:5001/authentication/login-callback?code=51FEF78805049242F1092A249B1746393790AE956B1FC2136092AE0924B3FB42&scope=openid%20profile%20email%20MyApp.WebAPI& 的 URL状态=e8bffbd2b93f44dc8a261cf6d65c6165&session_state= eE0yRtJI0fkjptvZSIfiUsvuHAQoyNStmS_kv--Wcv0.DCACB551F4CC63841C2615456DD4B9BF) - 如果我在“正在完成登录...”卡住后转到 localhost:5001，我终于登录了。

最初，它在大多数现代计算机上运行良好，并且该问题仅在速度较慢的计算机（例如大约 8 年的笔记本电脑）上可见。然而，当我试图理解这个问题并解决它时，我也设法在我的开发人员笔记本电脑上完全阻止它，其中主分支仍然工作得很好。

使用 IdentityServer4 进行身份验证创建新的 ASP.Net Core 应用程序效果很好，没有任何问题。

我的问题看起来类似于https://github.com/dotnet/aspnetcore/issues/26195 - 但是，我仅使用 IdentityServer4，并且在开发人员控制台中没有看到任何异常。

我试图将代码减少到最低限度，所以这是

Program.cs

：

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");

    builder.Services.AddApiAuthorization();

    builder.Services.AddSingleton<IStringLocalizer>(serviceProvider =>
    {
        var factory = serviceProvider.GetRequiredService<IStringLocalizerFactory>();
        return factory.Create(typeof(SharedResource));
    });
    builder.Services.AddLocalization();

    builder.Services
        .AddBlazorise()
        .AddBootstrapProviders();

    builder.Logging.SetMinimumLevel(LogLevel.Trace);

    var host = builder.Build();

    host.Services.UseBootstrapProviders();

    await host.RunAsync();
}

App.razor

：

@inject IStringLocalizer S

<ThemeManager>
    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(App).Assembly" PreferExactMatches="@true">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        @if (context.User.Identity?.IsAuthenticated ?? false)
                        {
                            <p>@S["You don't have enough permissions to access this page."]</p>
                        }
                        else
                        {
                            <RedirectToLogin />
                        }
                    </NotAuthorized>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <NotFoundError>
                    </NotFoundError>
                </LayoutView>
            </NotFound>
        </Router>
    </CascadingAuthenticationState>
</ThemeManager>

MainLayout.razor

：

@inherits Microsoft.AspNetCore.Components.LayoutComponentBase

<header>
</header>

<main>
    @Body
</main>

Authentication.razor

：

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@if (Action == "logged-out")
{
    <RedirectToLogin RedirectBackToRoot="true"></RedirectToLogin>
}

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

问题是，它卡住了，我什至不知道出了什么问题。我在这里拥有的一个依赖项是 https://github.com/stsrki/Blazorise - 但是，我也向新应用程序添加了相同的依赖项，并且该依赖项仍然有效。

知道如何识别问题吗？

Answer 1

答案是，JS库pace.js的引用破坏了身份验证。该库的新版本大约在同一时间发布（并自动更新），我们升级到 .Net 5.0，因此不确定这是 .Net 5 问题还是库问题。

Answer 2

我在登录过程中也经历过挂起，但在这篇文章发布多年后。我的问题发生在 .NET 6 上。我注意到 Microsoft.AspNetCore.Authentication.JwtBearer 是版本 6.0.8，该版本上周刚刚发布。我降级到 6.0.7，挂起就消失了。

Answer 3

将以下内容添加到 Blazor 项目文件后，问题就消失了：

<ItemGroup>
    <TrimmerRootAssembly Include="Microsoft.Authentication.WebAssembly.Msal" />
    <TrimmerRootAssembly Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" />
  </ItemGroup>

与此处描述的问题类似https://github.com/dotnet/aspnetcore/issues/49956