Menambahkan, mengunduh, dan menghapus data pengguna kustom ke Identity dalam proyek ASP.NET Core

Oleh Rick Anderson

Artikel ini menunjukkan cara:

• Tambahkan data pengguna kustom ke aplikasi web ASP.NET Core.
• Tandai model data pengguna kustom dengan PersonalDataAttribute atribut sehingga secara otomatis tersedia untuk diunduh dan dihapus. Membuat data dapat diunduh dan dihapus membantu memenuhi persyaratan GDPR .

Sampel proyek dibuat dari Razor aplikasi web Pages, tetapi instruksinya mirip untuk aplikasi web ASP.NET Core MVC.

Melihat atau mengunduh kode sampel (cara mengunduh)

Prasyarat

.NET 6.0 SDK

Membuat Razor aplikasi web

Visual Studio

• Dari menu File Visual Studio, pilih Proyek Baru>. Beri nama proyek WebApp1 jika Anda ingin cocok dengan namespace kode sampel unduhan.
• Pilih ASP.NET Core Web Application>OK
• Pilih Aplikasi>Web OK
• Buat dan jalankan proyek.

.NET CLI

dotnet new webapp -o WebApp1

Jalankan Identity perancah

Visual Studio

• Dari Penjelajah Solusi, klik kanan proyek >Tambahkan>Item Perancah Baru.
• Dari panel kiri dialog Tambahkan Perancah, pilihIdentity> Tambahkan.
• Dalam dialog TambahkanIdentity, opsi berikut ini:
  • Pilih file tata letak yang ada ~/Pages/Shared/_Layout.cshtml
  • Pilih file berikut untuk diambil alih:
    • Akun/Daftar
    • Akun/Kelola/Indeks
  • Pilih tombol + untuk membuat kelas konteks Data baru. Terima jenis (WebApp1.Models.WebApp1Context jika proyek bernama WebApp1).
  • Pilih tombol + untuk membuat kelas Pengguna baru. Terima jenis (WebApp1User jika proyek bernama WebApp1) >Tambahkan.
• Pilih Tambahkan.

.NET CLI

Jika sebelumnya Anda belum menginstal perancah ASP.NET Core, instal sekarang:

dotnet tool install -g dotnet-aspnet-codegenerator

Catatan

Secara default arsitektur biner .NET yang akan diinstal mewakili arsitektur OS yang sedang berjalan. Untuk menentukan arsitektur OS yang berbeda, lihat penginstalan alat dotnet, opsi --arch. Untuk informasi selengkapnya, lihat Masalah GitHub dotnet/AspNetCore.Docs #29262.

Tambahkan referensi paket ke Microsoft.VisualStudio.Web.CodeGeneration.Design ke file proyek (.csproj). Jalankan perintah berikut di direktori proyek:

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

Jalankan perintah berikut untuk mencantumkan Identity opsi perancah:

dotnet aspnet-codegenerator identity -h

Di folder proyek, jalankan Identity perancah:

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

PowerShell menggunakan titik koma sebagai pemisah perintah. Saat menggunakan PowerShell, lolos dari titik koma dalam daftar file atau letakkan daftar file dalam tanda kutip ganda.

Ikuti instruksi dalam Migrasi, UseAuthentication, dan tata letak untuk melakukan langkah-langkah berikut:

• Buat migrasi dan perbarui database.
• Menambahkan UseAuthentication ke Program.cs
• Tambahkan <partial name="_LoginPartial" /> ke file tata letak.
• Uji aplikasi:
  • Mendaftarkan pengguna
  • Pilih nama pengguna baru (di samping tautan Keluar ). Anda mungkin perlu memperluas jendela atau memilih ikon bilah navigasi untuk menampilkan nama pengguna dan tautan lainnya.
  • Pilih tab Data Pribadi.
  • Pilih tombol Unduh dan periksa PersonalData.json file.
  • Uji tombol Hapus , yang menghapus pengguna yang masuk.

Menambahkan data pengguna kustom ke Identity DB

IdentityUser Perbarui kelas turunan dengan properti kustom. Jika Anda menamai proyek WebApp1, file diberi nama Areas/Identity/Data/WebApp1User.cs. Perbarui file dengan kode berikut:

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

Properti dengan atribut PersonalData adalah:

• Dihapus saat Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtmlRazor Halaman memanggil UserManager.Delete.
• Disertakan dalam data yang diunduh oleh Areas/Identity/Pages/Account/Manage/DownloadPersonalData.cshtmlRazor Halaman.

Account/Manage/Index.cshtml Memperbarui halaman

Perbarui masuk InputModel dengan kode yang disorot Areas/Identity/Pages/Account/Manage/Index.cshtml.cs berikut:

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

Areas/Identity/Pages/Account/Manage/Index.cshtml Perbarui dengan markup yang disorot berikut ini:

@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" />
}

Account/Register.cshtml Memperbarui halaman

Perbarui masuk InputModel dengan kode yang disorot Areas/Identity/Pages/Account/Register.cshtml.cs berikut:

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

Areas/Identity/Pages/Account/Register.cshtml Perbarui dengan markup yang disorot berikut ini:

@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" />
}

Bangun proyek.

Memperbarui tata letak

Lihat Perubahan tata letak untuk instruksi menambahkan tautan masuk dan keluar ke setiap halaman.

Menambahkan migrasi untuk data pengguna kustom

Visual Studio

Di Konsol Manajer Paket Visual Studio:

Add-Migration CustomUserData
Update-Database

.NET CLI

dotnet ef migrations add CustomUserData
dotnet ef database update

Menguji buat, lihat, unduh, hapus data pengguna kustom

Uji aplikasi:

• Daftarkan pengguna baru.
• Lihat data pengguna kustom di /Identity/Account/Manage halaman.
• Unduh dan lihat data pribadi pengguna dari /Identity/Account/Manage/PersonalData halaman.