Конфигурация Blazor ASP.NET Core

В этой статье объясняется, как настроить Blazor приложения, включая параметры приложения, проверку подлинности и конфигурацию ведения журнала.

Другие поставщики конфигурации, зарегистрированные приложением, также могут предоставлять конфигурацию, но не все поставщики или функции поставщика подходят:

• Поставщик конфигурации Azure Key Vault: данный поставщик не поддерживает сценарии с управляемым удостоверением и идентификатором приложения (идентификатор клиента) с секретом клиента. Идентификатор приложения с секретом клиента не рекомендуется использовать для любого приложения ASP.NET Core, особенно для клиентских приложений, так как секрет клиента не может быть защищен на стороне клиента для доступа к службе Azure Key Vault.
• приложение Azure поставщик конфигурации: поставщик не подходит для клиентского приложения, так как приложение не выполняется на сервере в Azure.

Дополнительные сведения о поставщиках конфигурации см. в статье Конфигурация в ASP.NET Core.

По умолчанию загружается конфигурация из файлов параметров приложения. В приведенном ниже примере значение конфигурации пользовательского интерфейса хранится в файле параметров приложения и автоматически загружается платформой Blazor. Значение считывается компонентом.

wwwroot/appsettings.json:

{
    "h1FontSize": "50px"
}

Внедрите экземпляр IConfiguration в компонент для доступа к данным конфигурации.

ConfigExample.razor:

@page "/config-example"
@inject IConfiguration Configuration

<PageTitle>Configuration</PageTitle>

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example (50px)
</h1>

@page "/config-example"
@inject IConfiguration Configuration

<PageTitle>Configuration</PageTitle>

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example (50px)
</h1>

@page "/config-example"
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

@page "/config-example"
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

@page "/config-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

@page "/config-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

Ограничения безопасности клиента предотвращают прямой доступ к файлам с помощью пользовательского кода, включая файлы параметров для конфигурации приложения. Чтобы считывать файлы конфигурации, помимо appsettings.json/appsettings.{ENVIRONMENT}.json, из папки wwwroot в конфигурацию, используйте HttpClient.

В приведенном ниже примере данные из файла конфигурации (cars.json) считываются в конфигурацию приложения.

wwwroot/cars.json:

{
    "size": "tiny"
}

Добавьте пространство имен для Microsoft.Extensions.ConfigurationProgram файла:

using Microsoft.Extensions.Configuration;

Измените существующую HttpClient регистрацию службы, чтобы использовать клиент для чтения файла:

var http = new HttpClient()
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
};

builder.Services.AddScoped(sp => http);

using var response = await http.GetAsync("cars.json");
using var stream = await response.Content.ReadAsStreamAsync();

builder.Configuration.AddJsonStream(stream);

В предыдущем примере задается базовый адрес (builder.HostEnvironment.BaseAddress), который получает базовый адрес IWebAssemblyHostEnvironment.BaseAddress для приложения и обычно является производным от <base> значения тега href на хост-странице.

В следующем примере используется MemoryConfigurationSource в Program файле для предоставления дополнительной конфигурации.

Добавьте пространство имен для Microsoft.Extensions.Configuration.MemoryProgram файла:

using Microsoft.Extensions.Configuration.Memory;

В файле Program:

var vehicleData = new Dictionary<string, string?>()
{
    { "color", "blue" },
    { "type", "car" },
    { "wheels:count", "3" },
    { "wheels:brand", "Blazin" },
    { "wheels:brand:type", "rally" },
    { "wheels:year", "2008" },
};

var memoryConfig = new MemoryConfigurationSource { InitialData = vehicleData };

builder.Configuration.Add(memoryConfig);

Внедрите экземпляр IConfiguration в компонент для доступа к данным конфигурации.

MemoryConfig.razor:

@page "/memory-config"
@inject IConfiguration Configuration

<PageTitle>Memory Configuration</PageTitle>

<h1>Memory Configuration Example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

@page "/memory-config"
@inject IConfiguration Configuration

<PageTitle>Memory Configuration</PageTitle>

<h1>Memory Configuration Example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

@page "/memory-config"
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

@page "/memory-config"
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

@page "/memory-config"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

@page "/memory-config"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

Получите раздел конфигурации в коде C# с помощью IConfiguration.GetSection. В приведенном ниже примере извлекается раздел wheels конфигурации из предыдущего примера.

@code {
    protected override void OnInitialized()
    {
        var wheelsSection = Configuration.GetSection("wheels");

        ...
    }
}

Укажите конфигурацию общедоступной проверки подлинности в файле параметров приложения.

wwwroot/appsettings.json:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Загрузите конфигурацию поставщика Identity в ConfigurationBinder.BindProgram файле. В следующем примере загружается конфигурация для поставщика OIDC:

builder.Services.AddOidcAuthentication(options =>
    builder.Configuration.Bind("Local", options.ProviderOptions));

Этот раздел относится к приложениям, которые настраивают ведение журнала с помощью файла параметров приложения в папке wwwroot .

Добавьте пакет Microsoft.Extensions.Logging.Configuration в приложение.

В файле параметров приложения укажите конфигурацию ведения журнала. Конфигурация ведения журнала загружается в Program файл.

wwwroot/appsettings.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}

В файле Program:

builder.Logging.AddConfiguration(
    builder.Configuration.GetSection("Logging"));

Чтение конфигурации построителя узлов из WebAssemblyHostBuilder.ConfigurationProgram файла:

var hostname = builder.Configuration["HostName"];

Файлы конфигурации кэшируются для автономного использования. При использовании Progressive Web Applications (PWAs) файлы конфигурации можно изменять только при создании развертывания. Изменение файлов конфигурации между развертываниями не работает по следующим причинам:

• У пользователей есть кэшированные версии файлов, которые они продолжают использовать.
• Файлы service-worker.js и service-worker-assets.js PWA должны быть перестроены при компиляции, что при следующем входе пользователя в сеть сообщает приложению о том, что приложение было развернуто повторно.

Дополнительные сведения об обработке фоновых обновлений прогрессивными веб-приложениями см. в статье Прогрессивные веб-приложения Blazor ASP.NET Core.

Для настройки параметров требуется добавить ссылку на Microsoft.Extensions.Options.ConfigurationExtensions пакет NuGet.

Пример:

OptionsExample.cs:

public class OptionsExample
{
    public string? Option1 { get; set; }
    public string? Option2 { get; set; }
}

В appsettings.json:

"OptionsExample": {
  "Option1": "Option1 Value",
  "Option2": "Option2 Value"
}

builder.Services.Configure<OptionsExample>(
    builder.Configuration.GetSection("OptionsExample"));

Следующий компонент Razor извлекает параметры с директивой @inject или атрибутом [Inject].

Options.razor:

@page "/options"
@using Microsoft.Extensions.Options
@inject IOptions<OptionsExample>? OptionsExample1

<h1>Options</h1>

<h2>
    &commat;inject approach
</h2>

<ul>
    <li>@OptionsExample1?.Value.Option1</li>
    <li>@OptionsExample1?.Value.Option2</li>
</ul>

<h2>
    [Inject] approach
</h2>

<ul>
    <li>@OptionsExample2?.Value.Option1</li>
    <li>@OptionsExample2?.Value.Option2</li>
</ul>

@code {
    [Inject]
    public IOptions<OptionsExample>? OptionsExample2 { get; set; }
}

В компонентах Razor поддерживаются не все возможности параметров ASP.NET Core. Например, поддерживается конфигурация IOptionsSnapshot<TOptions> и IOptionsMonitor<TOptions>, но повторное вычисление значений параметров для этих интерфейсов возможно только за счет перезагрузки приложения путем его запроса в новой вкладке или нажатия кнопки перезагрузки в браузере. При изменении базовой конфигурации вызова StateHasChanged недостаточно для обновления моментального снимка или значений отслеживаемых параметров.