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

Artículo
05/14/2024

En este tutorial, usará el filtro de selección de destino para implementar una característica para audiencia 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, creará 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
```

Agregue referencias a los siguientes paquetes NuGet.

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

Almacene la cadena de conexión para el almacén de App Configuration.

dotnet user-secrets init
dotnet user-secrets set ConnectionStrings:AppConfig "<your_connection_string>"

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

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

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

var builder = WebApplication.CreateBuilder(args);

// Retrieve the App Config connection string
string AppConfigConnectionString = builder.Configuration.GetConnectionString("AppConfig") ?? throw new InvalidOperationException("Connection string 'AppConfig' not found."); ;

// Load feature flag configuration from Azure App Configuration
builder.Configuration.AddAzureAppConfiguration(options =>
{
    options.Connect(AppConfigConnectionString);
    options.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 FeatureGate el atributo 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.

Pasos siguientes

Para más información sobre los filtros de características, consulte los siguientes tutoriales.

Habilitación de características condicionales con filtros de características

Habilitación de características según una programación

Share via