七天学会ASP.NET MVC (4) -- 用户授权认证

在上一期七天学会 ASP.NET MVC 中，小编为大家讲解了 MVC 的数据处理问题。
今天，来为大家讲解 MVC 的用户授权认证部分。
一、如何添加客户端验证？
首先了解，客户端需要验证哪些内容？
1. FirstName 不能为空
2. LastName字符长度不能大于5
3. Salary不能为空，且应该为数字类型
4. FirstName 不能包含@字符
接下来，小编会讲述详细的验证步骤。
1. 创建JavaScript 验证文件
在Script文件下，新建JavaScript文件，命名为“Validations.js”

2. 创建验证函数
在“Validations.js”文件中创建验证函数：
functionIsFirstNameEmpty()
function IsFirstNameEmpty()
{
    if (document.getElementById('TxtFName').value == "")
    {return 'First Name should not be empty';}
    else{return "";}}
    function IsFirstNameInValid()
    {if (document.getElementById('TxtFName').value.indexOf("@") != -1)
    {return 'First Name should not contain @';}
    else {return "";}}functionIsLastNameInValid()  
    {if (document.getElementById('TxtLName').value.length>=5)
    {return 'Last Name should not contain more than 5 character';}
    else {return "";}}
    functionIsSalaryEmpty()  
    {if (document.getElementById('TxtSalary').value=="")
    {return 'Salary should not be empty';}else {return ""; }}
     functionIsSalaryInValid()
    {if (isNaN(document.getElementById('TxtSalary').value))
    {return 'Enter valid salary';}else { return ""; }}
     functionIsValid() {var FirstNameEmptyMessage = IsFirstNameEmpty();
    var FirstNameInValidMessage = IsFirstNameInValid();var        
    LastNameInValidMessage = IsLastNameInValid();
    var SalaryEmptyMessage = IsSalaryEmpty();
    var SalaryInvalidMessage = IsSalaryInValid();
    var FinalErrorMessage = "Errors:";
     if (FirstNameEmptyMessage != "")FinalErrorMessage += "\n" + FirstNameEmptyMessage;if (FirstNameInValidMessage != "")FinalErrorMessage += "\n" + FirstNameInValidMessage;
     if (LastNameInValidMessage != "")FinalErrorMessage += "\n" + LastNameInValidMessage;if (SalaryEmptyMessage != "")FinalErrorMessage += "\n" + SalaryEmptyMessage;
    if (SalaryInvalidMessage != "")FinalErrorMessage += "\n" + SalaryInvalidMessage;
    if (FinalErrorMessage != "Errors:") {alert(FinalErrorMessage);return false; 55:}
     else {return true;}}
3. 在 “CreateEmployee”View 中添加 Validations.js文件引用： <script src="~/Scripts/Validations.js"></script>
4. 在点击 SaveEmployee按钮时，调用验证函数，如下：<input type="submit" name="BtnSubmit" value="Save Employee"/>
5. 运行测试
点击 Add New 链接，跳转到 ”Add New“页面
测试结果1

测试结果2

二、添加授权认证
先来了解ASP.NET是如何进行Form认证的。
终端用户在浏览器的帮助下，发送Form认证请求。
浏览器会发送存储在客户端的所有相关的用户数据。
当服务器端接收到请求时，服务器会检测请求，查看是否存在 “Authentication Cookie”的Cookie。
如果查找到认证Cookie，服务器会识别用户，验证用户是否合法。
如果为找到“Authentication Cookie”，服务器会将用户作为匿名（未认证）用户处理，在这种情况下，如果请求的资源标记着 protected/secured，用户将会重定位到登录页面。
1. 创建 AuthenticationController 和 Login 行为方法
右击controller文件夹，选择添加新Controller，新建并命名为”Authentication“即Controller的全称为”AuthenticationController“。
新建Login action方法：
public class AuthenticationController : Controller
{// GET: Authenticationpublic ActionResult Login(){return View();}}
2. 创建Model在Model 文件夹下新建Model，命名为 UserDetails。
namespace WebApplication1.Models
{public class UserDetails
{public string UserName
{ get; set; }
public string Password { get; set;
}
}
}
3. 创建Login View
在“~/Views/Authentication”文件夹下，新建View命名为Login，并将UserDetails转换为强View类型。
4. 运行测试
输入Login action方法的URL：“http://localhost:8870/Authentication/Login”

5. 实现Form认证
打开 Web.config文件，在System.Web部分，找到Authentication的子标签。如果不存在此标签，就在文件中添加Authentication标签。设置Authentication的Mode为Forms，loginurl设置为”Login”方法的URL.
6. 让Action 方法更安全
在Index action 方法中添加认证属性 [Authorize].
7. 运行测试
输入 EmployeeController 的 Index action的URL：“http://localhost:8870/Employee/Index”对于Index action的请求会自动重链接到 login action。
8. 创建业务层功能
打开 EmployeeBusinessLayer 类，新建 IsValidUser方法：public bool IsValidUser(UserDetails u){if (u.UserName == "Admin" && u.Password == "Admin"){return true;}else{return false;}}
9. 创建 DoLogin action 方法
打开 AuthenticationController 类，新建action 方法命名为 DoLogin。当点击登录时，Dologin action 方法会被调用。Dologin 方法的功能：通过调用业务层功能检测用户是否合法。如果是合法用户，创建认证Cookie。可用于以后的认证请求过程中。如果是非法用户，给当前的ModelState添加新的错误信息，将错误信息显示在View中。[HttpPost]public ActionResult DoLogin(UserDetails u){EmployeeBusinessLayer bal = new EmployeeBusinessLayer();if (bal.IsValidUser(u)){FormsAuthentication.SetAuthCookie(u.UserName, false);return RedirectToAction("Index", "Employee");}else{ModelState.AddModelError("CredentialError", "Invalid Username or Password");return View("Login");}}
10.在View 中显示信息
打开Login View，在 @Html.BeginForm中 添加以下代码@Html.ValidationMessage("CredentialError", new {style="color:red;" })@using (Html.BeginForm("DoLogin", "Authentication", FormMethod.Post)){
11. 运行测试
测试结果1

测试结果2

三、如何实现登录页面验证？
1. 添加 data annotation
打开 UserDetails.cs,添加 Data Annotation：public class UserDetails{[StringLength(7,MinimumLength=2, ErrorMessage = "UserName length should be between 2 and 7")]public string UserName { get; set; }public string Password { get; set; }}
2. 在View 中显示错误信息
修改 Login.cshtml能够提示错误信息。@using (Html.BeginForm("DoLogin", "Authentication", FormMethod.Post)){ @Html.LabelFor(c=>c.UserName)@Html.TextBoxFor(x=>x.UserName)@Html.ValidationMessageFor(x=>x.UserName)......
3. 修改 DoLogin
修改 DoLogin action 方法：[HttpPost]public ActionResult DoLogin(UserDetails u){if (ModelState.IsValid){EmployeeBusinessLayer bal = new EmployeeBusinessLayer();{if (bal.IsValidUser(u)){FormsAuthentication.SetAuthCookie(u.UserName, false);return RedirectToAction("Index", "Employee");}else{ModelState.AddModelError("CredentialError", "Invalid Username or Password");return View("Login");}}
4. 运行

四、如何登录页面实现客户端验证？
1. 下载 jQuery unobtrusive Validation文件
右击项目，选择“Manage Nuget packages”，点击在线查找”jQuery Unobtrusive“，安装”Microsoft jQuery Unobtrusive Valiadtion“
2. 在View 中添加 jQuery Validation
引用在Scripts文件中，添加以下 JavaScript文件jQuery-Someversion.jsjQuery.valiadte.jsjquery.validate.unobtrusive打开 Login.cshtml，在文件顶部包含这三个js文件：
3. 运行

以上就是使用用户授权认证的具体步骤。
后续还会更新 “七天学会 ASP.NET MVC” 的其它篇章，敬请期待。