konfiguration av ASP.NET Core Blazor

Den här artikeln beskriver hur du konfigurerar Blazor appar, inklusive appinställningar, autentisering och loggningskonfiguration.

Den här vägledningen gäller för projektkonfiguration på klientsidan i en Blazor Web App eller en fristående Blazor WebAssembly app.

Standardbeteende i Blazor Web Appsekunder:

• För konfiguration på serversidan:
  • Se Konfiguration i ASP.NET Core för vägledning.
  • Endast konfigurationen i projektets rotappsinställningsfiler läses in.
  • Resten av den här artikeln gäller endast konfiguration på klientsidan i .Client projektet.
• För konfiguration på klientsidan (.Client projekt) läses konfigurationen in från följande appinställningsfiler:
  • wwwroot/appsettings.json.
  • wwwroot/appsettings.{ENVIRONMENT}.json, där platshållaren för {ENVIRONMENT} är appens körningsmiljö.

I fristående Blazor WebAssembly appar läses konfigurationen in från följande appinställningarsfiler:

• wwwroot/appsettings.json.
• wwwroot/appsettings.{ENVIRONMENT}.json, där platshållaren för {ENVIRONMENT} är appens körningsmiljö.

Observera

Loggningskonfigurationen som placeras i en appinställningsfil i wwwroot läses inte in som standard. Mer information finns i avsnittet Loggningskonfiguration senare i den här artikeln.

I vissa scenarier, till exempel med Azure-tjänster, är det viktigt att använda ett miljöfilnamnssegment som exakt matchar miljönamnet. Använd till exempel filnamnet appsettings.Staging.json med versalt "S" för den Staging miljön. Rekommenderade konventioner finns i inledande kommentarer för ASP.NET Core Blazor-miljöer.

Andra konfigurationsproviders som registrerats av appen kan också tillhandahålla konfiguration, men inte alla leverantörer eller providerfunktioner är lämpliga:

• Azure Key Vault-konfigurationsprovidern: Providern stöds inte för hanterad identitet och program-ID (klient-ID) med klienthemlighetsscenarier. Program-ID med en klienthemlighet rekommenderas inte för någon ASP.NET Core-app, särskilt appar på klientsidan eftersom klienthemligheten inte kan skyddas på klientsidan för åtkomst till Azure Key Vault-tjänsten.
• Azure App-konfigurationsprovider: Providern är inte lämplig för en app på klientsidan eftersom appen inte körs på en server i Azure.

Mer information om konfigurationsprovidrar finns i Configuration i ASP.NET Core.

Varning

Konfigurations- och inställningsfiler i webbroten (wwwroot mapp) är synliga för användare på klienten och användarna kan manipulera data. Lagra inte apphemligheter, autentiseringsuppgifter eller andra känsliga data i någon webbrotfil.

Konfiguration av appinställningar

Konfiguration i appinställningsfiler läses in som standardinställning. I följande exempel lagras ett konfigurationsvärde för användargränssnittet i en appinställningsfil och läses in av Blazor-ramverket automatiskt. Värdet läss av en komponent.

wwwroot/appsettings.json:

{
    "h1FontSize": "50px"
}

Mata in en IConfiguration instans i en komponent för att få åtkomst till konfigurationsdata.

ConfigExample.razor:

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

<PageTitle>Configuration</PageTitle>

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

Klientsäkerhetsbegränsningar förhindrar direkt åtkomst till filer via användarkod, inklusive inställningsfiler för appkonfiguration. Om du vill läsa konfigurationsfiler utöver appsettings.json/appsettings.{ENVIRONMENT}.json från mappen wwwroot till konfigurationen använder du en HttpClient.

Varning

Konfigurations- och inställningsfiler i webbroten (wwwroot mapp) är synliga för användare på klienten och användarna kan manipulera data. Lagra inte apphemligheter, autentiseringsuppgifter eller andra känsliga data i någon webbrotfil.

I följande exempel läss en konfigurationsfil (cars.json) i appens konfiguration.

wwwroot/cars.json:

{
    "size": "tiny"
}

Lägg till namnområdet för Microsoft.Extensions.Configuration i filen Program:

using Microsoft.Extensions.Configuration;

Ändra den befintliga HttpClient-tjänstregistreringen så att den använder klienten för att läsa filen:

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

I föregående exempel anges basadressen med builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), som hämtar basadressen för appen och vanligtvis härleds från <base> taggens href värde på värdsidan.

Minneskonfigurationskälla

I följande exempel används en MemoryConfigurationSource i filen Program för att ange ytterligare konfiguration.

Lägg till namnområdet för Microsoft.Extensions.Configuration.Memory i filen Program:

using Microsoft.Extensions.Configuration.Memory;

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

Mata in en IConfiguration instans i en komponent för att få åtkomst till konfigurationsdata.

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>

Hämta ett avsnitt av konfigurationen i C#-kod med IConfiguration.GetSection. I följande exempel hämtas avsnittet wheels för konfigurationen i föregående exempel:

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

        ...
    }
}

Autentiseringskonfiguration

Ange offentlig konfiguration för-autentisering i appens inställningsfil.

wwwroot/appsettings.json:

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

Läs in konfigurationen för en Identity-provider med ConfigurationBinder.Bind i filen Program. I följande exempel läses konfigurationen in för en OIDC-provider:

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

Varning

Konfigurations- och inställningsfiler i webbroten (wwwroot mapp) är synliga för användare på klienten och användarna kan manipulera data. Lagra inte apphemligheter, autentiseringsuppgifter eller andra känsliga data i någon webbrotfil.

Loggningskonfiguration

Det här avsnittet gäller för appar som konfigurerar loggning via en appinställningsfil i mappen wwwroot.

Lägg till Microsoft.Extensions.Logging.Configuration-paketet i appen.

Observera

Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

I appinställningsfilen anger du loggningskonfiguration. Loggningskonfigurationen läses in i filen Program.

wwwroot/appsettings.json:

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

I filen Program:

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

Konfiguration av host builder

Läs konfigurationen av värdbyggaren från WebAssemblyHostBuilder.Configuration i Program-filen:

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

Cachelagrad konfiguration

Konfigurationsfiler cachelagras för offlineanvändning. Med PROGRESSIVE Web Applications (PWA)kan du bara uppdatera konfigurationsfiler när du skapar en ny distribution. Redigering av konfigurationsfiler mellan distributioner har ingen effekt eftersom:

• Användarna har cachelagrade versioner av de filer som de fortsätter att använda.
• PWA:s service-worker.js- och service-worker-assets.js-filer måste återskapas vid kompilering, vilket signalerar till appen vid användarens nästa onlinebesök att appen har distribuerats om.

Mer information om hur bakgrundsuppdateringar hanteras av PWA finns i ASP.NET Core Blazor Progressive Web Application (PWA).

Alternativkonfiguration

Konfiguration av alternativ kräver att du lägger till en paketreferens för Microsoft.Extensions.Options.ConfigurationExtensions NuGet-paketet.

Observera

Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

Exempel:

OptionsExample.cs:

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

I appsettings.json:

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

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

Följande Razor komponent hämtar inställningarna med @inject-direktivet eller [Inject]-attributet.

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

Alla funktioner för ASP.NET Core-alternativ stöds inte i Razor komponenter. Till exempel stöds IOptionsSnapshot<TOptions> och IOptionsMonitor<TOptions> konfiguration, men omberäkning av alternativvärden för dessa gränssnitt stöds inte utanför inläsningen av appen genom att antingen begära appen på en ny webbläsarflik eller genom att välja webbläsarens omläsningsknapp. Att bara anropa StateHasChanged uppdaterar inte värden för ögonblicksbilder eller övervakade alternativ när den underliggande konfigurationen ändras.