【问题标题】:Blazor WASM ASP.NET Core hosted with Identity doesn't work when deployed使用 Identity 托管的 Blazor WASM ASP.NET Core 在部署时不起作用
【发布时间】:2021-10-19 17:08:09
【问题描述】:

我是 Blazor 的新手,所以请原谅任何术语混淆。

我创建了一个 Blazor Web Assembly 应用程序。我勾选了“ASP.NET Core Hosted”并选择了身份验证“Use Individual Accounts”。

Visual Studio 创建了一个包含 3 个项目(客户端、服务器和共享)的基本文件结构。我将脚手架的身份页面添加到服务器项目中。我运行了迁移,并且在本地一切正常。我可以注册用户、登录、注销等。

我将我的应用程序部署到 IIS。我有两个应用程序在 IIS 的不同端口上运行。我还发布了共享项目。我还确保权限设置正确。

首先我尝试访问服务器应用程序。我尝试打开它,但它给了我一个空白页。

当我访问客户端应用程序时,网站会打开,但与身份相关的功能会被破坏。该页面仅显示“正在授权”。我检查了控制台。

我收到一个奇怪的错误:

暴击:Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

未处理的异常渲染组件:JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符

Microsoft.JSInterop.JSException:JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符

关于什么是错的任何想法?我在 IIS 中是否设置错误?

客户端应用程序的 Program.cs 如下所示:

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

        builder.Services.AddHttpClient("Clients.Admin.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
            .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

        // Supply HttpClient instances that include access tokens when making requests to the server project
        builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("Clients.Admin.ServerAPI"));

        builder.Services.AddApiAuthorization();

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

服务器的 Startup.cs 如下所示:

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddDatabaseDeveloperPageExceptionFilter();

        services.AddDbContext<ApplicationDbContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("DB")));

        services.AddIdentity<ApplicationUser, IdentityRole>()
            .AddRoles<IdentityRole>()
            .AddDefaultUI()
            .AddEntityFrameworkStores<ApplicationDbContext>()
            .AddDefaultTokenProviders();

        var builder = services.AddIdentityServer()
            .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

        builder.AddDeveloperSigningCredential();

        services.AddAuthentication()
            .AddIdentityServerJwt();

        services.AddLogging(loggingBuilder => { loggingBuilder.AddSeq(); });

        services.AddControllersWithViews();
        services.AddRazorPages();

        services.AddDbContextFactory<CredoContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DB")));
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseMigrationsEndPoint();
            app.UseWebAssemblyDebugging();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseBlazorFrameworkFiles();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseIdentityServer();
        app.UseAuthentication();
        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapControllers();
            endpoints.MapFallbackToFile("index.html");
        });
    }
}

【问题讨论】:

  • 我尝试访问服务器项目,但我添加了 /index.html 并加载了主页,但随后给了我这个错误:未处理的异常渲染组件:无法从 '_configuration/Project. Endpoints.Admin.Client'
  • 问这个问题可能有点傻,但是您是否为您的 blazor 版本安装了服务器运行时?由于您是新手,这通常是人们忘记的一步。

标签: blazor webassembly


【解决方案1】:

首先,出于测试目的,最好从 ASP.NET Core 托管应用程序开始。
使用此配置,您只需部署 Blazor Server 项目,并且您可以在同一地址访问客户端 (WASM) 应用程序。

如果您希望拥有两个不同的项目,请记住服务器项目没有任何开箱即用的 UI。
您可以将 Swagger 添加到此项目以允许访问您的 Web API:
https://docs.microsoft.com/en-us/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-5.0&tabs=visual-studio

要使用客户端 (WASM),您需要使用 URL 重写模块部署到 IIS:
https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#rewrite-urls-for-correct-routing-1

如果您收到如下错误:

Unhandled exception rendering component: JSON.parse: unexpected character at line 1 column 1 of the JSON data

检查您在客户端上的 appsettings.json 配置(该文件必须在 wwwroot 文件夹中,在服务器项目中位于规范位置)。
在您的客户项目的 Program.cs 中检查这一行:

builder.Services.AddHttpClient("TestWasmAuthIndividual.ServerAPI", 
client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))

以上示例来自一个 ASP.NET Core 托管应用程序。
client.BaseAddress 必须是您的服务器地址。

如果您使用两个不同的 DNS 名称进行部署,情况应该是这样的:

现在您需要在您的客户端项目中使用https://server.yourapp.com 作为client.BaseAddress

错误Could not load settings ... 与 SSL 证书和您需要添加到 IdentityServer 配置的相关文件有关。
看看这个文档: https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/hosted-with-identity-server?view=aspnetcore-5.0&tabs=visual-studio#host-in-azure-app-service-with-a-custom-domain-and-certificate-1

此文档适用于 Azure,但证书说明与 IIS 类似。
在实践中,您需要创建/获取 SSL 证书,并且需要在 IIS/Azure 配置中加载它,然后您需要配置 IdentityServer 以使用您的证书。

出于测试目的,最好使用 Development 证书,使用您可以在服务器项目的 appsettings.development.json 中找到的配置。

将以下行复制到 appsettings.json 并重试:

"IdentityServer": {
    "Key": {
      "Type": "Development"
    }
  }

【讨论】:

    【解决方案2】:

    我将我的应用程序部署到 IIS。我有两个应用程序在 IIS 的不同端口上运行。我还发布了共享项目。

    哪个“两个应用程序”?从托管项目模板中,您应该只发布服务器应用程序。它为客户服务。 您应该发布共享项目。

    JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符

    这意味着 URL 与路由不匹配。您可以使用开发工具 (F12) 进行调试。找出您的应用调用的 API 并使用 PostMan 或浏览器测试该地址。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-20
      • 1970-01-01
      • 1970-01-01
      • 2022-07-08
      • 2021-06-20
      • 1970-01-01
      相关资源
      最近更新 更多