Blazor wasm 托管“无法从配置/TestApp.Client 加载设置 - (AuthenticationService.js)

Question

问题摘要

---

设置

Boilerplate Blazor 托管 wasm 应用程序，并使用以下身份验证：dotnet new blazorwasm -ho -au Individual -o TestApp

我将默认数据库更改为使用 MySql

我在我的开发机器上运行了该应用程序，并测试了我可以创建用户、登录等。在我的开发环境中一切正常。

部署站点加载后，但在主体顶部显示“正在授权”，并在浏览器底部抛出“发生未处理的错误”消息以及浏览器控制台中的错误消息，如下所示

---

部署

服务器环境

Raspberry Pi4(8gb) 运行 Ubuntu Server 20.04（64 位）和 Apache2

部署方式

将更改推送到 Github 后，我在服务器上提取并拉取远程存储库

然后，我确保项目构建并发布到/var/www/[MyWebAddress]/TestApp使用：dotnet publish -o /var/www/[my web address]/TestApp --no-self-contained -r linux-x64

我直接从Microsoft 文档复制了我的 apache 站点 conf 文件（[我的网址].conf）：

<VirtualHost *:80>
    ServerName www.[my web address]
    ServerAlias *.[my web address]

    DocumentRoot "/var/www/[my web address]/TestApp"
    ErrorDocument 404 /wwwroot/index.html

    AddType application/wasm .wasm
    AddType application/octet-stream .dll

    <Directory "/var/www/[my web address]/TestApp">
        Options -Indexes
        AllowOverride None
    </Directory>

    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE application/octet-stream
        AddOutputFilterByType DEFLATE application/wasm
        <IfModule mod_setenvif.c>
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4.0[678] no-gzip
        BrowserMatch bMSIE !no-gzip !gzip-only-text/html
    </IfModule>

故障排除见解

在尝试此设置之前，我进行了相同的部署，但没有使用身份验证或数据库连接。我刚刚使用上述相同方法部署了一个样板 Blazorwasm 托管应用程序，并在服务器上对其进行了测试。一切正常，包括FetchData和Counter页面。这让我非常确定我的部署方法有效，并且与导致问题的 IdentityServer 有关。

为了测试这一点，我使用连接到手机提供的无线热点的笔记本电脑。这允许我从外部网络访问我的本地服务器（只需使用禁用 wifi 的手机即可，但我无法打开浏览器工具在移动设备上进行故障排除）。我从不同的浏览器中收到的错误略有不同，但它们与 Firefox 生成的错误类似：

Error: "Failed to start platform. Reason: AbortError: The operation was aborted. "
    v https://[my web address]/ framework/blazor.webassembly.js:1
    u https://[my web address]/ framework/blazor.webassembly.js:1
    u https://[my web address]/ framework/blazor.webassembly.js:1
    u https://[my web address]/ framework/blazor.webassembly.js:1
AbortError: The operation was aborted.

crit: Microsoft.AspNetCore.Components.WebAssembly.REnderingWebAssemblyREenderer[100]
      Unhandled exception rendering component: Could not load settings form '_configuration/TestSite.Client'
      createUserManager@https://[my web address]/ content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js:1:5893

[ continued error messages omitted ]

• 主布局已加载。我可以看到侧栏和导航菜单。单击侧边栏链接会更改地址栏中的 url，但不会发生路由
• 导航菜单仅显示“关于”导航链接。（缺少“登录”和“注册”）

---

如果这是一个非常基本的错误的结果，我不会感到惊讶，但如果我有一些与我想做的事情不兼容的关键部分，我也不会感到惊讶。我只是在学习，所以请不要认为我已经完成了所有明显的事情。对我来说可能不是那么明显。

---

---

进步

从下面评论中Pavel Voronin提供的链接中，我找到了解决最初问题的解决方案：

来自Github 问题

就我而言，即使我启动服务器项目，错误也会出现。我的身份服务器未安装在我的应用程序所在的同一服务器上。

所以，我在 Program.cs （客户端）中做了一些更改

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");
    builder.Services.AddHttpClient("BlazorApp1.ServerAPI", client =>  
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
        .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
    builder.Services.AddTransient(sp => 
        sp.GetRequiredService<IHttpClientFactory>() 
        CreateClient("BlazorApp1.ServerAPI"));
    //The following line has been disabled
    //builder.Services.AddApiAuthorization();
    //In order to authenticate to IS4:
    builder.Services.AddOidcAuthentication(options =>
    {
        builder.Configuration.Bind("Local", options.ProviderOptions);
    });

await builder.Build().RunAsync();
}

我还使用 Authority 和 ClientId 配置 OpenId 设置appsettings.json。进行此更改后，错误消失。

不确定这是否是该错误的解决方案。

对程序文件进行更改后，页面按预期加载，没有错误

但是，当我单击“注册”链接时，在重定向回索引页面之前会出现一条简短的“不支持注册”消息

---

经过一番研究后，我认为这不是一个解决方案，我正在回滚它

从上面引用的例子来看：

我的身份服务器未安装在我的应用程序所在的同一服务器上。

这导致他使用OIDC而不是ApiAuthentication。对我来说情况并非如此，因为我的身份验证位于 Blazor 服务器应用程序上，该应用程序是 Blazor“托管”模板的一部分，该模板本质上充当项目的 api

我在部署工作流程的描述中没有包含的一件事是，在发布之前，从 GitHub 拉取并在服务器存储库中构建项目后，我迁移并更新了服务器上的数据库。我已验证数据库已创建并且所有身份验证表都存在于服务器数据库上

我还有一个理论，它是使用服务器上的 IIS 设置启动的。我在开发过程中所做的测试是使用 Kestrel。我使用 IIS 从 Visual Studio 启动，并遇到了一些与我从服务器看到的类似错误。因此，我从这两个文件中删除了所有 IIS 配置launchsettings.json并重新发布。行为没有改变

---

我认为我已经缩小了范围

• 数据库连接和配置，包括连接字符串
• apache2 中的端口代理设置（除非我缺少压缩设置或类似的设置）

---

我很确定这与配置 Identity Server 有关。

Answer 1

AddOidcAuthentication 调用 OidcConfigurationController 来管理身份验证任务，该控制器使用 AuthenticationService.js 您需要设置控制器以允许匿名请求正常工作

 [AllowAnonymous]
public class OidcConfigurationController : Controller
{
    private readonly ILogger<OidcConfigurationController> _logger;

    public OidcConfigurationController(IClientRequestParametersProvider clientRequestParametersProvider, ILogger<OidcConfigurationController> logger)
    {
        ClientRequestParametersProvider = clientRequestParametersProvider;
        _logger = logger;
    }

    public IClientRequestParametersProvider ClientRequestParametersProvider { get; }

    [HttpGet("_configuration/{clientId}")]
    public IActionResult GetClientRequestParameters([FromRoute] string clientId)
    {
        var parameters = ClientRequestParametersProvider.GetClientParameters(HttpContext, clientId);
        return Ok(parameters);
    }
}