Share via

Tutoriel : déployer des fonctionnalités pour des publics ciblés dans une application ASP.NET Core

  • Article

Dans ce tutoriel, vous utiliserez le filtre de ciblage pour déployer une fonctionnalité auprès d'un public ciblé pour votre application ASP.NET Core. Pour plus d’informations sur le filtre de ciblage, consultez Déployer des fonctionnalités pour les audiences ciblées.

Prérequis

Créez une application web avec un indicateur de fonctionnalité

Dans cette section, vous allez créer une application web qui permet aux utilisateurs de se connecter et d’utiliser l’indicateur de fonctionnalité Bêta que vous avez créé précédemment.

  1. Créez une application web qui s’authentifie auprès d’une base de données locale en tirant parti de la commande suivante.

    dotnet new webapp --auth Individual -o TestFeatureFlags

  2. Ajoutez des références aux packages NuGet suivants.

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

  3. Stockez la chaîne de connexion pour votre magasin App Configuration.

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

  4. Ajoutez Azure App Configuration et la gestion des fonctionnalités à votre application.

    Mettez à jour le fichier Program.cs avec le code suivant.

    // 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
// ... ...

  5. Activer le rafraîchissement de la configuration et des indicateurs de fonctionnalités à partir d’Azure App Configuration avec l'intergiciel App Configuration.

    Mettez à jour Program.cs avec le code suivant.

    // 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
// ... ...

  6. Ajoutez une nouvelle page Razor vide nommée Beta sous le répertoire Pages. Ce dernier comprend deux fichiers, Beta.cshtml et Beta.cshtml.cs.

    @page
@model TestFeatureFlags.Pages.BetaModel
@{
    ViewData["Title"] = "Beta Page";
}

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

  7. Ouvrez Beta.cshtml.cs et ajoutez l’attribut FeatureGate à la classe BetaModel.

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

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

  8. Ouvrez Pages/_ViewImports.cshtml, puis inscrivez le Tag Helper du gestionnaire de fonctionnalités à l’aide d’une directive @addTagHelper .

    @addTagHelper *, Microsoft.FeatureManagement.AspNetCore

  9. Ouvrez _Layout.cshtml dans le répertoire Pages/ partagé. Insérez une étiquette <feature> entre les éléments Accueil et Confidentialité de la barre de navigation, comme indiqué dans les lignes signalées ci-dessous.

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

Activer le ciblage pour l'application web

Le filtre de ciblage évalue l'état de la fonctionnalité d'un utilisateur en fonction du contexte de ciblage de l'utilisateur, qui comprend l'identifiant de l'utilisateur et les groupes auxquels il appartient. Dans cet exemple, vous utilisez l’adresse e-mail de l’utilisateur connecté comme identifiant utilisateur et le nom de domaine de l’adresse e-mail comme groupe.

  1. Ajoutez un fichier ExampleTargetingContextAccessor.cs avec le code suivant. Vous implémentez l’interface ITargetingContextAccessor pour fournir le contexte de ciblage de l’utilisateur connecté de la requête actuelle.

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

  2. Ouvrez le fichier Program.cs et activez le filtre de ciblage en appelant la méthode WithTargeting. Vous transmettez le type ExampleTargetingContextAccessor que le filtre de ciblage utilisera pour obtenir le contexte de ciblage pendant l’évaluation de l’indicateur de fonctionnalité. Ajoutez HttpContextAccessor à la collection de services pour autoriser ExampleTargetingContextAccessor à accéder aux informations utilisateur connectées à partir du 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
// ... ...

    Remarque

    Pour les applications Blazor, consultez les instructions pour activer la gestion de fonctionnalités comme services étendus.

Filtre de ciblage en action

  1. Générez et exécutez l’application. Au départ, l’élément Bêta n’apparaît pas dans la barre d’outils, car l’option Pourcentage par défaut est définie sur 0.

    L'utilisateur n'est pas connecté et l'élément Beta n'est pas affiché

  2. Sélectionnez le lien S’inscrire dans le coin supérieur droit pour créer un compte d’utilisateur. Utilisez une adresse e-mail de test@contoso.com. Dans l’écran Confirmation de l’inscription, sélectionnez Cliquez ici pour confirmer votre compte.

  3. Connectez-vous en tant que test@contoso.com, en utilisant le mot de passe que vous avez défini lors de l’inscription du compte.

    L’élément Bêta apparaît désormais dans la barre d’outils, car test@contoso.com est spécifié en tant qu’utilisateur ciblé.

    L'utilisateur est connecté et l'élément Beta est affiché

    Connectez-vous maintenant en tant que testuser@contoso.com, en utilisant le mot de passe que vous avez défini lors de l’inscription du compte. L’élément bêta n’apparaît pas dans la barre d’outils, car testuser@contoso.com est spécifié en tant qu’utilisateur exclu.

    Vous pouvez créer d’autres utilisateurs avec des adresses e-mail @contoso.com et @contoso-xyz.com pour voir le comportement des paramètres de groupe.

    Les utilisateurs avec des adresses e-mail contoso-xyz.com ne verront pas l’élément Bêta. Alors que 50 % des utilisateurs avec des adresses e-mail @contoso.com verront l’élément bêta, les autres 50 % ne verront pas l’élément bêta.

Étapes suivantes

Pour en savoir plus sur les filtres de fonctionnalités, passez aux tutoriels suivants.

Activer des fonctionnalités conditionnelles avec des filtres de fonctionnalités

Activer des fonctionnalités selon une planification