ASP.NET 驗證碼實作完整教學（二）

前端頁面引用驗證碼圖片

假設驗證碼生成頁面為 CheckCode.aspx，在登入頁面使用 <img> 標籤引用：

<img src="CheckCode.aspx" alt="驗證碼" />

登入按鈕驗證邏輯

private void btnLogin_Click(object sender, ImageClickEventArgs e)
{
    // 1. 檢查 Cookie 是否啟用
    if (Request.Cookies["CheckCode"] == null)
    {
        lblMessage.Text = "您的瀏覽器已禁用 Cookie，請啟用後再使用本系統。";
        lblMessage.Visible = true;
        return;
    }

    // 2. 比對驗證碼（不分大小寫）
    string storedCode = Request.Cookies["CheckCode"].Value;
    string inputCode = txtCheckCode.Text;

    if (string.Compare(storedCode, inputCode, true) != 0)
    {
        lblMessage.Text = "驗證碼錯誤，請輸入正確的驗證碼。";
        lblMessage.Visible = true;
        return;
    }

    // 3. 驗證通過，執行登入邏輯
    // ... 其他登入代碼 ...
}

關鍵實作細節

• CheckCode.aspx 需將生成的驗證碼寫入 Response.Cookies["CheckCode"].Value
• 建議設定 Cookie HttpOnly = true 增加安全性
• 驗證碼圖片建議加入干擾線、噪點、字元扭曲防止 OCR 識別
• 可加入 Response.Cache.SetNoStore() 防止瀏覽器快取驗證碼圖片

完整流程圖

用戶請求登入頁 → 瀏覽器載入 <img src="CheckCode.aspx">
                    ↓
CheckCode.aspx 生成隨機碼 → 存入 Cookie → 輸出圖片二進位流
                    ↓
用戶輸入驗證碼 → 點擊登入 → 後端比對 Cookie 值與輸入值
                    ↓
比對成功 → 登入邏輯 / 比對失敗 → 顯示錯誤 → 重新整理驗證碼