ASP.NET Core - 用户注册

在本章中,我们将讨论用户注册.我们现在有一个工作数据库,现在是时候开始向应用程序添加一些功能了.我们还配置了应用程序,并且我们有一个可用的数据库模式.现在让我们转到应用程序主页.

用户注册

按F12打开开发人员工具,然后单击编辑链接.以前,当我们单击编辑链接时,MVC框架检测到存在Authorize属性并返回401状态代码,因为用户未登录.

开发者工具

现在您将看到我们从配置文件中获得了屏幕上的消息.

现在让我们转到开发人员工具.

开发者工具网络

  • 您将看到浏览器请求编辑页面,并且MVC框架确定用户无权查看此资源.

  • 因此,在MVC框架内部,生成了401状态代码.

  • 我们现在有了Identity中间件. Identity中间件会查看将要发送给用户的401状态代码,并将其替换为302状态代码,这是一个重定向状态代码.

  • Identity框架知道用户必须先尝试登录才能访问此资源.

  • Identity框架将我们引导至此URL,如我们可以在地址栏中看到 - /帐户/登录.

  • 当您注册这些服务时,这是一个带有Identity框架的可配置端点,位于Startup内部和中间件.您可以设置不同的选项,其中一个选项是更改登录URL.

  • 默认情况下,URL将是/Account/Login .目前,我们没有帐户控制器,因此我们最终要做的是创建帐户控制器并允许用户登录.

  • 但在用户甚至可以登录之前,他们需要在网站上注册并保存他们的用户名和密码.

  • 登录和注册功能可以成为帐户控制器的一部分.

现在让我们继续前进并在Controllers文件夹中添加一个新类,并将其命名为AccountController .我们将从MVC框架库Controller类派生出来.

using Microsoft.AspNet.Mvc; 

using System; 
using System.Collections.Generic; 
using System.ComponentModel.DataAnnotations;
using System.Linq; 
using System.Threading.Tasks;  

namespace FirstAppDemo.Controllers { 
   public class AccountController : Controller {  
   } 
}

  • 我们现在必须设置一个用户可以注册此网站的功能.

  • 它非常类似于编辑表单.

  • 当用户想要注册时,我们将首先显示一个允许他们填写的表单所需信息.然后,他们可以将此表单上传到网站.

  • 然后将此信息保存在数据库中.

现在让我们创建一个动作,当我们转到/account/register时将返回一个视图.

public class AccountController : Controller { 
   [HttpGet] 
   public ViewResult Register() { 
      return View(); 
   } 
}

我们不需要查看任何内容,用户将提供我们需要的所有信息.在为该视图构建ViewModel之前,我们需要确定视图将显示的信息.我们还需要决定我们需要从用户那里收到的信息吗?

让我们通过在AccountController.cs文件中添加一个新类来为这个场景创建一个视图模型,将此命名为RegisterViewModel.

让我们创建一些属性,这些属性将保存用户名,密码以及用户ConfirmPassword,方法是键入两次,并确保两个密码匹配,如下面的程序所示.

public class RegisterViewModel { 
   [Required, MaxLength(256)] 
   public string Username { get; set; }  
   
   [Required, DataType(DataType.Password)] 
   public string Password { get; set; }  
   
   [DataType(DataType.Password), Compare(nameof(Password))] 
   public string ConfirmPassword { get; set; } 
}

在上面的课程中,您可以看到一些可以帮助我们验证此模型的注释.此处需要用户名,如果查看数据库模式,保存用户名的列长度为256个字符.

用户名

  • 我们还将在此处应用MaxLength属性.

  • 将需要密码,当我们为此密码呈现输入时,我们希望输入类型为类型密码,以便字符"不要" t显示在屏幕上.

  • 确认密码也将是数据类型密码,然后还有一个额外的比较属性.我们将ConfirmPassword字段与我们可以指定的其他属性进行比较,即密码字段.

现在让我们创建视图我们需要的.我们需要在视图中添加一个新文件夹并将其命名为Account,因此所有与AccountController相关的视图都将添加到此文件夹中.

帐户控制器

现在,右键单击Account文件夹并选择Add → 新项目.

MVC查看页面

在中间窗格中,选择MVC View页面并将其命名为Register.cshtml,然后单击Add按钮.

从Register.cshtml文件中删除所有现有代码并添加以下代码.

@model RegisterViewModel 
@{ 
   ViewBag.Title = "Register"; 
}  
<h1>Register</h1> 

<form method = "post" asp-controller = "Account" asp-action = "Register"> 
   <div asp-validation-summary = "ValidationSummary.ModelOnly"></div> 
   
   <div> 
      <label asp-for = "Username"></label> 
      <input asp-for = "Username" /> 
      <span asp-validation-for = "Username"></span> 
    </div> 
   
   <div> 
      <label asp-for = "Password"></label> 
      <input asp-for = "Password" /> 
      <span asp-validation-for = "Password"></span> 
   </div> 
   
   <div> 
      <label asp-for = "ConfirmPassword"></label> 
      <input asp-for = "ConfirmPassword" /> 
      <span asp-validation-for = "ConfirmPassword"></span> 
   </div> 
    
   <div> 
      <input type = "submit" value = "Register" /> 
   </div> 

</form>

  • 您现在可以看到我们已将模型指定为我们刚刚拥有的RegisterViewModel已创建.

  • 我们还将使用ViewBag为此页面设置标题,我们希望标题为"注册".

  • 我们还需要创建一个包含Username,Password和ConfirmPassword字段的表单.

  • 我们还包括一个div将显示验证摘要.当我们使用ASP验证摘要时,我们需要指定要在摘要中显示的错误.

  • 我们可以将所有错误显示在摘要区域中或者我们可以说ValidationSummary.ModelOnly并且摘要中的模型验证中出现的唯一错误将是与模型关联的验证错误,而不是该模型的特定属性.

  • 换句话说,如果用户没有填写用户名,但需要用户名,则该特定属性会出现验证错误.

  • 但您也可以生成与特定属性无关的模型错误,它们将出现在此ValidationSummary中.

  • 在< form>内标签我们有ViewModel中所有不同字段的标签和输入.

  • 我们需要一个用户名标签,一个用户名输入以及用户名的验证消息.

  • 我们需要用户输入的其他两个属性是相同的,它们将具有标签和输入以及范围对于密码和标签以及ConfirmPassword的输入和范围.

  • 我们不需要为Password和ConfirmPassword指定输入类型,因为标签助手的 asp 将确保将该输入类型设置为我们的密码.

  • 最后,我们需要按下注册按钮.当用户点击此按钮时,我们会将表单提交给控制器.

在AccountController中,我们还需要实现一个HttpPost Register操作方法.让我们回到AccountController并添加以下Register操作,如下 :

[HttpPost] 
public IActionResult Register (RegisterViewModel model) {  
}

此操作方法将返回IActionResult.这将收到RegisterViewModel.现在,我们需要与Identity框架交互以确保用户有效,告诉Identity框架创建该用户,然后由于他们刚刚创建了帐户,请继续并将其登录.我们将看看在下一章中实施所有这些步骤.