netcore 生成验证码的过程详解

Install-Package Lazy.Captcha.Core

builder.Services.AddCaptcha();

// 注册服务的时候增加配置
services.AddCaptcha(Configuration, option =>
{
    option.CaptchaType = CaptchaType.WORD; // 验证码类型
    option.CodeLength = 6; // 验证码长度, 要放在CaptchaType设置后.  当类型为算术表达式时，长度代表操作的个数
    option.ExpirySeconds = 30; // 验证码过期时间
    option.IgnoreCase = true; // 比较时是否忽略大小写
    option.StoreageKeyPrefix = ""; // 存储键前缀
    option.ImageOption.Animation = true; // 是否启用动画
    option.ImageOption.FrameDelay = 30; // 每帧延迟,Animation=true时有效, 默认30
    option.ImageOption.Width = 150; // 验证码宽度
    option.ImageOption.Height = 50; // 验证码高度
    option.ImageOption.BackgroundColor = SkiaSharp.SKColors.White; // 验证码背景色
    option.ImageOption.BubbleCount = 2; // 气泡数量
    option.ImageOption.BubbleMinRadius = 5; // 气泡最小半径
    option.ImageOption.BubbleMaxRadius = 15; // 气泡最大半径
    option.ImageOption.BubbleThickness = 1; // 气泡边沿厚度
    option.ImageOption.InterferenceLineCount = 2; // 干扰线数量
    option.ImageOption.FontSize = 36; // 字体大小
    option.ImageOption.FontFamily = DefaultFontFamilys.Instance.Actionj; // 字体
    /* 
        * 中文使用kaiti，其他字符可根据喜好设置（可能部分转字符会出现绘制不出的情况）。
        * 当验证码类型为“ARITHMETIC”时，不要使用“Ransom”字体。（运算符和等号绘制不出来）
        */
    option.ImageOption.TextBold = true;// 粗体，该配置2.0.3新增
});

    /// <summary>
    /// 生成验证码
    /// </summary>
    /// <param name="id"></param>
    /// <returns></returns>
    [HttpGet]
    public IActionResult Captcha(string id)
    {
        var info = _captcha.Generate(id);
        // 有多处验证码且过期时间不一样，可传第二个参数覆盖默认配置。
        //var info = _captcha.Generate(id,120);
        var stream = new MemoryStream(info.Bytes);
        return File(stream, "image/gif");
    }
    /// <summary>
    /// 验证验证码是否输入正确
    /// </summary>
    [HttpGet]
    public bool Validate(string id, string code)
    {
        return _captcha.Validate(id, code);
    }

<div class="text-center">
    <img id="captchaImage" src="" alt="Captcha Image" />
    <input type="text" id="captchaInput" placeholder="Enter the captcha code" />
    <button id="validateButton">Validate</button>
    <div id="resultMessage"></div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var guid = generateUUIDv4();
        // 加载验证码图片
        loadCaptcha();
        // 监听验证按钮点击事件
        document.getElementById('validateButton').addEventListener('click', validateCaptcha);
        // 点击图片刷新验证码
        document.getElementById('captchaImage').addEventListener('click', captchaImageClick);
        async function captchaImageClick() {
            //刷新GUID
            guid = generateUUIDv4();
            // 重新加载验证码
            loadCaptcha();
        } 
        async function loadCaptcha() {
            try {
                const response = await fetch('/home/Captcha?id=' + guid);
                const blob = await response.blob();
                const imageUrl = URL.createObjectURL(blob);
                document.getElementById('captchaImage').src = imageUrl;
            } catch (error) {
                console.error('Failed to load captcha:', error);
            }
        } 
        async function validateCaptcha() {
            const input = document.getElementById('captchaInput').value;
            const response = await fetch('/home/Validate?id=' + guid + "&code=" + input);
            const data = await response.json();
            const messageElement = document.getElementById('resultMessage');
            if (data) {
                messageElement.textContent = 'Captcha is correct!';
                messageElement.style.color = 'green';
            } else {
                messageElement.textContent = 'Incorrect captcha. Please try again.';
                messageElement.style.color = 'red';
                //刷新GUID
                guid = generateUUIDv4();
                // 重新加载验证码
                loadCaptcha();
            }
        } 
        function generateUUIDv4() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0,
                    v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    }); 
</script>