Blazor-Konfiguration in ASP.NET Core

In diesem Artikel erhalten Sie Informationen zur Konfiguration von Blazor-Apps, einschließlich der App-Einstellungen, der Authentifizierung und Protokollierungskonfiguration.

Andere in der App registrierte Konfigurationsanbieter können auch Konfigurationen bereitstellen, aber nicht alle Anbieter und Anbieterfeatures sind geeignet:

• Azure Key Vault-Konfigurationsanbieter: Der Anbieter wird für Szenarien mit verwalteter Identität und Anwendungs-ID (Client-ID) mit geheimem Clientschlüssel nicht unterstützt. Eine Anwendungs-ID mit einem geheimen Clientschlüssel wird für ASP.NET Core-Apps nicht empfohlen, insbesondere nicht für clientseitige Apps, da der geheime Clientschlüssel nicht clientseitig für den Zugriff auf den Azure Key Vault-Dienst geschützt werden kann.
• Azure App Configuration-Anbieter: Der Anbieter ist für eine clientseitige App nicht geeignet, da die App nicht auf einem Server in Azure ausgeführt wird.

Weitere Informationen zu Konfigurationsanbietern finden Sie unter Konfiguration in ASP.NET Core.

Konfiguration von App-Einstellungen

Die Konfiguration in App-Einstellungsdateien wird standardmäßig geladen. Im folgenden Beispiel wird ein Benutzeroberflächen-Konfigurationswert in einer App-Einstellungsdatei gespeichert und automatisch vom Blazor-Framework geladen. Der Wert wird von einer Komponente gelesen.

wwwroot/appsettings.json:

{
    "h1FontSize": "50px"
}

Fügen Sie eine IConfiguration-Instanz in eine Komponente ein, um auf die Konfigurationsdaten zuzugreifen.

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>

Sicherheitseinschränkungen auf dem Client verhindern den direkten Zugriff auf Dateien über den Benutzercode, einschließlich Einstellungsdateien für die App-Konfiguration. Um Konfigurationsdateien zusätzlich zu appsettings.json/appsettings.{ENVIRONMENT}.json aus dem Ordner wwwroot in die Konfiguration zu lesen, verwenden Sie einen HttpClient.

Im folgenden Beispiel wird eine Konfigurationsdatei (cars.json) in die Konfiguration der App gelesen.

wwwroot/cars.json:

{
    "size": "tiny"
}

Fügen Sie den Namespace für Microsoft.Extensions.Configuration am Anfang der Program-Datei hinzu:

using Microsoft.Extensions.Configuration;

Ändern Sie die vorhandene HttpClient-Dienstregistrierung so, dass der Client zum Lesen der Datei verwendet wird:

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);

Im vorherigen Beispiel wird die Basisadresse mit builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) festgelegt, wodurch die Basisadresse für die App abgerufen und in der Regel vom href-Wert des <base>-Tags auf der Hostseite abgeleitet wird.

Arbeitsspeicher als Konfigurationsquelle

Im folgenden Beispiel wird ein MemoryConfigurationSource-Element in der Program -Datei verwendet, um eine zusätzliche Konfiguration bereitzustellen.

Fügen Sie den Namespace für Microsoft.Extensions.Configuration.Memory am Anfang der Program-Datei hinzu:

using Microsoft.Extensions.Configuration.Memory;

In der Program-Datei:

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);

Fügen Sie eine IConfiguration-Instanz in eine Komponente ein, um auf die Konfigurationsdaten zuzugreifen.

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>

Rufen Sie einen Abschnitt der Konfiguration in C#-Code mit IConfiguration.GetSection ab. Im folgenden Beispiel wird der wheels-Abschnitt für die Konfiguration im vorherigen Beispiel abgerufen:

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

        ...
    }
}

Authentifizierungskonfiguration

Geben Sie eine öffentliche Authentifizierungskonfiguration in einer App-Einstellungsdatei an.

wwwroot/appsettings.json:

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

Laden Sie die Konfiguration für einen Identity-Anbieter mit ConfigurationBinder.Bind in die Program-Datei. Im folgenden Beispiel wird die Konfiguration für einen OIDC-Anbieter geladen:

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

Konfiguration der Protokollierung

Dieser Abschnitt gilt für Apps, bei denen die Protokollierung über eine App-Einstellungsdatei im wwwroot-Ordner konfiguriert wird.

Fügen Sie der App das Paket Microsoft.Extensions.Logging.Configuration hinzu.

Geben Sie in der App-Einstellungsdatei die Protokollierungskonfiguration an. Die Protokollierungskonfiguration wird in die Program-Datei geladen.

wwwroot/appsettings.json:

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

In der Program-Datei:

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

Konfiguration des Host-Generators

Lesen Sie die Hostbuilderkonfiguration aus WebAssemblyHostBuilder.Configuration in der Program-Datei:

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

Zwischengespeicherte Konfiguration

Konfigurationsdateien werden zur Offlineverwendung zwischengespeichert. Bei progressiven Web-Apps (PWAs) können Sie Konfigurationsdateien nur beim Erstellen einer neuen Bereitstellung aktualisieren. Die Bearbeitung von Konfigurationsdateien zwischen Bereitstellungen hat aus folgenden Gründen keine Auswirkungen:

• Benutzer verfügen über zwischengespeicherte Versionen der Dateien, die sie weiterhin verwenden können.
• Die Dateien service-worker.js und service-worker-assets.js der PWA müssen bei der Kompilierung neu erstellt werden, wodurch der App beim nächsten Onlineaufruf des Benutzers signalisiert wird, dass die App neu bereitgestellt wurde.

Weitere Informationen zur Behandlung von Hintergrundupdates durch PWAs finden Sie unter ASP.NET Core Blazor-basierte progressive Web-Apps (PWAs).

Optionskonfiguration

Die Optionskonfiguration erfordert das Hinzufügen eines Paketverweises für das NuGet-Paket Microsoft.Extensions.Options.ConfigurationExtensions.

Beispiel:

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

Nicht alle ASP.NET Core Optionsfeatures werden in Razor Komponenten unterstützt. Beispielsweise werden IOptionsSnapshot<TOptions>- und IOptionsMonitor<TOptions>-Konfigurationen unterstützt, aber die Neuberechnung von Optionswerten für diese Schnittstellen wird nicht unterstützt, es sei denn, die Anwendung wird neu geladen, indem entweder die App auf einer neuen Browserregisterkarte angefordert wird oder die Schaltfläche zum neu Laden des Browsers ausgewählt wird. Das bloße Aufrufen von StateHasChanged aktualisiert Momentaufnahme- oder überwachte Optionswerte nicht, wenn sich die zugrunde liegende Konfiguration ändert.