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

2021-01-12

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

說明

一般要實作 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