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

实现验证码功能

news 2026/2/9 8:24:49

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

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

【算法训练营Day07】字符串part1

文章目录反转字符串反转字符串II替换数字反转字符串题目链接：344. 反转字符串双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。效果对比默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...

编程新知 2025/10/16 16:03:09

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径卸载应用 adb uninstall 应用包名查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...

编程新知 2026/2/7 21:37:35