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时有效, 默认30option.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() {//刷新GUIDguid = 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';//刷新GUIDguid = 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>