ASP.NET MVC验证码演示(Ver2)：安全与体验的双重升级

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using SixLabors.Fonts;
using System.IO;
using System.Linq;
 
public class CaptchaGenerator
{
    private readonly Random _random = new Random();
    // 随机字体库（确保系统已安装或嵌入资源）
    private readonly string[] _fontFamilies = { "Arial", "Verdana", "Courier New", "Segoe UI" };
    // 随机颜色库（避免与背景色冲突）
    private readonly Color[] _textColors = { Color.DarkBlue, Color.DarkRed, Color.DarkGreen };
 
    /// <summary>
    /// 生成验证码（文本+图像字节流）
    /// </summary>
    /// <param name="width">图像宽度</param>
    /// <param name="height">图像高度</param>
    /// <param name="length">验证码长度</param>
    /// <returns>验证码文本 + PNG字节流</returns>
    public (string Text, byte[] ImageBytes) Generate(int width = 200, int height = 50, int length = 6)
    {
        // 1. 生成随机文本（字母+数字）
        string captchaText = GenerateRandomText(length);
 
        // 2. 创建图像画布（浅灰色背景）
        using var image = new Image<Rgba32>(width, height);
        image.Mutate(ctx => ctx.Fill(Color.LightGray));
 
        // 3. 绘制随机文本（带旋转/颜色/字体）
        var font = GetRandomFont(24);
        var textOptions = new TextOptions(font)
        {
            Origin = new PointF(10, 10),
            Color = GetRandomTextColor(),
            // 随机旋转（-15°到15°）
            Rotation = _random.Next(-15, 16)
        };
        image.Mutate(ctx => ctx.DrawText(textOptions, captchaText));
 
        // 4. 添加噪点干扰（100个随机点+5条随机线）
        AddNoise(image, width, height);
 
        // 5. 保存为PNG字节流
        using var ms = new MemoryStream();
        image.SaveAsPng(ms);
        return (captchaText, ms.ToArray());
    }
 
    #region 辅助方法
    /// <summary>
    /// 生成随机文本（字母+数字）
    /// </summary>
    private string GenerateRandomText(int length)
    {
        const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        return new string(Enumerable.Repeat(chars, length)
            .Select(s => s[_random.Next(s.Length)]).ToArray());
    }
 
    /// <summary>
    /// 获取随机字体
    /// </summary>
    private Font GetRandomFont(float size)
    {
        string familyName = _fontFamilies[_random.Next(_fontFamilies.Length)];
        var fontCollection = new FontCollection();
        // 加载系统字体（或嵌入自定义字体文件）
        var fontFamily = fontCollection.Install(Path.Combine(
            Environment.GetFolderPath(Environment.SpecialFolder.Fonts), 
            $"{familyName}.ttf"
        ));
        return new Font(fontFamily, size, FontStyle.Regular);
    }
 
    /// <summary>
    /// 获取随机文本颜色
    /// </summary>
    private Color GetRandomTextColor() => _textColors[_random.Next(_textColors.Length)];
 
    /// <summary>
    /// 添加噪点（点+线）
    /// </summary>
    private void AddNoise(Image<Rgba32> image, int width, int height)
    {
        // 随机点（100个）
        for (int i = 0; i < 100; i++)
        {
            int x = _random.Next(width);
            int y = _random.Next(height);
            image[x, y] = Color.Black;
        }
 
        // 随机线（5条）
        for (int i = 0; i < 5; i++)
        {
            var start = new PointF(_random.Next(width), _random.Next(height));
            var end = new PointF(_random.Next(width), _random.Next(height));
            image.Mutate(ctx => ctx.DrawLine(Color.Gray, 1, start, end));
        }
    }
    #endregion
}

// 生成验证码时存储
Session["CaptchaText"] = captchaText;
 
// 验证时读取
var storedCaptcha = Session["CaptchaText"] as string;

using System.Web.Mvc;
 
public class CaptchaController : Controller
{
    private readonly CaptchaGenerator _captchaGenerator;
    private readonly IDistributedCache _distributedCache; // 分布式缓存（可选）
 
    // 构造函数注入（依赖注入容器配置）
    public CaptchaController(CaptchaGenerator captchaGenerator, IDistributedCache distributedCache)
    {
        _captchaGenerator = captchaGenerator;
        _distributedCache = distributedCache;
    }
 
    [AllowAnonymous] // 允许未登录用户访问
    public ActionResult Generate()
    {
        var (captchaText, imageBytes) = _captchaGenerator.Generate();
        
        // 存储验证码（根据部署环境选择Session或Redis）
        #if DEBUG
        Session["CaptchaText"] = captchaText; // 单机用Session
        #else
        string cacheKey = $"Captcha:{Session.SessionID}";
        _distributedCache.SetString(cacheKey, captchaText, new DistributedCacheEntryOptions
        {
            AbsoluteExpirationRelativeToNow = TimeSpan.FromMinutes(5)
        });
        #endif
 
        // 返回PNG图像
        return File(imageBytes, "image/png");
    }
}

<form action="@Url.Action("Submit", "Home")" method="post">
    <div class="form-group">
        <label for="captchaInput">验证码</label>
        <div class="captcha-group">
            <!-- 验证码图像 -->
            <img id="captchaImg" src="@Url.Action("Generate", "Captcha")" alt="验证码" class="captcha-img" />
            <!-- 刷新按钮 -->
            <button type="button" id="refreshBtn" class="btn btn-light">↻ 刷新</button>
        </div>
        <!-- 验证码输入框 -->
        <input type="text" id="captchaInput" name="captchaInput" class="form-control" required 
               placeholder="请输入验证码" />
        <!-- 错误提示 -->
        @Html.ValidationMessage("captchaInput", "", new { @class = "text-danger" })
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>
 
<!-- 刷新验证码的JavaScript -->
<script>
document.getElementById('refreshBtn').addEventListener('click', function() {
    var captchaImg = document.getElementById('captchaImg');
    // 添加随机查询参数 bust 缓存
    captchaImg.src = '@Url.Action("Generate", "Captcha")?t=' + new Date().getTime();
});
</script>
 
<!-- 样式优化 -->
<style>
.captcha-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.captcha-img {
    width: 200px;
    height: 50px;
    cursor: pointer;
}
/* 移动端适配 */
@media (max-width: 576px) {
    .captcha-img {
        width: 150px;
        height: 40px;
    }
}
</style>

using System.Web.Mvc;
using System;
 
public class HomeController : Controller
{
    private readonly IDistributedCache _distributedCache;
 
    public HomeController(IDistributedCache distributedCache)
    {
        _distributedCache = distributedCache;
    }
 
    [HttpPost]
    public ActionResult Submit(string captchaInput)
    {
        // 1. 获取存储的验证码
        string storedCaptcha = null;
        #if DEBUG
        storedCaptcha = Session["CaptchaText"] as string;
        #else
        string cacheKey = $"Captcha:{Session.SessionID}";
        storedCaptcha = _distributedCache.GetString(cacheKey);
        #endif
 
        // 2. 验证逻辑
        if (string.IsNullOrEmpty(storedCaptcha))
        {
            ModelState.AddModelError("captchaInput", "验证码已过期，请刷新重试。");
            return View();
        }
 
        // 3. 大小写不敏感验证（提升用户体验）
        if (!string.Equals(captchaInput, storedCaptcha, StringComparison.OrdinalIgnoreCase))
        {
            ModelState.AddModelError("captchaInput", "验证码错误，请重新输入。");
            InvalidateCaptcha(); // 验证失败后立即失效
            return View();
        }
 
        // 4. 验证通过：处理业务逻辑
        InvalidateCaptcha(); // 验证通过后立即失效
        TempData["Message"] = "提交成功！";
        return RedirectToAction("Index");
    }
 
    /// <summary>
    /// 使验证码失效（防止重复使用）
    /// </summary>
    private void InvalidateCaptcha()
    {
        #if DEBUG
        Session["CaptchaText"] = null;
        #else
        string cacheKey = $"Captcha:{Session.SessionID}";
        _distributedCache.Remove(cacheKey);
        #endif
    }
}

@media (max-width: 576px) {
    .captcha-img {
        width: 150px;
        height: 40px;
    }
    .captcha-group {
        flex-direction: column;
        align-items: flex-start;
    }
}