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.

Queste indicazioni si applicano alla configurazione del progetto sul lato client in un'app Blazor Web o in un'app autonoma Blazor WebAssembly .

In Blazor App Web:

• Per la configurazione lato server:
  • Per indicazioni, vedere Configurazione in ASP.NET Core .
  • Solo la configurazione nei file di impostazioni radice dell'app del progetto viene caricata per impostazione predefinita.
  • La parte restante di questo articolo si applica solo alla configurazione lato client nel .Client progetto.
• Per la configurazione lato client (.Client progetto), la configurazione viene caricata dai file di impostazioni dell'app seguenti per impostazione predefinita:
  • wwwroot/appsettings.json.
  • wwwroot/appsettings.{ENVIRONMENT}.json, dove il {ENVIRONMENT} segnaposto è l'ambiente di runtime dell'app.

Nelle app autonome Blazor WebAssembly , la configurazione viene caricata dai file di impostazioni dell'app seguenti per impostazione predefinita:

• wwwroot/appsettings.json.
• wwwroot/appsettings.{ENVIRONMENT}.json, dove il {ENVIRONMENT} segnaposto è l'ambiente di runtime dell'app.

Nota

La configurazione di registrazione inserita in un file di impostazioni dell'app in wwwroot non viene caricata per impostazione predefinita. Per altre informazioni, vedere la sezione Configurazione della registrazione più avanti in questo articolo.

In alcuni scenari, ad esempio con i servizi di Azure, è importante usare un segmento di nome file di ambiente che corrisponda esattamente al nome dell'ambiente. Ad esempio, usare il nome appsettings.Staging.json del file con la maiuscola "S" per l'ambiente Staging . Per le convenzioni consigliate, vedere le osservazioni di apertura degli ambienti ASP.NET CoreBlazor.

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 gli scenari di identità gestita e ID applicazione (ID client) con i 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 le app lato client perché non vengono eseguite in un server in Azure.

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

Avviso

I file di configurazione e di impostazioni nella radice Web (wwwroot cartella) sono visibili agli utenti del client e gli utenti possono manomettere i dati. Non archiviare segreti, credenziali o altri dati sensibili in qualsiasi file radice Web.

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>

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

Avviso

I file di configurazione e di impostazioni nella radice Web (wwwroot cartella) sono visibili agli utenti del client e gli utenti possono manomettere i dati. Non archiviare segreti, credenziali o altri dati sensibili in qualsiasi file radice Web.

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>

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

Avviso

I file di configurazione e di impostazioni nella radice Web (wwwroot cartella) sono visibili agli utenti del client e gli utenti possono manomettere i dati. Non archiviare segreti, credenziali o altri dati sensibili in qualsiasi file radice Web.

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.

Nota

Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.

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.

Nota

Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.

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.