ReturnUrl實作
我們要實作returnUrl,我們需要在注冊(Register)方法中接收傳進的returnUrl并給它預設值null,然後将它儲存在ViewData裡面

然後我們定義一個内部方法來判斷跳轉returnUrl
//内部跳轉
private IActionResult RedirectToLocal(string returnUrl)
{
if (Url.IsLocalUrl(returnUrl))
{//如果是本地
return Redirect(returnUrl);
}
return RedirectToAction(nameof(HomeController.Index),"Home");
}
然後我們需要在Register的HttpPost方法中,在注冊成功後進行跳轉到returnUrl
接下來我們修改Register.cshtml
完整Register.cshtml代碼:
@{
ViewData["Title"] = "Register";
}
@using MvcCookieAuthSample.ViewModels;
@model RegisterViewModel;
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<div class="row">
<div class="col-md-4">
@* 這裡将asp-route-returnUrl="@ViewData["returnUrl"],就可以在進行register的post請求的時候接收到returnUrl *@
<form method="post" asp-route-returnUrl="@ViewData["returnUrl"]">
<h4>Create a new account.</h4>
<hr />
<div class="form-group">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
</div>
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<label asp-for="ConfirmedPassword"></label>
<input asp-for="ConfirmedPassword" class="form-control" />
<button type="submit" class="btn btn-default">Register</button>
</form>
</div>
</div>
接下來登陸的地方我們也需要修改一下,我們需要在登陸(Login)方法中接收傳進的returnUrl并給它預設值null,然後将它儲存在ViewData裡面
然後我們需要在Login的HttpPost方法中,在注冊成功後進行跳轉到returnUrl
接下來我們修改Login.cshtml
完整Login.cshtml代碼:
ViewData["Title"] = "Login";
<section>
@* 這裡将asp-route-returnUrl="@ViewData["returnUrl"],就可以在進行Login的post請求的時候接收到returnUrl *@
<form method="post" asp-controller="Account" asp-action="Login" asp-route-returnUrl="@ViewData["returnUrl"]">
<h4>Use a local account to log in.</h4>
<hr />
<div class="form-group">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
</div>
<label asp-for="Password"></label>
<input asp-for="Password" type="password" class="form-control" />
<button type="submit" class="btn btn-default">Log in</button>
</form>
</section>
然後我們就可以實作登陸/注冊後Url進行跳轉到之前的頁面。
Model後端驗證
我們可以通過給ViewModel的屬性加頭标簽來進行Model後端驗證,這裡拿RegisterViewModel舉例
我們可以給限定屬性是必須的
public class RegisterViewModel
{
[Required]//必須的
[DataType(DataType.EmailAddress)]//内容檢查是否為郵箱
public string Email { get; set; }
[Required]//必須的
[DataType(DataType.Password)]//内容檢查是否為密碼
public string Password { get; set; }
[Required]//必須的
[DataType(DataType.Password)]//内容檢查是否為密碼
public string ConfirmedPassword { get; set; }
}
這樣之前我們在在登陸的時候也用的是RegisterViewModel就不行了,我們要在ViewModel檔案夾下建立一個LoginViewModel供登陸使用
public class LoginViewModel
{
[Required]//必須的
[DataType(DataType.EmailAddress)]//内容檢查是否為郵箱
public string Email { get; set; }
[Required]//必須的
[DataType(DataType.Password)]//内容檢查是否為密碼
public string Password { get; set; }
}
接下來我們需要修改Login.cshtml,在表單中添加<span asp-validation-for="XXXXXX" class="text-danger"></span>用來給表單元素顯示錯誤資訊
然後我們修改Login的HttpPost方法,用ModelState.IsValid進行驗證
這時候我們什麼資料都不填,服務端傳回驗證後顯示:
同理Register方法也是這樣進行修改
我們現在的密碼驗證很弱,是因為之前在Startup.cs中我們修改了密碼的部分規則,現在将規則改為如下
我們可以将所有的錯誤提示在同一個地方,需要用asp-validation-summary,我們以Register.cshtml為例
什麼都不填運作效果
由于我們的驗證比較嚴格,會出現注冊是失敗的情況,是以我們要修改背景的注冊方法,在注冊失敗的時候講錯誤傳回給前台頁面,我們可以寫一個通用的添加驗證錯誤方法
//添加驗證錯誤
private void AddError(IdentityResult result)
{
//周遊所有的驗證錯誤
foreach (var error in result.Errors)
{
//傳回error到model
ModelState.AddModelError(string.Empty, error.Description);
}
}
然後在注冊驗證失敗的時候調用此方法将錯誤原因顯示出來
運作效果
Model前端驗證
用戶端的驗證主要要加入jquery的元件
- jquery.validate.js
- jquery.validate.unobtrusive.js
以Login.cshtml為例,我們隻需要加入以下代碼就行了
@section Scripts
{
@await Html.PartialAsync("_ValidationScriptsPartial")
}
因為_Layout.cshtml中已經預設為我們加載了js