實作ASP.NET MVC CAPTCHA驗證碼機制

CAPTCHA

依wiki的說明：「全自動區分電腦和人類的圖靈測試（英語：Completely Automated Public Turing test to tell Computers and Humans Apart，簡稱CAPTCHA），俗稱驗證碼。」

產生驗證碼

首先我們必須先撰寫一支產生驗證碼圖片的程式，程式碼主要是是透過Bitmap物件來幫我們產生圖檔（想成一張空白畫布），然後在畫布上畫上我們要的內容（可以是任意內容）。

public void VerificationCode()
{
    // 是否產生驗證碼
    bool isCreate = true;

    // Session["CreateTime"]: 建立驗證碼的時間
    if (Session["CreateTime"] == null)
    {
        Session["CreateTime"] = DateTime.Now;
    }
    else
    {
        DateTime startTime = Convert.ToDateTime(Session["CreateTime"]);
        DateTime endTime = Convert.ToDateTime(DateTime.Now);
        TimeSpan ts = endTime - startTime;


        // 重新產生驗證碼的間隔
        if (ts.Minutes > 15)
        {
            isCreate = true;
            Session["CreateTime"] = DateTime.Now;
        }
        else
        {
            isCreate = false;
        }
    }

    Response.ContentType = "image/gif";
    //建立 Bitmap 物件和繪製
    Bitmap basemap = new Bitmap(200, 60);
    Graphics graph = Graphics.FromImage(basemap);
    graph.FillRectangle(new SolidBrush(Color.White), 0, 0, 200, 60);
    Font font = new Font(FontFamily.GenericSerif, 48, FontStyle.Bold, GraphicsUnit.Pixel);
    Random random = new Random();
    // 英數
    //string letters = "ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz0123456789";
    // 天干地支生肖
    string letters = "甲乙丙丁戊己庚辛壬癸子丑寅卯辰巳午未申酉戍亥鼠牛虎免龍蛇馬羊猴雞狗豬";
    string letter;
    StringBuilder sb = new StringBuilder();


    if (isCreate)
    {
        // 加入隨機二個字
        // 英文4 ~ 5字，中文2 ~ 3字
        for (int word = 0; word < 2; word++)
        {
            letter = letters.Substring(random.Next(0, letters.Length - 1), 1);
            sb.Append(letter);


            // 繪製字串 
            graph.DrawString(letter, font, new SolidBrush(Color.Black), word * 38, random.Next(0, 15));
        }
    }
    else
    {
        // 使用先前的驗證碼來產生
        string currentCode = Session["ValidateCode"].ToString();
        sb.Append(currentCode);

        foreach (char item in currentCode)
        {
            letter = item.ToString();
            // 繪製字串
            graph.DrawString(letter, font, new SolidBrush(Color.Black), currentCode.IndexOf(item) * 38, random.Next(0, 15));
        }
    }


    // 混亂背景
    Pen linePen = new Pen(new SolidBrush(Color.Black), 2);
    for (int x = 0; x < 10; x++)
    {
        graph.DrawLine(linePen, new Point(random.Next(0, 199), random.Next(0, 59)), new Point(random.Next(0, 199), random.Next(0, 59)));
    }

    // 儲存圖片並輸出至stream      
    basemap.Save(Response.OutputStream, ImageFormat.Gif);
    // 將產生字串儲存至 Sesssion
    Session["ValidateCode"] = sb.ToString();
    Response.End();
}
   

內容想呈現中文或英文選擇letters變數的內容即可。

表單使用CAPTCHA

要在MVC的View Page去取得我們的CAPTCHA驗證碼圖也很簡單，只需要在<img src="圖片路徑">即可。

Controller

public ActionResult Index()
{
    Session["User"] = "Bruce";

    return View();
}
   

在Index裡為何要寫那行Session呢？

<h2>Captcha測試</h2>

@using (Html.BeginForm("ValidateCode", "Captcha"))
{
    <fieldset>
    <legend>驗證碼</legend>
        <img src="@Url.Action("VerificationCode")" alt="驗證碼" />
        @Html.TextBox("InputCode", null, new { placeholder="請輸入驗證碼" })
        <input type="submit" value="確定" />
    </fieldset>
}

<hr />

<h2>Captcha測試(AJAX)</h2>

<div>
    驗證結果：<span id="status"></span>
</div>

@using (Ajax.BeginForm("ValidateCode", "Captcha", new AjaxOptions() { UpdateTargetId = "status" }))
{
    <fieldset>
        <legend>驗證碼</legend>
        <img src="@Url.Action("VerificationCode")" alt="驗證碼" />
        @Html.TextBox("InputCode", null, new { placeholder = "請輸入驗證碼" })
        <input type="submit" value="確定" />
    </fieldset>
}

@section scripts
{
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
   

驗證碼的檢查也很合適使用AJAX來進行確認，各位可以測試一般表單和AJAX效果的表單。

驗證輸入

public ActionResult ValidateCode(string InputCode)
{
 if (InputCode == null)
     return Content("輸入空白");

    if (InputCode.Trim().ToLower().Equals(Session["ValidateCode"].ToString().ToLower()))
    {
        return Content("成功");
    }
    else 
    {
        return Content("失敗");
    }
}
   

如果是選擇使用中文內容，可不需要加上.ToLower()方法。

以上只是個簡單範例研究，中英混合也許是個不錯的方法，但要考慮好你的用戶群是否有人看不懂中文。

另外，自己造輪子…還是不要的好，NuGet有滿滿的Captcha套件可以使用。

參考程式碼：Image Verification Code for Logging