标签: blazor-webassembly

我正在寻找在 Blazor WebAssembly 应用程序中安全存储应用程序机密的方法。我们可以在下面的 MSDN 文档中找到服务器端应用程序的详细信息。

https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets?view=aspnetcore-3.1&tabs=windows

我们如何将这些秘密用于完全在客户端浏览器中运行的 Blazor WebAssembly 应用程序？

我的基本场景是，需要将密码、产品密钥（许可密钥）信息保留在应用程序代码之外。例如，我们在 Program.cs 的静态 main 方法中加载许可证。

https://i.stack.imgur.com/kCrV1.png

 public class Program
    {
        public static async Task Main(string[] args)
        {
            //want to access the product key here and need to avoid hardcoding
            SomeThirdPartyLibrary.RegisterLicense("product-key");
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

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

我搜索了 blazor 的文档，但找不到任何详细信息。请帮助我找到在 Blazor WebAssembly 中解决此问题的推荐方法。

（对于服务器端，我们有多种选择，但对于客户端，推荐的方式可能是）

我有一个 Blazor Web assembly 应用程序，其中包含一个用户服务，旨在访问 API 来检索用户的详细信息。该服务如下所示：

public class UserDataService : IUserDataService
{
    public readonly HttpClient _HttpClient;

    public UserDataService(HttpClient httpClientDI)
    {
        _HttpClient = httpClientDI;
    }

    public async Task<User> GetUserInfo()
    {
        try
        {
            return await _HttpClient.GetFromJsonAsync<User>("api/users/MyUserInfo");
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
            throw;
        }
    }
}

该 API 专门设计用于从客户端请求中读取加密的 cookie。该 cookie 包含用户的电子邮件地址，用户信息服务使用它来检索更详细的用户信息集。

[HttpGet("MyUserInfo")]
public User MyUserInfo()
{
    var myCookie = HttpContext.Request.Cookies.FirstOrDefault(c => c.Key == "MyCookie");

    var userMask = JsonConvert.DeserializeObject<AuthUserMask>(Protector.Unprotect(myCookie.Value));

    var user = UserService.Find(userMask.Email).FirstOrDefault();

    return user;
}

当我运行 Web 应用程序时，我能够验证浏览器中是否存在 cookie，但是当应用程序向 API …

我有一个使用 IdentityServer 的 Blazor WebAssembly 应用程序，该应用程序附带模板作为我的身份验证服务。我遇到一个问题，一些用户在尝试登录时看到“尝试登录时出错：''”。我让用户清除了 cookie 和缓存，但他们在所有浏览器中仍然遇到这个问题。奇怪的是，大多数用户都能够登录，但只有一小部分用户遇到该错误。另一个奇怪的事情是，似乎如果他们使用其他设备，例如手机、另一台电脑或 iPad，它就可以工作。什么可能导致此问题？我在尝试调试这个问题时遇到了麻烦，因为我无法在我的终端上复制它，并且到目前为止没有看到任何日志来获取任何信息。

该应用程序使用 Linux Docker 容器托管在 Google Cloud Platform 中。

先感谢您

编辑：这是我的启动课程

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

    public IConfiguration Configuration { get; }

    readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
    private const string XForwardedPathBase = "X-Forwarded-PathBase";
    private const string XForwardedProto = "X-Forwarded-Proto";

    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your …

今天我有一个问题，这是其中一个问题，你一直想知道但你总是害怕问；）但是这个问题也与 BlazorWebAssembly 应用程序 docker 支持相关。所以也许我会描述我做了什么。

所以我确实想玩一点尖端 blazor，当然还有 .NET 5.0（我的最后一个“尖端技术”是 ASP.NET MVC - 所以是的，已经有一段时间了:)）

一开始我不太清楚那些与 Blazor 相关的选项是做什么用的。所以我选择了：

您可以发现，“启用 Docker 支持”选项是灰色的。所以就像“docker支持问题预览”:)

我不知道什么选项：“ASP.NET Core 托管”代表，所以我没有使用它（这是一个错误）一旦您选中此选项，它将创建一个服务器应用程序，一个客户端（Blazor）一个和一个共享（这是为了他们之间的模型目的）

我不知道，所以我必须添加我自己的 WebApi 项目和模型的一些项目:)

现在，下一步是添加 docker 支持（令人惊讶的是这是可能的）

这创建了一个 docker 文件：

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:5.0-buster-slim AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:5.0-buster-slim AS build
WORKDIR /src
COPY ["BlazorApp/BlazorApp.csproj", "BlazorApp/"]
COPY ["../SearchMovies.Model/SearchMovies.Model.csproj", "../SearchMovies.Model/"]
RUN dotnet restore "BlazorApp/BlazorApp.csproj"
COPY . .
WORKDIR "/src/BlazorApp"
RUN …

• 我正在开发 Blazor WebAssembly 客户端/服务器项目（目录结构如上）
• 在客户端和服务器项目中都有一些应用程序设置。
• 这些项目托管在 Azure 中。

问题出在客户端appsettings.json

• 在客户端，appsettings.json位于目录内wwwroot。可以在应用程序内访问该文件，但是该设置不能被应用程序服务的 Azure Portal 应用程序设置覆盖。

这意味着，在将应用程序部署到 Web 应用服务上的 Azure 门户中后，我的配置设置不适用于应用程序设置的变量。

这是 中的代码Progam.cs，它工作正常并从文件中读取配置，但忽略 Azure 上的 Web 应用服务的配置设置。

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");
    //Add a named httpClient and set base Address and Default Request Headers
    builder.Services.AddHttpClient("SOME_WEB_URL", client =>  // SOME_WEB_URL is defined in the appsettings.json or in the Azure App Service configuration (Application Settings)
    {
        client.BaseAddress …

我有一项包含项目目录的服务。这些项目取决于服务的活跃公司。

// Tell Service to refresh in context of Company 1
await Service.SetActiveCompany(1);
// Get Catalog (which will be in the context of Company 1)
Catalog catalog = Service.Catalog;

// Tell Service to refresh in context of Company 2
await Service.SetActiveCompany(2);
// Get Catalog (which will be in the context of Company 2)
catalog = Service.Catalog;

上面的方法单独运行效果很好。目录将更新为来自相应公司的项目。

在我的应用程序中，我有一个布局，其中包括用于选择活动公司的下拉列表。当这种情况发生变化时，我打电话：

await Service.SetActiveCompany(dropdown.selectedCompanyId);

在服务中，我刷新目录并引发事件

public class CompanyChangedEventArgs : EventArgs { }
public class Service
{
    public event EventHandle<CompanyChangedEventArgs> CompanyChanged;
    protected void OnCompanyChanged() 
        => …

BlazorWebAssembly 的 VS 模板项目包含 Bootstrap4。任何人都可以帮助将 bootstrap 5 设置到 BlazorWeb assembly 项目吗

我正在使用 Visual Studio 2022 并创建了一个新的 Blazor WebAssembly 应用程序并运行它。选中文件保存时热重载的选项。

如果我在 Counter 组件中进行更改（HTML 或 C# 代码更改）并保存文件，我会看到浏览器左上角出现一个勾号，但这些更改都没有生效，浏览器只是继续使用旧版本。

更改后，即使我将其更改为递减，计数器仍然会递增，并且 h1 标题不包含其后的 2。

我使用以下文件夹结构来组织我的 blazor wasm 项目：

Features
    - Components
    - Feature A
        - Components
        - Page1.razor
        - Page2.razor
    Index.razor
Shared
    - MainLayout.razor

我已经创建了一个布局，我想在大多数功能中使用它。

我提出了以下想法，但我正在努力在 blazor 中实现这一点。子页面布局.razor：

@inherits LayoutComponentBase
@layout MainLayout

<div>
    <span>@FeatureTitle</span>
    @Menu
    <div class="container">
        <span>@PageTitle</span>
        <div class="content">
           @Body
        </div>
    </div>
</div>

然后我将创建一个使用以下布局的功能 A/Index.razor 页面：

@page "/feature"
@layout SubPageLayout

<FeatureTitle>Feature A</FeatureTitle>

<Menu>
    ...
</Menu>

@Body

然后在Page1.razor中：

@page "/feature/page-1"

<PageTitle>Page 1</PageTitle>

Content...

我有两个相关问题：

• 实现这种嵌套布局的 blazor 方式是什么？
• 如何将 localhost/feature 重定向到 localhost/feature/page？/feature 本身只是一个包装器，为该功能的所有页面提供通用布局和导航。

当尝试在 Visual Studio Community 2022 中调试我的 Blazor wasm 应用程序时，在我命中断点并检查我要检查的内容然后退出后，应用程序开始停止多次，并显示以下消息：

框架不在模块中

在加载的模块中找不到当前堆栈帧。无法显示该位置的来源。

当这些停止发生时，它似乎试图通过查看本地文件来进入 wasm 文件： 我仍然可以退出并继续，但必须执行多次，这很耗时。

我尝试启用“如果源不可用则显示反汇编”，但无济于事。我还尝试删除 obj 和 .vs 文件夹并重新启动 VS。