Blazor WASM 停留在 "Authorizing..." 和 "Completing login..."
Blazor WASM stuck on "Authorizing..." and "Completing login..."
升级到 .Net 5.0 后,我的 blazor WASM 应用程序开始卡在“正在授权...”(当用户已经登录时卡住,第一次加载重定向到登录屏幕工作正常,所以我有清除缓存,如果我想让它工作)和“完成登录...”(使用 URL 像 https://localhost:5001/authentication/login-callback?code=51FEF78805049242F1092A249B1746393790AE956B1FC2136092AE0924B3FB42&scope=openid% 20profile%20email%20MyApp.WebAPI&state=e8bffbd2b93f44dc8a261cf6d65c6165&session_state=eE0yRtJI0fkjptvZSIfiUsvuHAQoyNStmS_kv--Wcv0.DCACB551F4CC63841C2615456DD4B9BF) - 如果我在卡在“完成登录...”后转到 localhost:5001 我是终于登录了。
最初它在大多数现代计算机上运行良好,并且该问题仅在速度较慢的计算机(例如约 8 岁的笔记本电脑)上可见。然而,虽然我试图了解问题并解决它,但我也设法在我的开发人员笔记本电脑上完全阻止它,主要分支仍然可以正常工作。
创建一个新的 ASP.Net 核心应用程序并使用 IdentityServer4 进行身份验证工作正常,没有问题。
我的问题看起来类似于 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 - 但是,我也向新应用程序添加了相同的依赖项,并且仍然有效。
知道如何识别问题吗?
答案是,对 JS 库的引用 pace.js 破坏了身份验证。新版本的库大约在同一时间发布(并自动更新),我们升级到 .Net 5.0,所以不确定是 .Net 5 问题还是库问题。
升级到 .Net 5.0 后,我的 blazor WASM 应用程序开始卡在“正在授权...”(当用户已经登录时卡住,第一次加载重定向到登录屏幕工作正常,所以我有清除缓存,如果我想让它工作)和“完成登录...”(使用 URL 像 https://localhost:5001/authentication/login-callback?code=51FEF78805049242F1092A249B1746393790AE956B1FC2136092AE0924B3FB42&scope=openid% 20profile%20email%20MyApp.WebAPI&state=e8bffbd2b93f44dc8a261cf6d65c6165&session_state=eE0yRtJI0fkjptvZSIfiUsvuHAQoyNStmS_kv--Wcv0.DCACB551F4CC63841C2615456DD4B9BF) - 如果我在卡在“完成登录...”后转到 localhost:5001 我是终于登录了。
最初它在大多数现代计算机上运行良好,并且该问题仅在速度较慢的计算机(例如约 8 岁的笔记本电脑)上可见。然而,虽然我试图了解问题并解决它,但我也设法在我的开发人员笔记本电脑上完全阻止它,主要分支仍然可以正常工作。
创建一个新的 ASP.Net 核心应用程序并使用 IdentityServer4 进行身份验证工作正常,没有问题。
我的问题看起来类似于 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 - 但是,我也向新应用程序添加了相同的依赖项,并且仍然有效。
知道如何识别问题吗?
答案是,对 JS 库的引用 pace.js 破坏了身份验证。新版本的库大约在同一时间发布(并自动更新),我们升级到 .Net 5.0,所以不确定是 .Net 5 问题还是库问题。