netcore 生成验证码

news2024/11/26 3:33:56

安装依赖

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>

代码地址:GitHub - maoyuan6/verificationcode: 验证码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1845723.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ARM32开发--FreeRTOS-事件组

系列文章目录 知不足而奋进 望远山而前行 目录 系列文章目录 文章目录 前言 目标 内容 概念 事件标志位 开发流程 功能介绍 创建事件组 触发事件 等待事件触发 同步 清理事件 案例 总结 前言 在嵌入式系统开发中&#xff0c;任务之间的同步和通信是至关重要的…

性价比高的洗地机推荐,测评员精选四款热门洗地机分享

家庭清洁新升级&#xff0c;家用洗地机可以让家里打扫变得轻松高效。面对众多品牌和型号&#xff0c;朋友们常犯难&#xff1a;到底应该怎么选家用洗地机&#xff1f;别急&#xff0c;我这回的普及知识可不含糊&#xff0c;亲测超十款热门洗地机&#xff0c;从中精挑细选了四款…

从0开始C++(三):构造函数与析构函数详解

目录 构造函数 构造函数的基本使用 构造函数也支持函数重载 构造函数也支持函数参数默认值 构造初始化列表 拷贝构造函数 浅拷贝和深拷贝 析构函数 总结 练习一下ヽ(&#xffe3;▽&#xffe3;)&#xff89; 构造函数 构造函数的基本使用 构造函数是一种特殊的成…

二叉树的这五种遍历方法你们都会了吗?

说在前面 &#x1f388;二叉树大家应该都很熟了吧&#xff0c;那二叉树的这五种遍历方式你们都会了吗&#xff1f; 以这一二叉树为例子&#xff0c;我们来看看不同遍历方式返回的结果都是怎样的。 前序遍历 前序遍历的顺序是&#xff1a;首先访问根节点&#xff0c;然后递归地…

Power BI 连接数据源/获取数据(Excel表、文件夹、数据库、网页等)

一、Power BI 支持的数据源类型 Power BI支持广泛的数据源类型&#xff0c;包括文件、数据库、云服务和其他来源。 文件&#xff1a;Excel、文本/CSV、XML、JSON、文件夹、PDF等。数据库&#xff1a;SQL Server, Oracle, IBM DB2, MySQL, PostgreSQL等。云服务&#xff1a;Azur…

怎么学习PMP才是最正确的?

每个人的学习方式各不相同&#xff0c;不能一概而论说某种学习方式就是错误的。学习方式并没有绝对的对错之分&#xff0c;只能说是否适合自己&#xff0c;是否能够达到预期的学习效果。并不是别人的学习方式就一定适合自己&#xff0c;也不是不适合自己的学习方式就一定是错误…

简单好用的远程软件推荐? 内网端口映射工具快解析

最近有一些小伙伴求推荐一款简单好用的远程软件&#xff0c;经过多方对比试用&#xff0c;还是推荐快解析。通过快解析内网端口映射&#xff0c;可以让主机电脑自带远程桌面连接直接提供跨网访问控制&#xff0c;外网访问端无需再安装客户端软件&#xff01; 1.目标服务器本地…

【QCustomPlot实战系列】QCPGraph堆叠图

将一个QCPGraph叠加到另一个QCPGraph上显示&#xff0c;就得到了折线堆叠图 static QCPScatterStyle GetScatterStyle(const QColor& color) {QPen pen(color, 2);return QCPScatterStyle(QCPScatterStyle::ssCircle,pen,Qt::white, 5); }static QCPGraph* AddGraph(QCus…

ADI Trinamic TMC2300 完美用于相机镜头的马达驱动芯片方案

TMC2300-LA是一款用于高达 1.2A RMS 的两相步进电机的低压驱动芯片&#xff0c;低电压的步进电机驱动器是用于电池供电的、空间和待机功率临界驱动器应用。它的静音驱动技术StealthChop™能够为便携式&#xff0c;家庭和办公应用程序的非窃听运动控制&#xff0c;确保安静&…

树莓派4B学习笔记11:PC端网线SSH连接树莓派_网线连接请求超时问题解决

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 今日学习使用网线连接树莓派&#xff0c;网线可以提供更…

优思学院|质量管理中如何应用5W1H或5W2H方法?

5W1H或者5W2H其实是一种"工作方式"&#xff0c;它不是"思考方法"&#xff0c;这种工作方式是通过回答“什么&#xff08;What&#xff09;&#xff1f;为什么&#xff08;Why&#xff09;&#xff1f;谁&#xff08;Who&#xff09;&#xff1f;何时&#…

Flutter【组件】富文本组件

简介 flutter 富文本组件。 github地址&#xff1a; https://github.com/ThinkerJack/jac_uikit 使用方式 运行 flutter pub add jac_uikit组件文档 使用方式&#xff1a; HighlightedTextWidget.builder(text: "全部文案包含高亮文案测试用",highlights: [Hig…

Rust高性能日志库tklog0.0.8—支持mod设置参数

tklog是rust高性能结构化日志库&#xff0c;支持同步日志&#xff0c;异步日志&#xff0c;支持自定义日志的输出格式&#xff0c;支持按时间&#xff0c;按文件大小分割日志文件&#xff0c;支持日志文件压缩备份&#xff0c;支持官方日志库标准API&#xff0c;支持mod独立参数…

控制台瞬间干净!Vue 删除生产环境烦人的console.log打印,看完这个你就会了!

1.安装插件 需要安装babel-plugin-transform-remove-console插件 yarn add babel-plugin-transform-remove-console //或者 npm install babel-plugin-transform-remove-console2.配置babel.config.js // 所有生产环境&#xff0c;或者也可以配置测试环境 const prodPlugin …

文心一言 VS 讯飞星火 VS chatgpt (285)-- 算法导论21.2 4题

四、请给出图 21-3 所示操作序列的一个运行时间的渐近紧确界&#xff0c;假定使用链表表示和加权合并启发式策略。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 图 21-3 没有直接给出&#xff0c;但通常这种操作序列可能与某种数据结构&#xff08;如并查集或…

计算机网络:网络层 - 虚拟专用网 VPN 网络地址转换 NAT

计算机网络&#xff1a;网络层 - 虚拟专用网 VPN & 网络地址转换 NAT 专用地址与全球地址虚拟专用网 VPN隧道技术 网络地址转换 NAT网络地址与端口号转换 NAPT 专用地址与全球地址 考虑到 IP 地址的紧缺&#xff0c;以及某些主机只需要和本机构内部的其他主机进行通信&…

【经验分享】Ubuntu 24.04 安装搜狗输入法(亲测有效)

【经验分享】Ubuntu 24.04 安装搜狗输入法&#xff08;亲测有效&#xff09; 先用如下Ubuntu22.04的安装方法进行安装 Ubuntu 22.04安装搜狗输入法 发现存在闪屏问题&#xff0c;那解决闪屏问题不就好了&#xff0c;解决方法如下&#xff1a; Ubuntu 23.10 搜狗拼音输入法闪屏…

OceanMind海睿思参与编写的《数据智能白皮书(2024年)》正式发布!

近日&#xff0c;由中国通信标准化协会大数据技术标准推进委员会&#xff08;CCSA TC601&#xff09;牵头和组织&#xff0c;中新赛克海睿思作为TC601-WG16人工智能数据工作组合作伙伴参与编写的《数据智能白皮书&#xff08;2024年&#xff09;》正式发布。 中新赛克的卢云川、…

WebStorm 配置 PlantUML

1. 安装 PlantUML 插件 在 WebStorm 插件市场搜索 PlantUML Integration 并安装&#xff0c;重启 WebStorm 使插件生效。 2. 安装 Graphviz PlantUML 需要 Graphviz 来生成图形。使用 Homebrew 安装 Graphviz&#xff1a; 打开终端&#xff08;Terminal&#xff09;。确保你…

MySQL——索引(概述和结构介绍)

一、索引概述 1、索引(index&#xff09;是帮助 MySQL 高效获取数据的数据结构(是一种有序的数据结构)。 2、在数据之外&#xff0c;数据库系统还维护着满足特定查找算法的数据结构。这些数据结构以某种方式引用&#xff08;指向&#xff09;数据&#xff0c;这样就可以在这些…