Configuración de Blazor en ASP.NET Core

En este artículo se explica cómo configurar las aplicaciones Blazor, incluida la configuración de las aplicaciones, la autenticación y la configuración del registro.

Esta guía se aplica a la configuración del proyecto del lado cliente en una aplicación web Blazor o en una aplicación Blazor WebAssembly independiente.

En Web Apps Blazor:

• Para la configuración del lado servidor:
  • Consulte Configuración en ASP.NET Core para obtener instrucciones.
  • De forma predeterminada, solo se carga la configuración en los archivos de configuración de la aplicación raíz del proyecto.
  • El resto de este artículo solo se aplica a la configuración del lado cliente en el proyecto .Client.
• En el caso de la configuración del lado cliente (proyecto .Client), la configuración se carga desde los siguientes archivos de configuración de la aplicación de forma predeterminada:
  • wwwroot/appsettings.json.
  • wwwroot/appsettings.{ENVIRONMENT}.json, donde el marcador de posición {ENVIRONMENT} es el entorno en tiempo de ejecución de la aplicación.

En aplicaciones Blazor WebAssembly independientes, la configuración se carga desde los siguientes archivos de configuración de la aplicación de forma predeterminada:

• wwwroot/appsettings.json.
• wwwroot/appsettings.{ENVIRONMENT}.json, donde el marcador de posición {ENVIRONMENT} es el entorno en tiempo de ejecución de la aplicación.

Nota

La configuración de registro colocada en un archivo de configuración de la aplicación en wwwroot no se carga por defecto. Para obtener más información, consulte la sección Configuración de registro más adelante en este artículo.

En algunos escenarios, como con los servicios de Azure, es importante usar un segmento de nombre de archivo de entorno que coincida exactamente con el nombre del entorno. Por ejemplo, use el nombre de archivo appsettings.Staging.json con una "S" mayúscula para el entorno Staging. Para obtener convenciones recomendadas, consulte los comentarios de apertura de los entornos deASP.NET Core Blazor.

Otros proveedores de configuración registrados por la aplicación también pueden proporcionar configuración, pero no todos los proveedores o características de los proveedores son apropiados:

• Proveedor de configuración de Azure Key Vault: El proveedor no es compatible con escenarios de identidad administrada e Id. de aplicación (Id. de cliente) con secreto de cliente. El Id. de aplicación con un secreto de cliente no se recomienda para ninguna aplicación ASP.NET Core, especialmente las aplicaciones del lado del cliente, ya que el secreto de cliente no se puede proteger del lado del cliente para acceder al servicio Azure Key Vault.
• Proveedor de configuración de Azure App: El proveedor no es apropiado para aplicaciones del lado del cliente porque no se ejecutan en un servidor en Azure.

Para obtener más información sobre el uso de proveedores de configuración, consulte Configuración en ASP.NET Core.

Advertencia

Los archivos de configuración y ajustes de la raíz web (carpeta wwwroot) son visibles para los usuarios en el cliente, y los usuarios pueden manipular los datos. No almacene secretos de aplicación, credenciales ni otros datos confidenciales en ningún archivo raíz web.

Configuración de aplicaciones

La configuración de los archivos de configuración de la aplicación se carga de forma predeterminada. En el siguiente ejemplo, un valor de configuración de la interfaz de usuario se almacena en un archivo de configuración de la aplicación y lo carga el marco Blazor automáticamente. Un componente lee el valor.

wwwroot/appsettings.json:

{
    "h1FontSize": "50px"
}

Inserte una instancia IConfiguration en un componente para acceder a los datos de configuración.

ConfigExample.razor:

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

<PageTitle>Configuration</PageTitle>

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

Las restricciones de seguridad del cliente impiden el acceso directo a los archivos a través del código de usuario, incluidos los archivos de configuración de la aplicación. Para leer los archivos de configuración además de appsettings.json/appsettings.{ENVIRONMENT}.json desde la carpeta wwwroot en la configuración, use HttpClient.

Advertencia

Los archivos de configuración y ajustes de la raíz web (carpeta wwwroot) son visibles para los usuarios en el cliente, y los usuarios pueden manipular los datos. No almacene secretos de aplicación, credenciales ni otros datos confidenciales en ningún archivo raíz web.

En el ejemplo siguiente se lee un archivo de configuración (cars.json) en la configuración de la aplicación.

wwwroot/cars.json:

{
    "size": "tiny"
}

Agregue el espacio de nombres para Microsoft.Extensions.Configuration al archivo Program:

using Microsoft.Extensions.Configuration;

Modificar el registro de servicio HttpClient existente para utilizar el cliente para leer el archivo:

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

En el ejemplo anterior se establece la dirección base con builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), que obtiene la dirección base de la aplicación y se deriva normalmente del valor href de la etiqueta <base> en la página host.

Origen de la configuración de la memoria

El siguiente ejemplo utiliza MemoryConfigurationSource en el Program archivo para suministrar configuración adicional.

Agregue el espacio de nombres para Microsoft.Extensions.Configuration.Memory al archivo Program:

using Microsoft.Extensions.Configuration.Memory;

En el archivo 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);

Inserte una instancia IConfiguration en un componente para acceder a los datos de configuración.

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>

Obtenga una sección de la configuración en el código de C# con IConfiguration.GetSection. En el ejemplo siguiente se obtiene la sección wheels para la configuración del ejemplo anterior:

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

        ...
    }
}

Configuración de autenticación

Proporcione la configuración de autenticación pública en un archivo de configuración de la aplicación.

wwwroot/appsettings.json:

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

Cargue la configuración de un proveedor Identity con ConfigurationBinder.Bind en el archivo Program. El siguiente ejemplo carga la configuración para un proveedor OIDC:

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

Advertencia

Los archivos de configuración y ajustes de la raíz web (carpeta wwwroot) son visibles para los usuarios en el cliente, y los usuarios pueden manipular los datos. No almacene secretos de aplicación, credenciales ni otros datos confidenciales en ningún archivo raíz web.

Configuración del registro

Esta sección se aplica a las aplicaciones que configuran el registro a través de un archivo de configuración de la aplicación en la wwwroot carpeta.

Agregue el paquete Microsoft.Extensions.Logging.Configuration al proyecto.

Nota

Para obtener instrucciones sobre cómo agregar paquetes a aplicaciones .NET, consulte los artículos de Instalación y administración de paquetes en Flujo de trabajo de consumo de paquetes (NuGet documentación). Confirme las versiones correctas del paquete en NuGet.org.

En el archivo de configuración de la aplicación, proporcione la configuración de registro. La configuración de registro se carga en el archivo Program.

wwwroot/appsettings.json:

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

En el archivo Program:

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

Configuración del generador de host

Lea la configuración del host builder del WebAssemblyHostBuilder.Configuration en el archivo Program:

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

Configuración almacenada en caché

Los archivos de configuración se almacenan en caché para usarlos sin conexión. Con Aplicaciones web progresivas (PWA), solo puede actualizar los archivos de configuración al crear una implementación nueva. Editar los archivos de configuración entre las implementaciones no tiene ningún efecto, debido a lo siguiente:

• Los usuarios tienen versiones en caché de los archivos que siguen usando.
• Los archivos service-worker.js y service-worker-assets.js de PWA se deben recompilar en la compilación, lo que indica a la aplicación en la próxima visita en línea del usuario que la aplicación se volvió a implementar.

Para obtener más información sobre cómo las PBA controlan las actualizaciones en segundo plano, vea Aplicación web progresiva (PWA) con ASP.NET Core Blazor.

Configuración de opciones

La configuración de opciones requiere agregar una referencia de paquete para el Microsoft.Extensions.Options.ConfigurationExtensions paquete NuGet.

Nota

Para obtener instrucciones sobre cómo agregar paquetes a aplicaciones .NET, consulte los artículos de Instalación y administración de paquetes en Flujo de trabajo de consumo de paquetes (NuGet documentación). Confirme las versiones correctas del paquete en NuGet.org.

Ejemplo:

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

No todas las características de opciones de ASP.NET Core están admitidas en los componentes Razor. Por ejemplo, se admite la configuraciónIOptionsSnapshot<TOptions> y IOptionsMonitor<TOptions>, pero no se admite volver a calcular los valores de opción para estas interfaces más allá de volver a cargar la aplicación solicitando la aplicación en una nueva pestaña del explorador o seleccionando el botón de volver a cargar del explorador. Con solo llamar StateHasChanged no se actualizan los valores de opción de instantánea ni los supervisados cuando cambia la configuración subyacente.