当前位置：首页 > news >正文

实现验证码功能

news 2026/5/13 16:23:44

Kaptcha

文章目录

Kaptcha
- 介绍
- 插件使用介绍
- - 原理
  - 引入依赖
  - 生成验证码
- 验证码小项目
- - 初始化前端代码
  - 约定前后端交互接口
  - - 接口定义

介绍

Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具

https://code.google.com/archive/p/kaptcha

⽹上有很多⼈甚⾄公司基于Google的kaptcha进⾏了⼆次开发. 我们选择⼀个直接适配SpringBoot的开源项⽬

oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter (github.com)

插件使用介绍

基于GitHub项目来做介绍

原理

验证码可以客⼾端⽣成, 也可以服务器⽣成. 对于普通的字符验证码, 后端通常分两部分.

⼀是⽣成验证码内容, 根据验证码内容和⼲扰项等, ⽣成图⽚, 返回给客⼾端

⼆是把验证码内容存储起来, 校验时取出来进⾏对⽐.

kaptcha插件选择把验证码存储在Session⾥.

引入依赖

<dependency><groupId>com.oopsguy.kaptcha</groupId><artifactId>kaptcha-spring-boot-starter</artifactId><version>1.0.0-beta-2</version>
</dependency>

生成验证码

该插件提供了两种⽅式⽣成验证码

通过代码来⽣成(参考⽂档: https://github.com/oopsguy/kaptcha-spring-boot/blob/master/README_zh-CN.md, 不再介绍)
仅通过配置⽂件来⽣成验证码(推荐)

部分详细配置

配置项	配置说明	默认值
border	设置验证码边框的颜色	“255,255,255,255”
textProducerCharLength	设置生成验证码的字符长度	4
textProducerCharSpace	设置生成验证码时字符之间的间距	5
imageWidth	设置验证码图片的宽度	200
imageHeight	设置验证码图片的高度	50
noiseColor	设置噪点的颜色	“255,255,255,255”
fontColor	设置字体颜色	“0,0,0,255”
fontNames	设置字体的名称，可以指定多个字体	Arial, Courier
textProducerImpl	设置生成验证码文本的实现类	默认实现类
backgroundProducerImpl	设置生成验证码背景的实现类	默认实现类
noiseProducerImpl	设置生成验证码噪点的实现类	默认实现类
wordImpl	设置生成验证码字符的实现类	默认实现类
obscurificatorImpl	设置字符模糊处理的实现类	默认实现类
sessionKey	设置存储验证码信息的 Session 键	默认值
sessionDate	设置存储验证码创建时间的 Session 键	默认值
width	设置验证码图片的宽度（同 imageWidth）	200
height	设置验证码图片的高度（同 imageHeight）	50

验证码小项目

初始化前端代码

// success.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证成功页</title>
</head>
<body><h1>验证成功</h1>
</body>
</html>

//index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle;}#verificationCodeImg{vertical-align: middle;}#checkCaptcha{height: 40px;width: 100px;}</style></head><body><h1>输入验证码</h1><div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {alert("验证码校验");});</script></body></html>

约定前后端交互接口

需求分析

后端需要提供两个服务

⽣成验证码, 并返回验证码
校验验证码是否正确: 校验验证码是否正确

接口定义

生成验证码

请求
```
GET/admin/captcha
```
响应：图片
校验验证码是否正确

请求：/admin/check
```
POST /admin/checkcaptcha=xn8d
```
captcha：用户输入的验证码

响应：
```
true
```
根据用户输入的验证码，校验验证码是否正确

完善前端代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>验证码</title><style>#inputCaptcha {height: 30px;vertical-align: middle;}#verificationCodeImg{vertical-align: middle;}#checkCaptcha{height: 40px;width: 100px;}</style></head><body><h1>输入验证码</h1><div id="confirm"><input type="text" name="inputCaptcha" id="inputCaptcha"><img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" /><input type="button" value="提交" id="checkCaptcha"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({type:"get",url:"/admin/check",data:{inputCaptcha:$("#inputCaptcha").val()},success:function (result){if (result){// 页面跳转location.href="success.html"}else {alert("验证码失败，请重试");}}});});</script></body></html>

后端代码

package org.haobin.kaptcha;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpSession;
import java.util.Date;@RestController
@RequestMapping("/admin")
public class KaptchaController {public static final String KAPTCHA_SESSION_KEY = "KAPTCHA_SESSION_KEY";public static final String KAPTCHA_SESSION_DATE = "KAPTCHA_SESSION_DATE";public static final long TIME_OUT = 60 * 1000; // 1min 毫秒/*** 校验验证码是否正确** @param inputCaptcha 用户输入的验证码* @return*/@RequestMapping("/check")public boolean check(String inputCaptcha, HttpSession session) {// 1. 判断输入的验证码是否为空if (!StringUtils.hasLength(inputCaptcha)) {return false;}// 2. 获取生成的验证码// 正确的验证码（生成验证码）// 3. 比对 生成的验证码和输入的验证码是否一致// 4. 确认验证码是否过期String saveCaptcha = (String) session.getAttribute(KAPTCHA_SESSION_KEY);Date saveCaptchaDate = (Date) session.getAttribute(KAPTCHA_SESSION_DATE);// 不区分大小写if (inputCaptcha.equalsIgnoreCase(saveCaptcha)) {if (saveCaptchaDate != null || System.currentTimeMillis() - saveCaptchaDate.getTime() < TIME_OUT) {return true;}}return false;}
}

实现验证码功能

Kaptcha 文章目录 Kaptcha介绍插件使用介绍原理引入依赖生成验证码验证码小项目初始化前端代码约定前后端交互接口接口定义介绍 Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具 https://code.google.com/archive/p/kaptcha ⽹上有很多⼈甚⾄公司基于Google的kaptc…...

编程日记 2024/2/27 8:54:57

PyQt6的开发流程（密码生成小程序为例）

PyQt6的开发流程（密码生成小程序为例） 文章目录 PyQt6的开发流程（密码生成小程序为例）一、流程介绍与概览1. 界面与逻辑分离的开发流程2. PyQt6的开发流程二、打开 designer.exe 创建文件三、用QT设计师绘制界面保存成ui1. QT常用…...

编程日记 2024/2/27 8:49:52

思腾云计算中心 | 5千平米超大空间，基础设施完善，提供裸金属GPU算力租赁业务

2021年，思腾合力全资收购包头市易慧信息科技有限公司，正式开启云计算业务。思腾云计算中心占地2400平米，位于包头市稀土高新区，毗邻多家知名企业，地理位置优越，交通便利，是区内重要的信息化产业…...

编程日记 2024/2/27 8:48:51

【Leetcode每日一题】二分查找 - 在排序数组中查找元素的第一个和最后一个位置（难度⭐⭐）（18）

1. 题目解析 Leetcode链接：34. 在排序数组中查找元素的第一个和最后一个位置这个问题的理解其实相当简单，只需看一下示例，基本就能明白其含义了。核心在于找到给定目标值所在的数组下标区间，设计一个O(logn)的算法。 2. 算法原…...

编程日记 2024/2/27 8:47:50

远程连接 vscode 出错 “远程主机可能不符合 glibc 和 libstdc++ VS Code 服务器的先决条件”

原因： vscode 版本是 1.86，服务器上的 glibc 和 libstdc 版本不满足要求(2.28 和 3.4.25)。解决： 1、下载 1.85.2，解压直接运行 Code.exe。 2、回退 Remote-ssh 到 0.107.1。参考： vscode 1.86版本远程ssh不兼容旧…...

编程日记 2024/2/27 8:45:48

Maven入门：Java项目构建和管理的利器

Maven入门：Java项目构建和管理的利器 Maven 是一个项目管理和综合工具，它基于项目对象模型（POM）概念。Maven 可以管理项目的构建、报告和文档。以下是一篇介绍 Maven 配置和应用的教程文章。 Maven简介 Maven 使用其核心概念 POM…...

编程日记 2024/2/27 8:44:47

《游戏引擎架构》 -- 学习4

资源及文件系统文件系统游戏引擎的文件系统API通常提供以下功能： 搜需路径：是含一串路径的字符串，各路径之间以特殊字符（如冒号或分号）分隔，找文件时就会从这些路径进行搜寻。例如在命令行下执行程序&a…...

编程日记 2024/2/27 8:41:44

Wagtail安装运行并结合内网穿透实现公网访问本地网站界面

文章目录前言1. 安装并运行Wagtail1.1 创建并激活虚拟环境 2. 安装cpolar内网穿透工具3. 实现Wagtail公网访问4. 固定的Wagtail公网地址正文开始前给大家推荐个网站，前些天发现了一个巨牛的人工智能学习网站， 通俗易懂，风趣幽默&#xf…...

编程日记 2024/2/27 8:36:39

10分钟快速开始SkyWalking结合Springboot项目

10分钟快速开始SkyWalking结合Springboot项目实习期间，公司让我去学习一下链路追踪如何集成到Springboot项目中。为此有两个方案： 1.opentelementryjaegerprometheus opentelementry 收集器收集线上的metrics和traces，然后发送给jaeger和p…...

编程日记 2024/2/27 8:34:37

STM32—触摸键

目录 1 、电路构成及原理图 2 、编写实现代码 3、代码讲解 4、烧录到开发板调试、验证代码 5、检验效果此笔记基于朗峰 STM32F103 系列全集成开发板的记录。 1 、电路构成及原理图触摸键简单的了解就是一次电容的充放电过程。从原理图可以看出，触摸键 …...

编程日记 2024/2/27 8:33:36

python中字典（dict）原理及其操作

原理 Python中的字典（Dictionary）是一种基于哈希表（Hash Table）的实现，提供了高效的键值对（Key-Value Pair）存储和访问机制。了解字典的工作原理有助于更好地理解其性能特性以及为什么在某些情…...

编程日记 2024/2/27 8:32:35

.NET Core Web API实现微服务集群部署

.NET Core Web API实现微服务集群部署在.NET Core Web API中实现微服务集群部署通常涉及多个步骤，包括服务拆分、容器化、服务注册与发现、负载均衡等。以下是一个简化的步骤指南，用于在.NET Core中构建和部署微服务集群： 服…...

编程日记 2024/2/27 8:29:31

网络安全与信创产业发展：构建数字时代的护城河

✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。我是Srlua，在这里我会分享我的知识和经验。&#x…...

编程日记 2024/2/27 8:20:21

外包干了3个月，技术倒退1年。。。

先说情况，大专毕业，18年通过校招进入湖南某软件公司，干了接近6年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…...

编程日记 2024/2/27 8:17:18

Unity发布webgl获取浏览器的URL Unity发布webgl之后获取浏览器的url 在unity中创建文件夹Plugins，然后添加添加文件UnityGetBrowserURL.jslib var GetUrlFunc {//获取地址栏的URLStringReturnValueFunction: function () {var returnStr window.top.location.hre…...

编程日记 2024/2/27 8:12:13

StarRocks实战——多维分析场景与落地实践

目录一、OLAP 系统历史背景 1.1 历史背景与痛点 1.2 组件诉求二、StarRocks 的特点和优势 2.1 极致的查询性能 2.2 丰富的导入方式 2.3 StarRocks 的优势特点三、多维分析的运用场景 3.1 实时计算场景 / 家长监控中心 3.2 实时更新模型选择 3.2.1 更新模型UNIQU…...

编程日记 2024/2/27 8:11:12

golang 函数式编程库samber/mo使用： Result

golang 函数式编程库samber/mo使用： Result 如果您不了解samber/mo库， 请先阅读上一篇 Option ， 这篇讲述结构体Result的使用 Result和Option区别 samber/mo有了Option， 为什么还有Result呢? 我们先看看定义： Opt…...

编程日记 2024/2/27 8:10:11

Python 实现 CHO 指标计算(济坚指数）：股票技术分析的利器系列（12）

Python 实现 CHO 指标计算(济坚指数）：股票技术分析的利器系列（12） 介绍算法公式代码rolling函数介绍核心代码计算 CHO 完整代码介绍 CHO（济坚指数）是一种在金融领域中用于衡量市场波动性和风险的指数先…...

编程日记 2024/2/27 8:05:04

MySQL的SQL语句

1.MySQL连接连接命令一般是这样写的 mysql -h$ip -P$port -u$user -p比如:mysql -h127.0.0.1 -P3306 -uroot -p -h 指定连接的主机地址；-P 指定连接端口号；-u 指定用户名 -p指定用户名密码 2.SQL分类 DDL(Data Definition Language) 数据定义语言&…...

编程日记 2024/2/27 8:04:03

ABAP 发送带EXCEL邮件

前言没啥特殊需求，就是有个库龄报表用户想整邮件发送实现用的最简单的XLS文件作为excel附件发送出去观察XLS文件的纯文本格式，每列之间用TAB制表符分隔，每行之间用回车符分隔思路也比较明确，在SAP中实现这种格式&#xf…...

编程日记 2024/2/27 8:02:02

基于LM567的反射式红外检测电路在智能车信标检测中的实战应用与优化

1. LM567红外检测电路基础解析第一次接触LM567芯片是在五年前的智能车竞赛备赛期间，当时为了解决传统红外检测易受环境光干扰的问题，我们团队尝试了各种方案。这款看似普通的8脚芯片，却让我们成功实现了在强光环境下稳定工作的红外检测系统。…...

编程新知 2026/5/13 15:30:53

Illustrator智能脚本终极指南：如何让设计效率提升300%

Illustrator智能脚本终极指南：如何让设计效率提升300% 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 还在为Adobe Illustrator中重复繁琐的操作而烦恼吗？想…...

编程新知 2026/5/13 15:15:57

3个战略理由选择ES-Client作为您的Elasticsearch管理平台

3个战略理由选择ES-Client作为您的Elasticsearch管理平台【免费下载链接】es-client elasticsearch客户端，issue请前往码云：https://gitee.com/qiaoshengda/es-client 项目地址: https://gitcode.com/gh_mirrors/es/es-client 在当今数据驱动的业…...

编程新知 2026/5/13 13:44:50

基于OpenClaw的轻量级AI内容工厂：多智能体协作与自动化创作实践

1. 项目概述：一个轻量级AI内容创作工厂如果你正在寻找一个能快速上手、开箱即用的AI内容创作解决方案，那么aiclublight这个项目可能会让你眼前一亮。它本质上是一个基于OpenClaw框架构建的“AI内容工厂”的轻量版，将复杂的多智能体协作系统&a…...

编程新知 2026/5/13 13:28:22

收藏！小白程序员必看：AI时代如何从执行者变身价值创造者？

本文指出，85%的知识工作者使用AI，但仅16%真正获得突破性价值。这些"前沿专业人士"并非更会使用工具，而是懂得重新定义工作。他们通过保持核心技能敏锐度、判断AI输出质量、构建人机协作系统等方式，创造80%的新价值。文章…...

编程新知 2026/5/13 13:01:02

不止于配置：深入理解AVL Cruise与Matlab Simulink联合仿真的DLL机制

不止于配置：深入理解AVL Cruise与Matlab Simulink联合仿真的DLL机制在汽车工程仿真领域，AVL Cruise与Matlab Simulink的联合仿真已成为动力系统开发的标准工具链。大多数教程停留在环境配置层面，而真正影响仿真效率与可靠性的，往…...

编程新知 2026/5/13 11:26:00

Onyx：基于Next.js 14的全栈MVP模板，集成Supabase与现代化工具链

1. 项目概述：Onyx，一个开箱即用的全栈Next.js 14 MVP模板如果你正在寻找一个能让你在几天内，而不是几周内，就启动一个现代化、功能齐全的Web应用原型的起点，那么Onyx很可能就是你需要的那个“瑞士军刀”。这不是一个简…...

编程新知 2026/5/13 9:06:36

创业团队如何利用Taotoken进行多模型选型与成本控制

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度创业团队如何利用Taotoken进行模型选型与成本控制对于初创团队的技术负责人而言，在有限的预算下既要满足快速迭代的产…...

编程新知 2026/5/13 8:25:42

创业团队如何利用Taotoken的Token Plan有效控制AI开发成本

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度创业团队如何利用Taotoken的Token Plan有效控制AI开发成本对于资源有限的创业团队和独立开发者而言，在产品原型开发和…...

编程新知 2026/5/13 8:12:35

2025年项目管理工具TOP10：Gitee引领技术驱动新浪潮

1.Gitee（码云）：代码与管理的双核引擎作为中国最大的代码托管平台，Gitee在2025年全面升级项目管理模块，成为技术团队的首选工具。其核心优势在于： 开发与协作无缝衔接：代码提交直接关联任务看板…...

编程新知 2026/5/13 7:56:53