练习 - 自定义标识

15 分钟

在上一单元中，你了解了自定义在 ASP.NET Core Identity 中的工作原理。在本单元中，你将扩展标识数据模型并进行相应的 UI 更改。

自定义用户帐户数据

在本部分中，你将创建和自定义用于代替默认 Razor 类库的 Identity UI 文件。

将要修改的用户注册文件添加到项目中：
```
dotnet aspnet-codegenerator identity --dbContext RazorPagesPizzaAuth --files "Account.Manage.EnableAuthenticator;Account.Manage.Index;Account.Register;Account.ConfirmEmail"
```
在上面的命令中：
- --dbContext 选项让工具了解名为 RazorPagesPizzaAuth 的现有 DbContext 派生类。
- --files 选项指定要添加到 Identity 区域的以分号分隔的唯一文件列表。
  - Account.Manage.Index 是配置文件管理页面。本单元后续将对此页面进行修改。
  - Account.Register 是用户注册页面。本单元也会对此页面进行修改。
  - Account.Manage.EnableAuthenticator 和 Account.ConfirmEmail 在本单元中作为支架使用，但并未进行修改。
提示

在项目根目录中，运行以下命令以查看 --files 选项的有效值：dotnet aspnet-codegenerator identity --listFiles

将以下文件添加到 Areas/Identity 目录中：
- Pages/
  - _ViewImports.cshtml
  - Account/
    - _ViewImports.cshtml
    - ConfirmEmail.cshtml
    - ConfirmEmail.cshtml.cs
    - Register.cshtml
    - Register.cshtml.cs
    - Manage/
      - _ManageNav.cshtml
      - _ViewImports.cshtml
      - EnableAuthenticator.cshtml
      - EnableAuthenticator.cshtml.cs
      - Index.cshtml
      - Index.cshtml.cs
      - ManageNavPages.cs

扩展 `IdentityUser`

你收到了一个新的要求，即存储用户的姓名。由于默认 IdentityUser 类不包含名字和姓氏的属性，因此需要扩展 RazorPagesPizzaUser 类。

对 Areas/Identity/Data/RazorPagesPizzaUser.cs 进行以下更改：

添加 FirstName 和 LastName 属性：
```
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Identity;

namespace RazorPagesPizza.Areas.Identity.Data;

public class RazorPagesPizzaUser : IdentityUser
{
    [Required]
    [MaxLength(100)]
    public string FirstName { get; set; } = string.Empty;

    [Required]
    [MaxLength(100)]
    public string LastName { get; set; } = string.Empty;
}
```
前面代码片段中的属性表示要在基础 AspNetUsers 表中创建的其他列。这两个属性都是必需的，因此使用 [Required] 属性进行注释。此外，[MaxLength] 属性表示允许的最大长度为 100 个字符。相应地定义基础表列的数据类型。分配默认值 string.Empty，因为在此项目中启用了可为 null 的上下文，并且属性是不可为 null 的字符串。
将下面的 using 语句添加到文件顶部。
```
using System.ComponentModel.DataAnnotations;
```
上面的代码解析了应用于 FirstName 和 LastName 属性的数据注释属性。

更新数据库

现在，模型更改已完成，必须对数据库进行相应的更改。

确保保存所有更改。

创建并应用 EF Core 迁移，以更新基础数据存储：

dotnet ef migrations add UpdateUser
dotnet ef database update

UpdateUser EF Core 迁移已将 DDL 更改脚本应用于 AspNetUsers 表的架构。具体而言，添加了 FirstName 和 LastName 列，如以下迁移输出摘录所示：

info: Microsoft.EntityFrameworkCore.Database.Command[20101]
    Executed DbCommand (37ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
    ALTER TABLE [AspNetUsers] ADD [FirstName] nvarchar(100) NOT NULL DEFAULT N'';
info: Microsoft.EntityFrameworkCore.Database.Command[20101]
    Executed DbCommand (36ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
    ALTER TABLE [AspNetUsers] ADD [LastName] nvarchar(100) NOT NULL DEFAULT N'';

检查数据库，分析 UpdateUser EF Core 迁移对 AspNetUsers 表的架构的影响。

在“SQL Server”窗格中，展开 dbo.AspNetUsers 表上的“列”节点。

RazorPagesPizzaUser 类中的 FirstName 和 LastName 属性对应于前面图像中的 FirstName 和 LastName 列。由于 [MaxLength(100)] 属性，因此向这两列中的每一列都分配了 nvarchar(100) 数据类型。添加了非 null 约束，因为在类中 FirstName 和 LastName 是不可为 null 的字符串。现有行显示新列中的空字符串。

自定义用户注册表单

你已为 FirstName 和 LastName 添加了新列。现在，需要编辑 UI，以便在注册表单上显示匹配的字段。

在 Areas/Identity/Pages/Account/Register.cshtml 中，添加以下突出显示的标记：

<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" role="alert"></div>
    <div class="form-floating mb-3">
        <input asp-for="Input.FirstName" class="form-control" />
        <label asp-for="Input.FirstName"></label>
        <span asp-validation-for="Input.FirstName" class="text-danger"></span>
    </div>
    <div class="form-floating mb-3">
        <input asp-for="Input.LastName" class="form-control" />
        <label asp-for="Input.LastName"></label>
        <span asp-validation-for="Input.LastName" class="text-danger"></span>
    </div>
    <div class="form-floating mb-3">
        <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
        <label asp-for="Input.Email">Email</label>
        <span asp-validation-for="Input.Email" class="text-danger"></span>
    </div>

使用上述标记，向用户注册表单添加“名”和“姓”文本框。

在 Areas/Identity/Pages/Account/Register.cshtml.cs 中，添加对“名称”文本框的支持。

将 FirstName 和 LastName 属性添加到 InputModel 嵌套类：

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

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

    /// <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>
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

[Display] 属性定义与文本框关联的标签文本。

修改 OnPostAsync 方法，以设置 RazorPagesPizza 对象上的 FirstName 和 LastName 属性。添加以下突出显示的行：

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

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

上述更改将 FirstName 和 LastName 属性设置为注册表单中的用户输入。

更新 Pages/Shared/_LoginPartial.cshtml 以显示用户注册期间收集的名字和姓氏。需要以下代码片段中突出显示的行：

<ul class="navbar-nav">
@if (SignInManager.IsSignedIn(User))
{
    RazorPagesPizzaUser? user = await UserManager.GetUserAsync(User);
    var fullName = $"{user?.FirstName} {user?.LastName}";

    <li class="nav-item">
        <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello, @fullName!</a>
    </li>

UserManager.GetUserAsync(User) 返回可为空的 RazorPagesPizzaUser 对象。仅当 RazorPagesPizzaUser 对象不为 null 时，null 条件 ?. 操作符才可用于访问 FirstName 和 LastName 属性。

自定义配置文件管理表单

已将新字段添加到用户注册表单，但还应将它们添加到配置文件管理表单，以便现有用户可以编辑它们。

在 Areas/Identity/Pages/Account/Manage/Index.cshtml 中，添加以下突出显示的标记。保存更改。

<form id="profile-form" method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
    <div class="form-floating mb-3">
        <input asp-for="Input.FirstName" class="form-control" />
        <label asp-for="Input.FirstName"></label>
        <span asp-validation-for="Input.FirstName" class="text-danger"></span>
    </div>
    <div class="form-floating mb-3">
        <input asp-for="Input.LastName" class="form-control" />
        <label asp-for="Input.LastName"></label>
        <span asp-validation-for="Input.LastName" class="text-danger"></span>
    </div>
    <div class="form-floating mb-3">
        <input asp-for="Username" class="form-control" disabled />
        <label asp-for="Username" class="form-label"></label>
    </div>

在 Areas/Identity/Pages/Account/Manage/Index.cshtml.cs 中，进行以下更改以支持“姓名”文本框。

将 FirstName 和 LastName 属性添加到 InputModel 嵌套类：

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

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

    /// <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>
    [Phone]
    [Display(Name = "Phone number")]
    public string PhoneNumber { get; set; }
}

纳入 LoadAsync 方法中突出显示的更改：

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

    Username = userName;

    Input = new InputModel
    {
        PhoneNumber = phoneNumber,
        FirstName = user.FirstName,
        LastName = user.LastName
    };
}

上述代码支持检索显示在配置文件管理表单的相应文本框中的名字和姓氏。

纳入 OnPostAsync 方法中突出显示的更改。保存所做更改。

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

    user.FirstName = Input.FirstName;
    user.LastName = Input.LastName;
    await _userManager.UpdateAsync(user);

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

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

上述代码支持更新数据库的 AspNetUsers 表中的名字和姓氏。

配置确认电子邮件发送方

第一次测试应用时，你注册了一个用户，然后单击了一个链接来模拟确认用户的电子邮件地址。要发送实际确认电子邮件，需要创建 IEmailSender 的实现，并在依赖项注入系统中注册它。为简单起见，本单元中的实现实际上不会向简单邮件传输协议 (SMTP) 服务器发送电子邮件。它只会将电子邮件内容写入控制台。

由于要在控制台中以纯文本形式查看电子邮件，因此应更改生成的消息以排除 HTML 编码的文本。在 Areas/Identity/Pages/Account/Register.cshtml.cs 中，找到以下代码：

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

请将其更改为：

await _emailSender.SendEmailAsync(Input.Email, "Confirm your email",
    $"Please confirm your account by visiting the following URL:\r\n\r\n{callbackUrl}");

在“资源管理器”窗格中，右键单击“RazorPagesPizza\Services”文件夹，新建一个名为 EmailSender.cs 的文件。打开文件，并添加以下代码：

using Microsoft.AspNetCore.Identity.UI.Services;
namespace RazorPagesPizza.Services;

public class EmailSender : IEmailSender
{
    public EmailSender() {}

    public Task SendEmailAsync(string email, string subject, string htmlMessage)
    {
        Console.WriteLine();
        Console.WriteLine("Email Confirmation Message");
        Console.WriteLine("--------------------------");
        Console.WriteLine($"TO: {email}");
        Console.WriteLine($"SUBJECT: {subject}");
        Console.WriteLine($"CONTENTS: {htmlMessage}");
        Console.WriteLine();

        return Task.CompletedTask;
    }
}

前面的代码创建了 IEmailSender 的实现，该实现将消息的内容写入控制台。在实际实现中，SendEmailAsync 将连接到外部邮件服务或一些其他操作来发送电子邮件。

在 Program.cs 中，添加突出显示的行：

using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
using Microsoft.AspNetCore.Identity.UI.Services;
using RazorPagesPizza.Services;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection");
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<RazorPagesPizzaUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<IEmailSender, EmailSender>();

var app = builder.Build();

前面在依赖项注入系统中将 EmailSender 注册为 IEmailSender。

测试对注册表单的更改

就是这样了！让我们测试一下对注册表单和确认电子邮件的更改。

确保已保存所有更改。
在终端窗格中，生成项目并使用 dotnet run 运行应用。
在浏览器中导航到应用。如果已登录，请选择“退出登录”。
选择“注册”并使用更新的表单注册新用户。

备注

“名”和“姓”字段的验证约束反映了 InputModel 的 FirstName 和 LastName 属性上的数据注释。
注册后，你会被重定向到“注册确认”屏幕。在终端窗格中，向上滚动找到类似如下的控制台输出：
```
Email Confirmation Message
--------------------------
TO: jana.heinrich@contoso.com
SUBJECT: Confirm your email
CONTENTS: Please confirm your account by visiting the following URL:

https://localhost:7192/Identity/Account/ConfirmEmail?<query string removed>
```
使用 Ctrl+“单击”导航到 URL。随即显示“确认”屏幕。

注意

如果使用 GitHub Codespaces，则可能需要将 -7192 添加到转发 URL 的第一部分。例如，scaling-potato-5gr4j4-7192.preview.app.github.dev。
选择“登录”，然后使用新用户登录。应用标头现在包含“Hello, [姓] [名]!”。
在 VS Code 中的 SQL Server 窗格中，右键单击“RazorPagesPizza”数据库，然后选择“新建查询”。在显示的选项卡中，输入以下查询，然后按 Ctrl+Shift+E 来运行它。
```
SELECT UserName, Email, FirstName, LastName
FROM dbo.AspNetUsers
```
随即显示包含类似以下结果的选项卡：

UserName 电子邮件 FirstName LastName

kai.klein@contoso.com kai.klein@contoso.com

jana.heinrich@contoso.com jana.heinrich@contoso.com Jana Heinrich

将 FirstName 和 LastName 添加到架构之前注册的第一个用户。因此，关联的 AspNetUsers 表记录在这些列中没有数据。

UserName	电子邮件	FirstName	LastName
kai.klein@contoso.com	kai.klein@contoso.com
jana.heinrich@contoso.com	jana.heinrich@contoso.com	Jana	Heinrich

测试对配置文件管理表单的更改

你还应测试对配置文件管理表单所做的更改。

在 Web 应用中，使用创建的第一个用户登录。
选择“Hello, !”链接，导航到配置文件管理表单。

备注

该链接无法正确显示，因为此用户的 AspNetUsers 表的行不包含 FirstName 和 LastName 的值。
对于“名”和“姓”，请输入有效值。选择“保存”。

应用标头更新为“Hello, [姓] [名]!”。
若要停止应用，在 VS Code 的终端窗格中，按 Ctrl+C。

总结

在本单元中，你自定义了标识来存储自定义用户信息。还自定义了确认电子邮件。在下一单元中，你将了解如何在标识中实现多重身份验证。

练习 - 自定义标识

自定义用户帐户数据

扩展 `IdentityUser`

更新数据库

自定义用户注册表单

自定义站点标头

自定义配置文件管理表单

配置确认电子邮件发送方

测试对注册表单的更改

测试对配置文件管理表单的更改

总结

反馈

练习 - 自定义标识

自定义用户帐户数据

扩展 IdentityUser

更新数据库

自定义用户注册表单

自定义站点标头

自定义配置文件管理表单

配置确认电子邮件发送方

测试对注册表单的更改

测试对配置文件管理表单的更改

总结

反馈

扩展 `IdentityUser`