康廷數位購物網 10 -開始導入ASP.NET Identity
|ASP.NET MVC 精實戰紀

完成所需的安裝作業,現在要開始將將ASP.NET Identity機制導入目前的專案中,我們將直接移植Visual Studio 內建的驗證功能檔案,如下指定以「個別使用者帳戶」驗證建立一個全新的 MVC專案:



我們需要其中根目錄的Startup.cs,還有App_Start/Startup.Auth.cs與App_Start/IdentityConfig.cs兩個檔案,複製這三個檔案並且分別配置於專案中的對應位置。這三個檔案幫我們完成必要的類別物件註冊,同時指定驗證功能的導向網頁,並在需要時動態建立包含UserManager相關的ASP.NET Identity 物件。

在Models/Identity資料夾裏面,還有兩個我們需要的ASP.NET Identity 專屬資料模型檔案- AccountViewModels.cs與IdentityModels.cs,同樣的在對應的路徑建立Models/Identity資料夾,並且將檔案複製儲存進去。
接下來將 Controllers/AccountController.cs 這個檔案複製到Controllers資料夾,其中包含驗證流程所需的程式碼,這一部份的程式碼在「P08」已作過討論,完成這一個步驟,現在我們要建立運用ASP.NET Identity機制的功能網頁了。

首先是註冊功能,在Controllers/AccountController.cs檔案中,找到 Register() 動作方法,建立其對應的View檔案 - Views/Account/Register.cshtml。

[AllowAnonymous]
public ActionResult Register()
{
return View();
}

接下來於網頁中建立以下的內容:

@model Kangting.Models.RegisterViewModel
@{
    ViewBag.Title = "註冊";
}
<div>
    <div id="form_title_label"><label><b>建立新帳戶</b></label></div>
    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "form-register" }))
    {
        @Html.AntiForgeryToken()
        <div>
            @Html.LabelFor(x => x.UserName, new { @class = "form_label" })
            <div>
                @Html.TextBoxFor(x => x.UserName, new { @class = "form_control" })
            </div>
        </div>
        <div>
            @Html.LabelFor(x => x.Email, new { @class = "form_label" })
            <div>
                @Html.TextBoxFor(x => x.Email, new { @class = "form_control" })
            </div>
        </div>
        <div>
            @Html.LabelFor(x => x.Password, new { @class = "form_label" })
            <div>
                @Html.PasswordFor(x => x.Password, new { @class = "form_control" })
            </div>
        </div>
        <div>
            @Html.LabelFor(x => x.ConfirmPassword, new { @class = "form_label" })
            <div>
                @Html.PasswordFor(x => x.ConfirmPassword,
new { @class = "form_control" })
            </div>
        </div>
        <input type="submit" value="註冊" id="register-button" />
    }
    <div class="form_error_message">
        @Html.ValidationSummary()
    </div>
</div>

請特別注意一開始的宣告程式碼:

@model Kangting.Models.RegisterViewModel

RegisterViewModel類別負責對應資料庫中所儲存的會員資料內容,定義於Models/Identit/AccountViewModels.cs,內容如下:

    public class RegisterViewModel
    {
        [Required]
        [Display(Name = "帳號")]
        public string UserName { get; set; }

        [Required]
        [EmailAddress]
        [Display(Name = "電子郵件")]
        public string Email { get; set; }

        [Required]
        [StringLength(100, ErrorMessage =
"{0} 的長度至少必須為 {2} 個字元。", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "密碼")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "確認密碼")]
        [Compare("Password", ErrorMessage = "密碼和確認密碼不相符。")]
        public string ConfirmPassword { get; set; }
    }

網頁中的表單建立此模型的對應內容,並取得使用者的註冊資料,當使用者按下傳送按鈕之後,回傳資料內容,並且呼叫控制器AccountController中的Register方法:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegisterViewModel model)
{
    if (ModelState.IsValid)
    {
        var user = new ApplicationUser() {
UserName = model.UserName, Email = model.Email };
        IdentityResult result = await
UserManager.CreateAsync(user, model.Password);
        if (result.Succeeded)
        {
            await SignInAsync(user, isPersistent: false);
            return RedirectToAction("Index", "Home");
        }
        else
        {
            AddErrors(result);
        }
    }
    // 如果執行到這裡,發生某項失敗,則重新顯示表單
    return View(model);
}

這個方法完成註冊程序,並且將使用者重新導向主頁。最後完成的畫面如下:


於其中輸入註冊所需的資訊即可完成註冊程序。

沒有留言: