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

验证码案例

news 2026/5/13 17:46:38

前言

一、Hutool工具介绍

1.1 Maven

1.2 介绍

1.3 实现类

二、验证码案例

2.1 需求

2.2 约定前后端交互接口

2.2.1 需求分析

2.2.2 接口定义

2.3 后端生成验证码

2.4 前端接收验证码图片

2.5 后端校验验证码

2.6 前端校验验证码

2.7 后端完整代码

前言

验证码实现方式很多，可以前端实现，也可以后端实现，网上也有比较多的插件或者工具包可以使用，咱们选择使用Hutool提供的小工具来实现。

一、Hutool工具介绍

Hutool是一个Java工具包类库，对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装，组成各种Util工具类。Hutool官网：https://hutool.cn/

1.1 Maven

如果你想在项目中使用Hutool中的某个模块，在项目的pom.xml的dependencies中加入以下内容：

<dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId><version>5.8.22</version>
</dependency>

1.2 介绍

验证码功能位于cn.hutool.captcha包中，核心接口为ICaptcha，此接口定义了以下方法：

createCode 创建验证码，实现类需同时生成随机验证码字符串和验证码图片
getCode 获取验证码的文字内容
verify 验证验证码是否正确，建议忽略大小写
write 将验证码图片写出到目标流中

其中write方法只有一个OutputStream，ICaptcha实现类可以根据这个方法封装写出到文件等方法。

AbstractCaptcha为一个ICaptcha抽象实现类，此类实现了验证码文本生成、非大小写敏感的验证、写出到流和文件等方法，通过继承此抽象类只需实现createImage方法定义图形生成规则即可。

1.3 实现类

LineCaptcha线段干扰的验证码

贴栗子：

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import cn.hutool.core.lang.Console;public class LineCaptchaTest {public static void main(String[] args) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);//图形验证码写出，可以写出到文件，也可以写出到流lineCaptcha.write("d:/line.png");//输出codeConsole.log(lineCaptcha.getCode());//验证图形验证码的有效性，返回boolean值lineCaptcha.verify("1234");//重新生成验证码lineCaptcha.createCode();lineCaptcha.write("d:/line.png");//新的验证码Console.log(lineCaptcha.getCode());//验证图形验证码的有效性，返回boolean值lineCaptcha.verify("1234");}
}

控制台截图生成的验证码：

在写入的路径中查看代码生成的验证码截图：

CircleCaptcha 圆圈干扰验证码

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;
import cn.hutool.core.lang.Console;public class CircleCaptchaTest {public static void main(String[] args) {//定义图形验证码的长、宽、验证码字符数、干扰元素个数CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);//CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);//图形验证码写出，可以写出到文件，也可以写出到流captcha.write("d:/circle.png");//输出codeConsole.log(captcha.getCode());//验证图形验证码的有效性，返回boolean值captcha.verify("1234");}
}

控制台截图生成的验证码：

在写入的路径中查看代码生成的验证码截图：

ShearCaptcha 扭曲干扰验证码

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import cn.hutool.core.lang.Console;public class ShearCaptchaTest {public static void main(String[] args) {//定义图形验证码的长、宽、验证码字符数、干扰线宽度ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);//ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);//图形验证码写出，可以写出到文件，也可以写出到流captcha.write("d:/shear.png");//输出codeConsole.log(captcha.getCode());//验证图形验证码的有效性，返回boolean值captcha.verify("1234");}
}

控制台截图生成的验证码：

在写入的路径中查看代码生成的验证码截图：

二、验证码案例

2.1 需求

需求如下：

页面生成验证码
输入验证码，点击提交，验证用户输入验证码是否正确，正确则进行页面跳转

2.2 约定前后端交互接口

2.2.1 需求分析

后端需要提供两个服务：

生成验证码，并返回验证码
校验验证码是否正确

2.2.2 接口定义

1、生成验证码：

url:/captcha/get

param:无

return：图片的内容

2、校验验证码

url:/captcha/check

param:inputCode

return:true/false

2.3 后端生成验证码

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;@RestController
@RequestMapping("/captcha")
public class CaptchaController {@RequestMapping("/get")public void getCaptcha(HttpServletResponse response) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);//图像验证码写出，可以写出到文件，也可以写出到流，此处写出到流try {lineCaptcha.write(response.getOutputStream());} catch (IOException e) {throw new RuntimeException(e);}}
}

小技巧：在我们每写完一个后端代码模块时，我们可以进行测试，看是否有错误，避免后续代码量过多发生错误时不知道哪块出错。

根据后端定义的url进行测试截图：

2.4 前端接收验证码图片

<!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="/captcha/get" 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', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {alert("验证码校验");});</script>
</body></html>

验证前端是否有问题：

2.5 后端校验验证码

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import com.example.demo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;
import java.util.Date;@RestController
@RequestMapping("/captcha")
public class CaptchaController {private final static long session_valid_timeout = 60 * 1000;@Autowiredprivate CaptchaProperties captchaProperties;@RequestMapping("/check")public Boolean check(HttpSession session, String inputCode) {//验证码输入的内容和用户输入的进行比较//从session获取信息if (!StringUtils.hasLength(inputCode)) {return false;}String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());if (inputCode.equalsIgnoreCase(savedCode)) {//判断验证码是否过期if (saveDate != null && System.currentTimeMillis() - saveDate.getTime() < session_valid_timeout) {return true;}return true;}return false;}
}

检查校验验证码是否存在问题：

1、先查看后端生成的验证码

2、根据校验验证的url进行验证

首先先输入错误的验证码观察返回ture或者false，如果返回false证明验证码输入错误或者过期，否则反正true。

先输入错误的验证码1234截图：

再输入正确的验证码截图：

2.6 前端校验验证码

<!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="/captcha/get" 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', '/captcha/get?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({url: "/captcha/check",type: "post",data: {inputCode: $("#inputCaptcha").val()},success: function(result) {if (result) {location.href = "success.html";} else {alert("验证码错误或者过期");}}})});</script>
</body></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>

运行截图：

2.7 后端完整代码

package com.example.demo.controller;import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
import com.example.demo.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;
import java.util.Date;@RestController
@RequestMapping("/captcha")
public class CaptchaController {private final static long session_valid_timeout = 60 * 1000;@Autowiredprivate CaptchaProperties captchaProperties;@RequestMapping("/get")public void getCaptcha(HttpSession session, HttpServletResponse response) {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(captchaProperties.getWidth(), captchaProperties.getHeight());//设置缓存类型response.setContentType("image/jpeg");//禁止缓存response.setHeader("Progma", "No-cache");//图像验证码写出，可以写出到文件，也可以写出到流，此处写出到流try {lineCaptcha.write(response.getOutputStream());//存储sessionsession.setAttribute(captchaProperties.getSession().getKey(), lineCaptcha.getCode());session.setAttribute(captchaProperties.getSession().getDate(), new Date());} catch (IOException e) {throw new RuntimeException(e);}}@RequestMapping("/check")public Boolean check(HttpSession session, String inputCode) {//验证码输入的内容和用户输入的进行比较//从session获取信息if (!StringUtils.hasLength(inputCode)) {return false;}String savedCode = (String) session.getAttribute(captchaProperties.getSession().getKey());Date saveDate = (Date) session.getAttribute(captchaProperties.getSession().getDate());if (inputCode.equalsIgnoreCase(savedCode)) {//判断验证码是否过期if (saveDate != null && System.currentTimeMillis() - saveDate.getTime() < session_valid_timeout) {return true;}}return false;}
}

配置文件:

captcha:width: 200height: 100session:key: captcha_session_keydate: captcha_session_date

captcha配置：

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;@Component
@ConfigurationProperties(prefix = "captcha")
@Data
public class CaptchaProperties {private Integer width;private Integer height;private Session session;@Datapublic static class Session {private String key;private String date;}
}

验证码案例

目录前言一、Hutool工具介绍 1.1 Maven 1.2 介绍 1.3 实现类二、验证码案例 2.1 需求 2.2 约定前后端交互接口 2.2.1 需求分析 2.2.2 接口定义 2.3 后端生成验证码 2.4 前端接收验证码图片 2.5 后端校验验证码 2.6 前端校验验证码 2.7 后端完整代码前言…...

编程日记 2024/6/9 13:57:05

python身份证ocr接口功能免费体验、身份证实名认证接口

翔云人工智能API开放平台提供身份证实名认证接口、身份证识别接口，两者的相结合可以实现身份证的快速、精准核验，当用户在进行身份证实名认证操作时，仅需上传身份证照片，证件识别接口即可快速、精准的对证件上的文字信息进行快速提…...

编程日记 2024/6/9 13:56:04

屏幕空间反射技术在AI绘画中的作用

在数字艺术和游戏开发的世界中，真实感渲染一直是追求的圣杯。屏幕空间反射（Screen Space Reflection，SSR）技术作为一种先进的图形处理手段，它通过在屏幕空间内模拟光线的反射来增强场景的真实感和视觉冲击力。随着人工…...

编程日记 2024/6/9 13:55:03

JDK下载安装Java SDK

Android中国开发者官网 Android官网 (VPN翻墙) 通过brew命令下载OracleJDK(推荐) 手动下载OracleJDK(不推荐) oracle OracleJDK下载页查找硬件设备是否已存在JDK环境 oracle官网备注： JetPack JavaDevelopmentKit Java开发的系统SDK OpenJDK 开源免费SDK …...

编程日记 2024/6/9 13:53:00

【ARM Cache 系列文章 1.2 -- Data Cache 和 Unified Cache 的详细介绍】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】及【嵌入式开发学习必备专栏】文章目录 Data Cache and Unified Cache数据缓存 (Data Cache)统一缓存 (Unified Cache)数据缓存与统一缓存的比较小结 Data Cache and Unified Cache 在 ARM架构中，缓存&#xff08…...

编程日记 2024/6/9 13:50:58

Debian13将正式切换到基于内存的临时文件系统

以前的内存很小，旅行者一号上的计算机内存只有68KB，现在的内存可以几十G，上百G足够把系统全部装载在内存里运行，获得优异的性能和极速响应体验。很多小型系统能做到这一点，Linux没有那么激进，不过Debian …...

编程日记 2024/6/9 13:47:55

设计模式-工厂方法（创建型）

创建型-工厂方法简单工厂将被创建的对象称为“产品”，将生产“产品”对象称为“工厂”；如果创建的产品不多，且不需要生产新的产品，那么只需要一个工厂就可以，这种模式叫做“简单工厂”，它不属于23中设计…...

编程日记 2024/6/9 13:46:55

分布式事务大揭秘：使用MQ实现最终一致性

本文作者：小米，一个热爱技术分享的29岁程序员。如果你喜欢我的文章，欢迎关注我的微信公众号“软件求生”，获取更多技术干货！大家好，我是小米，一个热爱分享技术的29岁程序员，今天我们来聊聊分布式事务中的一种经典实现方式——MQ最终一致性。这是一个在互联网公司中广…...

编程日记 2024/6/9 13:45:53

【IoT NTN】3GPP R18中关于各类IoT设备在NTN中的增强和扩展

博主未授权任何人或组织机构转载博主任何原创文章，感谢各位对原创的支持！ 博主链接本人就职于国际知名终端厂商，负责modem芯片研发。在5G早期负责终端数据业务层、核心网相关的开发工作，目前牵头6G技术研究。博客内容主要围绕…...

编程日记 2024/6/9 13:42:51

vs - vs2015编译gtest-v1.12.1

文章目录 vs - vs2015编译gtest-v1.12.1概述点评笔记将工程迁出到本地后，如果已经编译过工程，将工程Revert, Clean up 干净。编译用的CMake, 优先用VS2019自带的打开VS2015X64本地命令行编译gtest工程测试安装自己写个测试工程，看看编译出来的…...

编程日记 2024/6/9 13:41:50

你好GPT-4o——对GPT-4o发布的思考与看法

你好GPT-4o 前言 2024年5月13日，OpenAI官网发布了他们的新一代自然语言处理交互系统——GPT-4o。这是OpenAI继GPT4之后又一个新的旗舰模型。 GPT-4o（“o”代表“omni”）是迈向更自然的人机交互的一步——它接受文本、音频、图像和视频的任意…...

编程日记 2024/6/9 13:39:47

QT 信号和槽多对一关联示例，多个信号，一个槽函数响应，多个信号源如何绑定一个槽函数

三个顾客 Anderson、Bruce、Castiel 都要订饭，分别对应三个按钮，点击一个按钮，就会弹出给该顾客送饭的消息。注意这个例子只使用一个槽函数，而三个顾客名称是不一样的，弹窗时显示的消息不一样，这需要一些技…...

编程日记 2024/6/9 13:38:47

将跟php有关的注释掉： 添加： #解决vue刷新404问题try_files $uri $uri/ /index.html; location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header…...

编程日记 2024/6/9 13:36:45

容器化实践：DevOps环境下的容器交付流程

DevOps的兴起是为了应对市场和消费者对技术应用的不断增长的需求。它的目标是构建一个更快的开发环境，同时保持软件的高质量标准。DevOps还致力于在敏捷开发周期中提升软件的整体品质。这一目标的实现依赖于多种技术、平台和工具的综合运用。结合容器化技术与DevO…...

编程日记 2024/6/9 13:35:44

Linux---sudo命令

文章目录目录文章目录一.sudo命令简介二.sudo 命令的特点三.sudo 相关文件四.sudo 命令授权配置一.sudo命令简介 sudo 命令全称“SuperUser Do”，是Linux系统中的一个命令能够使普通用户以超级用户身份去执行某些命令。二.sudo 命令的特点 sudo能够授权…...

编程日记 2024/6/9 13:31:39

前后端分离与实现 ajax 异步请求和动态网页局部生成

前端 <!DOCTYPE html>   <!-- 配合java后端可以监听 --&…...

编程日记 2024/6/9 13:30:38

Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略

Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略文章目录 Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略一、引言二、CUDA、cuDNN与PyTorch-GPU介绍三、安装准备1. 查看支持的CUDA版本2. 查看已安装的CUDA版本3. 查看支持的PyTorch版本四、卸载旧版CUDA五、下载…...

编程日记 2024/6/9 13:29:37

Android Dialog使用汇总

Dialog分类 AlertDialog Dialog 类是对话框的基类，官方建议我们不要直接实例化它，而是使用其子类来获取实例。AlertDialog是系统提供的一个直接子类，它能帮助我们快速构建出不同类型的弹窗。接下来就看下各种类型弹窗的使用。 1、普通对话框…...

编程日记 2024/6/9 13:23:31

[数据集][目标检测]足球场足球运动员身份识别足球裁判员数据集VOC+YOLO格式312张4类别

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：312 标注数量(xml文件个数)：312 标注数量(txt文件个数)：312 标注类别…...

编程日记 2024/6/9 13:21:28

学习分享-声明式的 HTTP 客户端OpenFeign

OpenFeign 详细介绍最近在学习中有用到OpenFeign，也在网上查找了相关资料，做下分享。一、概述 OpenFeign 是一个声明式的 HTTP 客户端，它使得调用 REST API 变得更加简单和直观。通过 OpenFeign，开发者只需定义接口并添加注解…...

编程日记 2024/6/9 13:19:27

如何零安装体验Windows 12：网页版模拟器完整指南

如何零安装体验Windows 12：网页版模拟器完整指南【免费下载链接】win12 Windows 12 网页版，在线体验点击下面的链接在线体验项目地址: https://gitcode.com/gh_mirrors/wi/win12 你是否想在浏览器中直接运行Windows系统？无需下载任…...

编程新知 2026/5/13 17:36:30

Cursor Pro功能解锁：3步实现免费无限制使用AI编辑器完整指南

Cursor Pro功能解锁：3步实现免费无限制使用AI编辑器完整指南【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reached yo…...

编程新知 2026/5/13 17:02:45

UWB车内目标探测技术【附仿真】

✨ 长期致力于UWB雷达、活体、目标检测、生命体征、信号模型研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）UWB雷达生命体征信号建模与自适应杂波抑制…...

编程新知 2026/5/13 16:27:19

贾子理论体系：公理化东方智慧与现代科学工程化的认知范式

贾子理论体系：公理化东方智慧与现代科学工程化的认知范式摘要贾子（本名贾龙栋，笔名Kucius）于2025–2026年间构建以“1-2-3-4-5”公理架构为核心的跨学科认知体系，涵盖思想主权元公理、两大规律、三大定律、四大支柱与…...

编程新知 2026/5/13 16:07:43

3分钟搞定Axure RP中文界面：全版本汉化终极指南

3分钟搞定Axure RP中文界面：全版本汉化终极指南【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在为Axure RP的英文…...

编程新知 2026/5/13 15:46:06

在Google Cloud上构建OpenAI兼容API网关：无缝对接Vertex AI模型

1. 项目概述：在Google Cloud上搭建你自己的OpenAI兼容API网关如果你正在寻找一种方法，能够让你手头那些原本为OpenAI ChatGPT设计的应用，无缝对接上Google Cloud Vertex AI的强大模型，比如Gemini Pro、PaLM 2或者Codey&#xff…...

编程新知 2026/5/13 15:26:47