ASP.NET MVC 實作登入驗證碼 (CAPTCHA)


  1. 說明
    1. 安裝 CaptchaMvc
    2. 加入 Feedback Model Class
    3. 實作 Controller 檢查機制
    4. View 的設定
  2. 參考資料

筆記如何於 ASP.NET MVC 使用 Nuget 下載第三方套件的方式,實作登入驗證碼。

logo

說明

一般要實作 CAPTCHA ,除了使用第三方套件外,就是利用 Session 的方式,將驗證碼由後端產生並存入其中。再藉由 System.Drawing 等第函式庫,來將驗證碼繪製後呈現在前端上。當驗證碼被 Input 且 Commit 後,後端再進行 Session 與 Input 的比較是否一致。

安裝 CaptchaMvc

Nuget Install CaptchaMvc.Mvc5

加入 Feedback Model Class

namespace MathCaptcha.Models
{
    public class Feedback
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Comment { get; set; }

    }
}

實作 Controller 檢查機制

using CaptchaMvc.HtmlHelpers;  

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl, string empty)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }


    if (!this.IsCaptchaValid("Captcha is not valid"))
    {
        return RedirectToAction("Captcha", "Error");
    }

    // Below From MVC Login SourceCode
    var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
    switch (result)
    {
        case SignInStatus.Success:
            return RedirectToLocal(returnUrl);
        case SignInStatus.LockedOut:
            return View("Lockout");
        case SignInStatus.RequiresVerification:
            return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });
        case SignInStatus.Failure:
        default:
            ModelState.AddModelError("", "登入嘗試失試。");
            return View(model);
    }
}

View 的設定

<div class="form-group">
    <div class="col-md-2"></div>
    <div class="col-md-10">
        @Html.Captcha(6)
    </div>
</div>

參考資料

How to Implement CAPTCHA in ASP.Net MVC