Implementación de características para audiencias de destino en una aplicación ASP.NET Core

Artículo
12/21/2024

En esta guía, usará el filtro de selección de destino para implementar una característica para audiencias de destino para la aplicación ASP.NET Core. Para más información sobre el filtro de destino, consulte Implementación de características en audiencias de destino.

Requisitos previos

Una cuenta de Azure con una suscripción activa. cree una de forma gratuita.
Un almacén de App Configuration. Crear un almacén.
Una marca de característica con filtro de selección de destino. Crear la marca de característica.
SDK de .NET 6.0 o posterior.

Creación de una aplicación web con una marca de característica

En esta sección, crea una aplicación web que permite a los usuarios iniciar sesión y usar la marca de característica Beta que creó antes.

Cree una aplicación web que se autentique en una base de datos local con el siguiente comando.
```
dotnet new webapp --auth Individual -o TestFeatureFlags
```

Vaya al directorio TestFeatureFlags recién creado y agregue referencias a los siguientes paquetes NuGet.

Microsoft Entra ID (recomendado)
Cadena de conexión

dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Microsoft.FeatureManagement.AspNetCore
dotnet add package Azure.Identity

dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Microsoft.FeatureManagement.AspNetCore

Cree un secreto de usuario para la aplicación mediante la ejecución de los siguientes comandos.
- Microsoft Entra ID (recomendado)
- Cadena de conexión
El comando usa el Administrador de secretos para almacenar un secreto denominado Endpoints:AppConfiguration, que almacena el punto de conexión para el almacén de App Configuration. Reemplace el marcador de posición <your-App-Configuration-endpoint> por el punto de conexión del almacén de App Configuration. Puede encontrar el punto de conexión en la hoja Información general del almacén de App Configuration en Azure Portal.
```
dotnet user-secrets init
dotnet user-secrets set Endpoints:AppConfiguration "<your-App-Configuration-endpoint>"
```
El comando usa el administrador de secretos para almacenar un secreto denominado ConnectionStrings:AppConfiguration, que almacena la cadena de conexión para el almacén de App Configuration. Reemplace el marcador de posición <your-App-Configuration-connection-string> por la cadena de conexión del almacén de App Configuration. Puede encontrar la cadena de conexión en la Configuración de acceso del almacén de App Configuration en Azure Portal.
```
dotnet user-secrets init
dotnet user-secrets set ConnectionStrings:AppConfiguration "<your-App-Configuration-connection-string>"
```

Agregue Azure App Configuration y administración de características a la aplicación.

Microsoft Entra ID (recomendado)
Cadena de conexión

Use DefaultAzureCredential para autenticarse en el almacén de App Configuration. Siga las instrucciones para asignar la credencial al rol Lector de datos de App Configuration. Asegúrese de dejar tiempo suficiente para que el permiso se propague antes de ejecutar la aplicación.

Actualice el archivo Program.cs con el código siguiente.

// Existing code in Program.cs
// ... ...

using Azure.Identity;

var builder = WebApplication.CreateBuilder(args);

// Retrieve the endpoint
string endpoint = builder.Configuration.GetValue<string>("Endpoints:AppConfiguration") 
    ?? throw new InvalidOperationException("The setting `Endpoints:AppConfiguration` was not found.");

// Connect to Azure App Configuration and load all feature flags with no label
builder.Configuration.AddAzureAppConfiguration(options =>
{
    options.Connect(new Uri(endpoint), new DefaultAzureCredential())
           .UseFeatureFlags();
});

// Add Azure App Configuration middleware to the container of services
builder.Services.AddAzureAppConfiguration();

// Add feature management to the container of services
builder.Services.AddFeatureManagement();

// The rest of existing code in Program.cs
// ... ...

Actualice el archivo Program.cs con el código siguiente.

// Existing code in Program.cs
// ... ...

var builder = WebApplication.CreateBuilder(args);

// Retrieve the connection string
string connectionString = builder.Configuration.GetConnectionString("AppConfiguration")
    ?? throw new InvalidOperationException("The connection string 'AppConfiguration' was not found.");

// Connect to Azure App Configuration and load all feature flags with no label
builder.Configuration.AddAzureAppConfiguration(options =>
{
    options.Connect(connectionString)
           .UseFeatureFlags();
});

// Add Azure App Configuration middleware to the container of services
builder.Services.AddAzureAppConfiguration();

// Add feature management to the container of services
builder.Services.AddFeatureManagement();

// The rest of existing code in Program.cs
// ... ...

Habilite la actualización de la configuración y de la marca de características desde Azure App Configuration con el middleware App Configuration.

Actualice Program.cs con el siguiente código.

// Existing code in Program.cs
// ... ...

var app = builder.Build();

// Use Azure App Configuration middleware for dynamic configuration refresh
app.UseAzureAppConfiguration();

// The rest of existing code in Program.cs
// ... ...

Agregue una nueva página de Razor vacía denominada Beta en el directorio Pages. Incluye dos archivos Beta.cshtml y Beta.cshtml.cs.
```
@page
@model TestFeatureFlags.Pages.BetaModel
@{
    ViewData["Title"] = "Beta Page";
}

<h1>This is the beta website.</h1>
```

Abra Beta.cshtml.cs y agregue el atributo FeatureGate a la clase BetaModel.

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.FeatureManagement.Mvc;

namespace TestFeatureFlags.Pages
{
    [FeatureGate("Beta")]
    public class BetaModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Abra Pages/_ViewImports.cshtml y registre el asistente de etiquetas del administrador de características mediante una directiva de @addTagHelper.
```
@addTagHelper *, Microsoft.FeatureManagement.AspNetCore
```

Abra _Layout.cshtml en el directorio Pages/Shared. Inserte una nueva etiqueta <feature> entre los elementos de la barra de navegación Inicio y Privacidad, tal como se muestra en las líneas resaltadas a continuación.

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container">
        <a class="navbar-brand" asp-area="" asp-page="/Index">TestAppConfigNet3</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                </li>
                <feature name="Beta">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Beta">Beta</a>
                    </li>
                </feature>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Habilitación de la selección de destino para la aplicación web

El filtro de selección de destino evalúa el estado de la característica de un usuario en función del contexto de selección de destino del usuario, que comprende el identificador de usuario y los grupos a los que pertenece el usuario. En este ejemplo, usará la dirección de correo electrónico del usuario con la sesión iniciada como id. de usuario y el nombre de dominio de la dirección de correo electrónico como grupo.

Agregue un archivo ExampleTargetingContextAccessor.cs con el código siguiente. Implemente la interfaz ITargetingContextAccessor para proporcionar el contexto de selección de destino para el usuario que ha iniciado sesión de la solicitud actual.

using Microsoft.FeatureManagement.FeatureFilters;

namespace TestFeatureFlags
{
    public class ExampleTargetingContextAccessor : ITargetingContextAccessor
    {
        private const string TargetingContextLookup = "ExampleTargetingContextAccessor.TargetingContext";
        private readonly IHttpContextAccessor _httpContextAccessor;

        public ExampleTargetingContextAccessor(IHttpContextAccessor httpContextAccessor)
        {
            _httpContextAccessor = httpContextAccessor ?? throw new ArgumentNullException(nameof(httpContextAccessor));
        }

        public ValueTask<TargetingContext> GetContextAsync()
        {
            HttpContext httpContext = _httpContextAccessor.HttpContext;
            if (httpContext.Items.TryGetValue(TargetingContextLookup, out object value))
            {
                return new ValueTask<TargetingContext>((TargetingContext)value);
            }
            List<string> groups = new List<string>();
            if (httpContext.User.Identity.Name != null)
            {
                groups.Add(httpContext.User.Identity.Name.Split("@", StringSplitOptions.None)[1]);
            }
            TargetingContext targetingContext = new TargetingContext
            {
                UserId = httpContext.User.Identity.Name,
                Groups = groups
            };
            httpContext.Items[TargetingContextLookup] = targetingContext;
            return new ValueTask<TargetingContext>(targetingContext);
        }
    }
}

Abra el archivo Program.cs y habilite el filtro de selección de destino llamando al método WithTargeting. Pase el tipo ExampleTargetingContextAccessor que usará el filtro de selección de destino para obtener el contexto de selección de destino durante la evaluación de la marca de características. Agregue HttpContextAccessor a la colección de servicios para permitir que ExampleTargetingContextAccessor acceda a la información del usuario registrado del HttpContext.
```
// Existing code in Program.cs
// ... ...

// Add feature management to the container of services
builder.Services.AddFeatureManagement()
                .WithTargeting<ExampleTargetingContextAccessor>();

// Add HttpContextAccessor to the container of services.
builder.Services.AddHttpContextAccessor();

// The rest of existing code in Program.cs
// ... ...
```
Nota:

Para las aplicaciones Blazor, consulte las instrucciones para habilitar la administración de características como servicios con ámbito.

Filtro de selección de destino en acción

Compile y ejecute la aplicación. Inicialmente, el elemento Beta no aparece en la barra de herramientas, porque la opción porcentaje predeterminado está establecida en 0.
Seleccione el vínculo Registrar en la esquina superior derecha para crear una nueva cuenta de usuario. Use una dirección de correo electrónico de test@contoso.com. En la pantalla Register Confirmation (Confirmación del registro), seleccione Click here to confirm your account (Haga clic aquí para confirmar su cuenta).
Inicie sesión como test@contoso.com, con la contraseña que estableció al registrar la cuenta.

El elemento Beta ahora se muestra en la barra de herramientas, puesto que test@contoso.com está especificado como usuario de destino.

Ahora inicie sesión como testuser@contoso.com, con la contraseña que estableció al registrar la cuenta. El elemento Beta no aparece en la barra de herramientas porque testuser@contoso.com se especifica como un usuario excluido.

Puede crear usuarios adicionales con las direcciones de correo electrónico de @contoso.com y @contoso-xyz.com para ver el comportamiento de la configuración del grupo.

Los usuarios con las direcciones de correo electrónico de contoso-xyz.com no verán el elemento Beta. Aunque el 50 % de los usuarios con direcciones de correo electrónico de @contoso.com verán el elemento Beta, el otro 50 % no verá el elemento Beta.