Ajouter, télécharger et supprimer des données Identity utilisateur personnalisées 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 le téléchargement et la suppression. Rendre les données en mesure d’ê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 Core MVC ASP.NET.

Afficher ou télécharger un exemple de code (comment télécharger)

Conditions préalables

Kit de développement .NET 6

Créer une Razor application web

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 Application Web ASP.NET Core>OK
• Sélectionnez Application Web>OK
• Générez et exécutez le projet.

CLI .NET

dotnet new webapp -o WebApp1

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

Visual Studio

• Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet >Ajouter>un nouvel élément scaffoldé.
• Dans le volet gauche de la boîte de dialogue Ajouter une structure , sélectionnez Identity>Ajouter.
• Dans la boîte de dialogue Ajouter Identity, les options suivantes :
  • 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 User. Acceptez le type (WebApp1User si le projet est nommé WebApp1) >Ajouter.
• Sélectionnez Ajouter.

CLI .NET

Si vous n’avez pas déjà installé la structure ASP.NET Core, installez-la maintenant :

dotnet tool install -g dotnet-aspnet-codegenerator

Remarque

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 n° 29262.

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

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

Exécutez la commande suivante pour répertorier les options de l'échafaudeur Identity :

dotnet aspnet-codegenerator identity -h

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

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, échappez les points-virgules dans la liste de fichiers ou mettez la liste de fichiers entre guillemets doubles.

Suivez les instructions dans Migrations, UseAuthentication, et la mise en page pour effectuer les étapes suivantes :

• Créez une migration et mettez à jour la base de données.
• Ajout de UseAuthentication à Program.cs
• Ajouter <partial name="_LoginPartial" /> au fichier de mise en page.
• Testez l’application :
  • Inscrire un utilisateur
  • Sélectionnez le nouveau nom d’utilisateur (en regard du lien De 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 personnelles .
  • Sélectionnez le bouton Télécharger et examinez le PersonalData.json fichier.
  • Testez le bouton Supprimer , qui supprime l’utilisateur connecté.

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

Mettez à jour la IdentityUser classe dérivée 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 Account/Manage/Index.cshtml page

Mettez à jour le InputModel dans Areas/Identity/Pages/Account/Manage/Index.cshtml.cs avec le code mis 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 le balisage Areas/Identity/Pages/Account/Manage/Index.cshtml mis 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 Account/Register.cshtml page

Mettez à jour le InputModel dans Areas/Identity/Pages/Account/Register.cshtml.cs avec le code mis 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 le balisage Areas/Identity/Pages/Account/Register.cshtml mis 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">
                <input asp-for="Input.Name" class="form-control" />
                <label asp-for="Input.Name"></label>
                <span asp-validation-for="Input.Name" class="text-danger"></span>
            </div>
            <div class="form-floating">
                <input asp-for="Input.DOB" class="form-control" />
                <label asp-for="Input.DOB"></label>
                <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" />
}

Construisez le projet.

Mettre à jour la disposition

Consultez les modifications de disposition pour obtenir des instructions sur l’ajout de 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 package Visual Studio :

Add-Migration CustomUserData
Update-Database

CLI .NET

dotnet ef migrations add CustomUserData
dotnet ef database update

Testez 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 /Identity/Account/Manage page.
• Téléchargez et affichez les données personnelles des utilisateurs à partir de la /Identity/Account/Manage/PersonalData page.