Ajouter, télécharger et supprimer des données utilisateur personnalisées dans Identity dans un projet ASP.NET Core

Par Rick Anderson

Cet article montre comment :

• Ajoutez des données utilisateur personnalisées à une application web ASP.NET Core.
• Marquez le modèle de données utilisateur personnalisé avec l’attribut PersonalDataAttribute afin qu’il soit automatiquement disponible pour téléchargement et suppression. Le fait que les données puissent être téléchargées et supprimées permet de répondre aux exigences du RGPD.

L’exemple de projet est créé à partir d’une Razor application web Pages, mais les instructions sont similaires pour une application web MVC ASP.NET Core.

Affichez ou téléchargez l’exemple de code (procédure de téléchargement)

Prérequis

SDK .NET 6.0

Créer une application web Razor

Visual Studio

• Dans Visual Studio, dans le menu Fichier, sélectionnez Nouveau>Projet. Nommez le projet WebApp1 si vous souhaitez qu’il corresponde à l’espace de noms de l’exemple de code de téléchargement .
• Sélectionner ASP.NET Core application web>OK
• Sélectionnez Application web>OK
• Générez et exécutez le projet.

CLI .NET Core

dotnet new webapp -o WebApp1

Exécuter le générateur de modèles Identity

Visual Studio

• À partir de Explorateur de solutions, cliquez avec le bouton droit sur le projet >Ajouter>nouvel élément de structure.
• Dans le volet gauche de la boîte de dialogue Ajouter une structure, sélectionnez Identity>Ajouter.
• Dans la boîte de dialogue AjouterIdentity, les options suivantes sont disponibles :
  • Sélectionner le fichier de disposition existant ~/Pages/Shared/_Layout.cshtml
  • Sélectionnez les fichiers suivants à remplacer :
    • Compte/Inscription
    • Compte/Gérer/Index
  • Sélectionnez le + bouton pour créer une classe de contexte de données. Acceptez le type (WebApp1.Models.WebApp1Context si le projet est nommé WebApp1).
  • Sélectionnez le bouton + pour créer une classe utilisateur. Acceptez le type (WebApp1User si le projet est nommé WebApp1) >Ajouter.
• Sélectionnez Ajouter.

CLI .NET Core

Si vous n’avez pas encore installé le modèle de ASP.NET Core, installez-le maintenant :

dotnet tool install -g dotnet-aspnet-codegenerator

Notes

Par défaut, l’architecture des fichiers binaires .NET à installer représente l’architecture du système d’exploitation en cours d’exécution. Pour spécifier une architecture de système d’exploitation différente, consultez dotnet tool install, --arch option. Pour plus d'informations, consultez le problème GitHub dotnet/AspNetCore.Docs #29262.

Ajoutez une référence de package à Microsoft.VisualStudio.Web.CodeGeneration.Design au fichier de projet (.csproj). Exécutez la commande suivante à la répertoire du projet :

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet restore

Exécutez la commande suivante pour répertorier les options du générateur de modèlesIdentity :

dotnet aspnet-codegenerator identity -h

Dans le dossier du projet, exécutez le générateur de modèlesIdentity :

dotnet aspnet-codegenerator identity -u WebApp1User -fi Account.Register;Account.Manage.Index

PowerShell utilise un point-virgule comme séparateur de commandes. Lorsque vous utilisez PowerShell, placez les points-virgules dans la liste des fichiers ou placez la liste de fichiers entre guillemets doubles.

Suivez les instructions fournies dans Migrations, UseAuthentication et disposition pour effectuer les étapes suivantes :

• Créez une migration et mettez à jour la base de données.
• Ajout de UseAuthentication à Program.cs
• Ajoutez <partial name="_LoginPartial" /> au fichier de layout.
• Testez l’application :
  • Inscrire un utilisateur
  • Sélectionnez le nouveau nom d’utilisateur (en regard du lien Déconnexion ). Vous devrez peut-être développer la fenêtre ou sélectionner l’icône de barre de navigation pour afficher le nom d’utilisateur et d’autres liens.
  • Sélectionnez l’onglet Données personnel.
  • Sélectionnez le bouton Télécharger et examinez le fichier PersonalData.json.
  • Testez le bouton Supprimer, qui supprime l’utilisateur connecté.

Ajouter des données utilisateur personnalisées pour la base de données Identity

Mettez à jour la classe dérivée IdentityUser avec des propriétés personnalisées. Si vous avez nommé le projet WebApp1, le fichier est nommé Areas/Identity/Data/WebApp1User.cs. Mettez à jour le fichier avec le code suivant :

using Microsoft.AspNetCore.Identity;

namespace WebApp1.Areas.Identity.Data;

public class WebApp1User : IdentityUser
{
    [PersonalData]
    public string? Name { get; set; }
    [PersonalData]
    public DateTime DOB { get; set; }
}

Les propriétés avec l’attribut PersonalData sont les suivantes :

• Supprimé lorsque la Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtmlRazor page appelle UserManager.Delete.
• Inclus dans les données téléchargées par la Areas/Identity/Pages/Account/Manage/DownloadPersonalData.cshtmlRazor Page.

Mettre à jour la page Account/Manage/Index.cshtml

Mettez à jour InputModel dans Areas/Identity/Pages/Account/Manage/Index.cshtml.cs avec le code en surbrillance suivant :

public class IndexModel : PageModel
{
    private readonly UserManager<WebApp1User> _userManager;
    private readonly SignInManager<WebApp1User> _signInManager;

    public IndexModel(
        UserManager<WebApp1User> userManager,
        SignInManager<WebApp1User> signInManager)
    {
        _userManager = userManager;
        _signInManager = signInManager;
    }

    /// <summary>
    ///     This API supports the ASP.NET Core Identity default UI infrastructure and is not intended to be used
    ///     directly from your code. This API may change or be removed in future releases.
    /// </summary>
    public string Username { get; set; }

    // Remaining API warnings ommited.

    [TempData]
    public string StatusMessage { get; set; }

    [BindProperty]
    public InputModel Input { get; set; }

    public class InputModel
    {
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "Full name")]
        public string Name { get; set; }

        [Required]
        [Display(Name = "Birth Date")]
        [DataType(DataType.Date)]
        public DateTime DOB { get; set; }

        [Phone]
        [Display(Name = "Phone number")]
        public string PhoneNumber { get; set; }
    }

    private async Task LoadAsync(WebApp1User user)
    {
        var userName = await _userManager.GetUserNameAsync(user);
        var phoneNumber = await _userManager.GetPhoneNumberAsync(user);

        Username = userName;

        Input = new InputModel
        {
            Name = user.Name,
            DOB = user.DOB,
            PhoneNumber = phoneNumber
        };
    }

    public async Task<IActionResult> OnGetAsync()
    {
        var user = await _userManager.GetUserAsync(User);
        if (user == null)
        {
            return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
        }

        await LoadAsync(user);
        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {
        var user = await _userManager.GetUserAsync(User);
        if (user == null)
        {
            return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
        }

        if (!ModelState.IsValid)
        {
            await LoadAsync(user);
            return Page();
        }

        var phoneNumber = await _userManager.GetPhoneNumberAsync(user);
        if (Input.PhoneNumber != phoneNumber)
        {
            var setPhoneResult = await _userManager.SetPhoneNumberAsync(user, Input.PhoneNumber);
            if (!setPhoneResult.Succeeded)
            {
                StatusMessage = "Unexpected error when trying to set phone number.";
                return RedirectToPage();
            }
        }

        if (Input.Name != user.Name)
        {
            user.Name = Input.Name;
        }

        if (Input.DOB != user.DOB)
        {
            user.DOB = Input.DOB;
        }

        await _userManager.UpdateAsync(user);
        await _signInManager.RefreshSignInAsync(user);
        StatusMessage = "Your profile has been updated";
        return RedirectToPage();
    }
}

Mettez à jour Areas/Identity/Pages/Account/Manage/Index.cshtml avec la balise en surbrillance suivant :

@page
@model IndexModel
@{
    ViewData["Title"] = "Profile";
    ViewData["ActivePage"] = ManageNavPages.Index;
}

<h3>@ViewData["Title"]</h3>
<partial name="_StatusMessage" for="StatusMessage" />
<div class="row">
    <div class="col-md-6">
        <form id="profile-form" method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-floating">
                <input asp-for="Username" class="form-control" disabled />
                <label asp-for="Username" class="form-label"></label>
            </div>
            <div class="form-floating">
                <input asp-for="Input.Name" class="form-control" />
                <label asp-for="Input.Name" class="form-label"></label>
            </div>
            <div class="form-floating">
                <input asp-for="Input.DOB" class="form-control" />
                <label asp-for="Input.DOB" class="form-label"></label>
            </div>
            <div class="form-floating">
                <input asp-for="Input.PhoneNumber" class="form-control" />
                <label asp-for="Input.PhoneNumber" class="form-label"></label>
                <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
            </div>
            <button id="update-profile-button" type="submit" class="w-100 btn btn-lg btn-primary">Save</button>
        </form>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Mettre à jour la page Account/Register.cshtml

Mettez à jour InputModel dans Areas/Identity/Pages/Account/Register.cshtml.cs avec le code en surbrillance suivant :

    public class RegisterModel : PageModel
    {
        private readonly SignInManager<WebApp1User> _signInManager;
        private readonly UserManager<WebApp1User> _userManager;
        private readonly IUserStore<WebApp1User> _userStore;
        private readonly IUserEmailStore<WebApp1User> _emailStore;
        private readonly ILogger<RegisterModel> _logger;
        private readonly IEmailSender _emailSender;

        public RegisterModel(
            UserManager<WebApp1User> userManager,
            IUserStore<WebApp1User> userStore,
            SignInManager<WebApp1User> signInManager,
            ILogger<RegisterModel> logger,
            IEmailSender emailSender)
        {
            _userManager = userManager;
            _userStore = userStore;
            _emailStore = GetEmailStore();
            _signInManager = signInManager;
            _logger = logger;
            _emailSender = emailSender;
        }

        /// <summary>
        ///     This API supports the ASP.NET Core Identity default UI infrastructure and is not intended to be used
        ///     directly from your code. This API may change or be removed in future releases.
        /// </summary>
        [BindProperty]
        public InputModel Input { get; set; }

        // Remaining API warnings ommited.
        public string ReturnUrl { get; set; }

        public IList<AuthenticationScheme> ExternalLogins { get; set; }

        public class InputModel
        {
            [Required]
            [DataType(DataType.Text)]
            [Display(Name = "Full name")]
            public string Name { get; set; }

            [Required]
            [Display(Name = "Birth Date")]
            [DataType(DataType.Date)]
            public DateTime DOB { get; set; }

            [Required]
            [EmailAddress]
            [Display(Name = "Email")]
            public string Email { get; set; }

            [Required]
            [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
            [DataType(DataType.Password)]
            [Display(Name = "Password")]
            public string Password { get; set; }

            [DataType(DataType.Password)]
            [Display(Name = "Confirm password")]
            [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
            public string ConfirmPassword { get; set; }
        }


        public async Task OnGetAsync(string returnUrl = null)
        {
            ReturnUrl = returnUrl;
            ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();
        }

        public async Task<IActionResult> OnPostAsync(string returnUrl = null)
        {
            returnUrl ??= Url.Content("~/");
            ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();
            if (ModelState.IsValid)
            {
                var user = CreateUser();

                user.Name = Input.Name;
                user.DOB = Input.DOB;

                await _userStore.SetUserNameAsync(user, Input.Email, CancellationToken.None);
                await _emailStore.SetEmailAsync(user, Input.Email, CancellationToken.None);
                var result = await _userManager.CreateAsync(user, Input.Password);

                if (result.Succeeded)
                {
                    _logger.LogInformation("User created a new account with password.");

                    var userId = await _userManager.GetUserIdAsync(user);
                    var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);
                    code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
                    var callbackUrl = Url.Page(
                        "/Account/ConfirmEmail",
                        pageHandler: null,
                        values: new { area = "Identity", userId = userId, code = code, returnUrl = returnUrl },
                        protocol: Request.Scheme);

                    await _emailSender.SendEmailAsync(Input.Email, "Confirm your email",
                        $"Please confirm your account by <a href='{HtmlEncoder.Default.Encode(callbackUrl)}'>clicking here</a>.");

                    if (_userManager.Options.SignIn.RequireConfirmedAccount)
                    {
                        return RedirectToPage("RegisterConfirmation", new { email = Input.Email, returnUrl = returnUrl });
                    }
                    else
                    {
                        await _signInManager.SignInAsync(user, isPersistent: false);
                        return LocalRedirect(returnUrl);
                    }
                }
                foreach (var error in result.Errors)
                {
                    ModelState.AddModelError(string.Empty, error.Description);
                }
            }

            // If we got this far, something failed, redisplay form
            return Page();
        }

        private WebApp1User CreateUser()
        {
            try
            {
                return Activator.CreateInstance<WebApp1User>();
            }
            catch
            {
                throw new InvalidOperationException($"Can't create an instance of '{nameof(WebApp1User)}'. " +
                    $"Ensure that '{nameof(WebApp1User)}' is not an abstract class and has a parameterless constructor, or alternatively " +
                    $"override the register page in /Areas/Identity/Pages/Account/Register.cshtml");
            }
        }

        private IUserEmailStore<WebApp1User> GetEmailStore()
        {
            if (!_userManager.SupportsUserEmail)
            {
                throw new NotSupportedException("The default UI requires a user store with email support.");
            }
            return (IUserEmailStore<WebApp1User>)_userStore;
        }
    }
}

Mettez à jour Areas/Identity/Pages/Account/Register.cshtml avec la balise en surbrillance suivant :

@page
@model RegisterModel
@{
    ViewData["Title"] = "Register";
}

<h1>@ViewData["Title"]</h1>

<div class="row">
    <div class="col-md-4">
        <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
            <h2>Create a new account.</h2>
            <hr />
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-floating">
                <label asp-for="Input.Name"></label>
                <input asp-for="Input.Name" class="form-control" />
                <span asp-validation-for="Input.Name" class="text-danger"></span>
            </div>
            <div class="form-floating">
                <label asp-for="Input.DOB"></label>
                <input asp-for="Input.DOB" class="form-control" />
                <span asp-validation-for="Input.DOB" class="text-danger"></span>
            </div>

            <div class="form-floating">
                <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" />
                <label asp-for="Input.Email"></label>
                <span asp-validation-for="Input.Email" class="text-danger"></span>
            </div>
            <div class="form-floating">
                <input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" />
                <label asp-for="Input.Password"></label>
                <span asp-validation-for="Input.Password" class="text-danger"></span>
            </div>
            <div class="form-floating">
                <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" />
                <label asp-for="Input.ConfirmPassword"></label>
                <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
            </div>
            <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
        </form>
    </div>
    <div class="col-md-6 col-md-offset-2">
        <section>
            <h3>Use another service to register.</h3>
            <hr />
            @{
                if ((Model.ExternalLogins?.Count ?? 0) == 0)
                {
                    <div>
                        <p>
                            There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
                            about setting up this ASP.NET application to support logging in via external services</a>.
                        </p>
                    </div>
                }
                else
                {
                    <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
                        <div>
                            <p>
                                @foreach (var provider in Model.ExternalLogins!)
                                {
                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                                }
                            </p>
                        </div>
                    </form>
                }
            }
        </section>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Créez le projet.

Mettre à jour la disposition

Consultez Modifications de la disposition pour obtenir des instructions pour ajouter des liens de connexion et de déconnexion à chaque page.

Ajouter une migration pour les données utilisateur personnalisées

Visual Studio

Dans la console du Gestionnaire de packageVisual Studio :

Add-Migration CustomUserData
Update-Database

CLI .NET Core

dotnet ef migrations add CustomUserData
dotnet ef database update

Tester la création, l’affichage, le téléchargement et la suppression de données utilisateur personnalisées

Testez l’application :

• Inscrivez un nouvel utilisateur.
• Affichez les données utilisateur personnalisées sur la page /Identity/Account/Manage.
• Téléchargez et affichez les données personnelles des utilisateurs à partir de la page /Identity/Account/Manage/PersonalData.