configurazione di ASP.NET Core Blazor

Questo articolo illustra come configurare Blazor le app, incluse le impostazioni dell'app, l'autenticazione e la configurazione della registrazione.

Altri provider di configurazione registrati dall'app possono anche fornire la configurazione, ma non tutti i provider o le funzionalità del provider sono appropriati:

• Provider di configurazione di Azure Key Vault: il provider non è supportato per scenari gestiti identity e ID applicazione (ID client) con segreti client. L'ID applicazione con un segreto client non è consigliato per qualsiasi app core ASP.NET, in particolare le app sul lato client perché il segreto client non può essere protetto sul lato client per accedere al servizio Azure Key Vault.
• app Azure provider di configurazione: il provider non è appropriato per un'app lato client perché l'app non viene eseguita in un server in Azure.

Per altre informazioni sui provider di configurazione, vedere Configurazione in ASP.NET Core.

Configurazione delle impostazioni dell'app

La configurazione nei file delle impostazioni dell'app viene caricata per impostazione predefinita. Nell'esempio seguente un valore di configurazione dell'interfaccia utente viene archiviato in un file di impostazioni dell'app e caricato automaticamente dal Blazor framework. Il valore viene letto da un componente.

wwwroot/appsettings.json:

{
    "h1FontSize": "50px"
}

Inserire un'istanza IConfiguration in un componente per accedere ai dati di configurazione.

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>

Le restrizioni di sicurezza client impediscono l'accesso diretto ai file tramite codice utente, inclusi i file di impostazioni per la configurazione dell'app. Per leggere i file di configurazione oltre alla appsettings.jsonwwwroot/appsettings.{ENVIRONMENT}.json cartella nella configurazione, usare un oggetto .HttpClient

L'esempio seguente legge un file di configurazione (cars.json) nella configurazione dell'app.

wwwroot/cars.json:

{
    "size": "tiny"
}

Aggiungere lo spazio dei nomi per Microsoft.Extensions.Configuration al Program file:

using Microsoft.Extensions.Configuration;

Modificare la registrazione del servizio esistente HttpClient per usare il client per leggere il file:

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

L'esempio precedente imposta l'indirizzo di base con builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), che ottiene l'indirizzo di base per l'app ed è in genere derivato dal <base> valore del href tag nella pagina host.

Origine configurazione memoria

Nell'esempio Program seguente viene usato un oggetto MemoryConfigurationSource nel file per fornire una configurazione aggiuntiva.

Aggiungere lo spazio dei nomi per Microsoft.Extensions.Configuration.Memory al Program file:

using Microsoft.Extensions.Configuration.Memory;

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

Inserire un'istanza IConfiguration in un componente per accedere ai dati di configurazione.

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>

Ottenere una sezione della configurazione nel codice C# con IConfiguration.GetSection. Nell'esempio seguente viene ottenuta la wheels sezione relativa alla configurazione nell'esempio precedente:

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

        ...
    }
}

Configurazione dell'autenticazione

Specificare la configurazione dell'autenticazione pubblica in un file di impostazioni dell'app.

wwwroot/appsettings.json:

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

Caricare la configurazione per un Identity provider con ConfigurationBinder.Bind nel Program file . L'esempio seguente carica la configurazione per un provider OIDC:

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

Configurazione della registrazione

Questa sezione si applica alle app che configurano la registrazione tramite un file di impostazioni dell'app nella wwwroot cartella .

Aggiungere il Microsoft.Extensions.Logging.Configuration pacchetto all'app.

Nel file delle impostazioni dell'app specificare la configurazione della registrazione. La configurazione di registrazione viene caricata nel Program file.

wwwroot/appsettings.json:

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

Nel file Program:

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

Configurazione del generatore di host

Leggere la configurazione del Program generatore host da WebAssemblyHostBuilder.Configuration nel file:

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

Configurazione memorizzata nella cache

I file di configurazione vengono memorizzati nella cache per l'uso offline. Con le applicazioni Web progressive (PWA) è possibile aggiornare solo i file di configurazione durante la creazione di una nuova distribuzione. La modifica dei file di configurazione tra distribuzioni non ha alcun effetto perché:

• Gli utenti hanno memorizzato nella cache le versioni dei file che continuano a usare.
• I file e service-worker-assets.js i file di service-worker.js PWA devono essere ricompilati durante la compilazione, che segnalano all'app nella prossima visita online dell'utente che l'app è stata ridistribuita.

Per altre informazioni su come vengono gestiti gli aggiornamenti in background da PWA, vedere ASP.NET Core Blazor Progressive Web Application (PWA).

Configurazione delle opzioni

La configurazione delle opzioni richiede l'aggiunta di un riferimento al Microsoft.Extensions.Options.ConfigurationExtensions pacchetto NuGet.

Esempio:

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

Non tutte le funzionalità ASP.NET Core Options sono supportate nei Razor componenti. Ad esempio, IOptionsSnapshot<TOptions> e IOptionsMonitor<TOptions> la configurazione è supportata, ma la ricompilazione dei valori delle opzioni per queste interfacce non è supportata al di fuori del ricaricamento dell'app richiedendo l'app in una nuova scheda del browser o selezionando il pulsante ricarica del browser. La semplice chiamata StateHasChanged non aggiorna i valori delle opzioni di snapshot o monitorati quando cambia la configurazione sottostante.