SpringBoot实现图形验证码

目录

项目创建

前端代码实现

约定前后端交互接口

需求分析

接口定义

Hutool工具

实现服务器端代码

引入依赖

获取验证码

验证码校验

调整前端代码

随着安全性的要求越来越高，目前许多项目中都使用了验证码，验证码也有各种类型，如 图形验证码、短信验证码、邮件验证码、人脸识别等，这些不同类型的验证码可以根据实际需求和安全性要求进行选择和应用，保护网站和用户免受恶意攻击

在本篇文章中，我们来学习图形验证码的实现

验证码的实现方式有很多，可以由前端实现，也可以由后端进行实现，也有很多的插件和工具包可以使用，在这里，我们使用 Hutool 提供的小工具实现

验证码需要实现功能：

1. 页面生成验证码，点击图片可进行刷新

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

项目创建

我们首先创建项目，并引入相关依赖

前端代码实现

接下来，我们实现两个简单的前端界面：

1. 验证码界面

2. 验证成功后跳转的界面

 

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="/captcha/getCaptcha" 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/getCaptcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {alert("判断验证码是否正确");});</script>
</body></html>

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>

约定前后端交互接口

需求分析

后端需要提供两个服务：

1. 生成验证码，并返回

2. 校验验证码是否正确

接口定义

1.  生成验证码

[URL]

GET /captcha/getCaptcha

[请求参数]

[响应]

{
   验证码图片内容

}

2. 校验验证码是否正确

[URL]

POST /captcha/check

[请求参数]

captcha=xmad

[响应]

{
   true

}

根据用户输入的验证码，校验验证码是否正确，校验成功，返回true；校验失败，返回false

Hutool工具

我们使用 Hutool 提供的小工具来实现验证码

Hutool是一个Java工具包类库，对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装，组成各种Util工具类

Hutool是一个小而全的Java工具类库，通过静态方法的封装，降低相关API学习成本，提高效率

Hutool官网：https://hutool.cn

实现服务器端代码

引入依赖

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

由于我们只需要实现验证码相关功能，因此只需要引入验证码部分依赖 

获取验证码

我们可以通过提供的指南来学习如何使用

其中提供了：线段干扰验证码、圆圈干扰验证码、扭曲干扰验证码以及自定义验证码

我们通过其提供的例子来学习：

我们在 test 中 学习验证码的生成：

@SpringBootTest
class CaptchaControllerTest {@Testvoid getCaptcha() {//定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);//图形验证码写出，可以写出到文件，也可以写出到流lineCaptcha.write("d:/line.png");//输出codeSystem.out.println("生成验证码:" + lineCaptcha.getCode());}
}

运行，观察结果：

且在D盘下成功生成验证码：

同样的，我们可以生成圆圈干扰验证码、扭曲干扰验证码等，大家可自行进行实现

接下来，我们实现验证码的生成

在实现验证码时，需要指定图片的长、宽和验证码的过期时间（也可指定验证码字符个数、干扰元素个数等），我们在 Constants 中进行定义

public class Constants {public static final Integer CAPTCHA_WIDTH = 100;public static final Integer CAPTCHA_HEIGHT = 40;public static final long EXPIRATION_TIME = 60 * 1000;
}

由于当用户输入验证码时，我们需要进行校验，因此，我们需要对生成的验证码进行存储，同时，需要存储验证码的生成时间，以便判断验证码是否超时

public class Constants {public static final Integer CAPTCHA_WIDTH = 100;public static final Integer CAPTCHA_HEIGHT = 40;public static final long EXPIRATION_TIME = 60 * 1000;public static final String CAPTCHA_KEY = "captcha";public static final String CAPTCHA_DATE = "date";
}

接下来我们来实现 CaptchaController

@RequestMapping("/captcha")
@RestController
@Slf4j
public class CaptchaController {/*** 生成验证码* @param session* @param response*/@GetMapping("/getCaptcha")public void getCaptcha(HttpSession session, HttpServletResponse response) {// 定义图形验证码的长和宽LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(Constants.CAPTCHA_WIDTH, Constants.CAPTCHA_HEIGHT);// 设置返回数据类型response.setContentType("image/jpeg");// 禁止使用缓存response.setHeader("Pragma", "No-cache");try {// 输出到页面lineCaptcha.write(response.getOutputStream());// 将 生成的验证码 和 验证码生成时间 存储到session中session.setAttribute(Constants.CAPTCHA_KEY, lineCaptcha.getCode());session.setAttribute(Constants.CAPTCHA_DATE, new Date());// 关闭流response.getOutputStream().close();} catch (IOException e) {throw new RuntimeException(e);}}
}

运行程序，此时成功生成验证码 

验证码校验

    /*** 验证码校验* @param captcha* @param session* @return*/@PostMapping("/check")public boolean checkCaptcha(String captcha, HttpSession session) {log.info("接收到验证码: {}", captcha);// 参数校验if(!StringUtils.hasLength(captcha)) {return false;}// 获取存储的验证码和生成时间String code = (String) session.getAttribute(Constants.CAPTCHA_KEY);Date createTime = (Date) session.getAttribute(Constants.CAPTCHA_DATE);// 判断验证码是否正确(验证码一般忽略大小写)if(captcha.equalsIgnoreCase(code)) {// 判断验证码是否过时if(createTime == null || System.currentTimeMillis() - createTime.getTime() < Constants.EXPIRATION_TIME) {return true;}return false;}return false;}

将用户输入的验证码与存储在 session 中的验证码进行对比，判断其是否相同，若相同且在1min内，则验证成功

在这里，我们就不对其进行测试了，在调整前端代码后，一起进行测试

调整前端代码

接下来，我们修改 index.html

  <script>$("#verificationCodeImg").click(function(){$(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({url: "/captcha/check",type: "post",data: {captcha: $("#inputCaptcha").val()},success: function(result) {if(result) {location.href = "success.html";}else {alert("验证码错误或已超时");}}})});</script>

再次运行程序，此时输入验证码进行验证：

验证成功：

验证失败：

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Win11鼠标卡顿 - 解决方案

Win11鼠标卡顿 - 解决方案

问题 使用Win11系统使&#xff0c;鼠标点击任务栏的控制中心&#xff08;如下图&#xff09;时&#xff0c;鼠标会有3秒左右的卡顿&#xff0c;同时整个显示屏幕也有一定程度的卡顿。 问题原因 排除鼠标问题&#xff1a;更换过不同类型的鼠标&#xff0c;以及不同的连接方式…
阅读更多...
MT6825磁编码IC在智能双旋机器人中的应用

MT6825磁编码IC在智能双旋机器人中的应用

MT6825磁编码IC在智能双旋机器人中的应用&#xff0c;无疑为这一领域的创新和发展注入了新的活力。作为一款高性能的磁性位置传感器&#xff0c;MT6825以其独特的优势&#xff0c;在智能双旋机器人的运动控制、定位精度以及系统稳定性等方面发挥了关键作用。 www.abitions.com …
阅读更多...
Jenkins 离线升级

Jenkins 离线升级

1. 环境说明 环境 A: jenkins 版本&#xff1a;2.253使用 systemctl 管理的 jenkins 服务 环境 B&#xff1a; 可以上网的机器&#xff0c;装有 docker-compose docker 和 docker-compose 安装&#xff0c;这里都略了。 2. 安装旧版本 2.1 环境 A jenkins 目录打包文件 …
阅读更多...
科普文：信创国产数据库兼容性一览

科普文：信创国产数据库兼容性一览

1. 常见国产数据库兼容性一览 让我们先从一张《数据库库兼容性一览表》开始&#xff0c;谈谈各家兼容性。 图片上传失败&#xff0c;csdn一直提示上传图片过于频繁 ❖ 兼容对象 在兼容对象上&#xff0c;大部分产品都将Oracle、MySQL、PostgreSQL作为兼容对象&#xff0c;部…
阅读更多...
论文翻译：通过云计算对联网多智能体系统进行预测控制

论文翻译：通过云计算对联网多智能体系统进行预测控制

通过云计算对联网多智能体系统进行预测控制 文章目录 通过云计算对联网多智能体系统进行预测控制摘要前言通过云计算实现联网的多智能体控制系统网络化多智能体系统的云预测控制器设计云预测控制系统的稳定性和一致性分析例子结论 摘要 本文研究了基于云计算的网络化多智能体预…
阅读更多...
服务器操作集合

服务器操作集合

服务器使用PC作为代理访问外网 1、PC上启动代理&#xff0c;比如nginx 下载nginx&#xff1a;http://nginx.org/en/download.html 修改配置文件&#xff0c;在conf下&#xff1a; http {include mime.types;default_type application/octet-stream;sendfile o…
阅读更多...
[BJDCTF2020]EzPHP1

[BJDCTF2020]EzPHP1

知识点&#xff1a;1. url编码绕过 2. %0a绕过 3. post优先级绕过 4. php伪协议 5. 数组的强类型比较绕过 6. 取反绕过 进入之后发现了一个很帅气的页面&#x1f60e;~ 看看网页源代码试试~ 是base32编码&#xff0c;尝试一下解码. https://www.qqxiuzi.cn/bianma/base.php 解…
阅读更多...
Qt实现MDI应用程序

Qt实现MDI应用程序

本文记录Qt实现MDI应用程序的相关操作实现 目录 1.MDM模式下窗口的显示两种模式 1.1TabbedView 页签化显示 1.2 SubWindowView 子窗体显示 堆叠cascadeSubWindows 平铺tileSubWindows 2.MDM模式实现记录 2.1. 窗体继承自QMainWindow 2.2.增加组件MdiArea 2.3.定义统一…
阅读更多...
Ubuntu18.04安装ROS

Ubuntu18.04安装ROS

1.添加ROS软件源 sudo sh -c echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.listcurl -s https://raw.githubusercontent.com/ros/rosdistro/master/ros.asc输入指令&#xff1a;curl -s https:…
阅读更多...
基于IDEA的Lombok插件安装及简单使用

基于IDEA的Lombok插件安装及简单使用

lombok介绍 Lombok能以注解形式来简化java代码&#xff0c;提高开发效率。开发中经常需要写的javabean&#xff0c;都需要花时间去添加相应的getter/setter&#xff0c;也许还要去写构造器、equals等方法&#xff0c;而且需要维护。而Lombok能通过注解的方式&#xff0c;在编译…
阅读更多...
acrobat 中 PDF 复制时不能精确选中所选内容所在行的一种解决方法

acrobat 中 PDF 复制时不能精确选中所选内容所在行的一种解决方法

现象&#xff1a;划取行的时候&#xff0c;自动扩展为多行 如果整段选中复制&#xff0c;粘贴后是乱码 解决步骤 识别完&#xff0c;保存 验证 可以按行复制了。 如果遇到仅使用 acrobat OCR 不能彻底解决的&#xff0c;更换其他自己熟悉的进行 OCR。
阅读更多...
springboot 适配ARM 架构

springboot 适配ARM 架构

下载对应的maven https://hub.docker.com/_/maven/tags?page&page_size&ordering&name3.5.3-alpinedocker pull maven:3.5.3-alpinesha256:4c4e266aacf8ea6976b52df8467134b9f628cfed347c2f6aaf9e6aff832f7c45 2、下载对应的jdk https://hub.docker.com/_/o…
阅读更多...
路网双线合并单线——ArcGISpro 解决方法

路网双线合并单线——ArcGISpro 解决方法

路网双线合并成单线是一个在地图制作、交通规划以及GIS分析中常见的需求。双线路网定义&#xff1a;具有不同流向、不同平面结构的道路。此外&#xff0c;车道数较多的道路&#xff08;例如&#xff0c;双黄实线车道数大于4的道路&#xff09;也可以视为双线路网&#xff0c;本…
阅读更多...
Web开发：＜br＞标签的作用

Web开发：＜br＞标签的作用

br作用 介绍基本用法常见用途注意事项使用CSS替代 介绍 在Web开发中&#xff0c;<br> 标签是一个用于插入换行符的HTML标签。它是“break”的缩写&#xff0c;常用于需要在文本中强制换行的地方。<br> 标签是一个空标签&#xff0c;这意味着它没有结束标签。 基本…
阅读更多...
docker inspect 如何提取容器的ip和端口 网络信息？

docker inspect 如何提取容器的ip和端口 网络信息？

目录 通过原生Linux命令过滤找到IP 通过jq工具找到IP 使用docker -f 的过滤&#xff08;模板&#xff09; 查找端口映射信息 查看容器内部细节 docker inspect 容器ID或容器名 通过原生Linux命令过滤找到IP 通过jq工具找到IP jq 是一个轻量级且灵活的命令行工具&#xf…
阅读更多...
C语言 ——— 调试的时候如何查看当前程序的变量信息

C语言 ——— 调试的时候如何查看当前程序的变量信息

目录 调试前/后的调试窗口 ​编辑 调试窗口 --- 监视 调试窗口 --- 内存 调试窗口 --- 调用堆栈 调试前/后的调试窗口 调试前的调试窗口&#xff1a; 调试前的调试窗口是没有显示的&#xff0c;只有在调试的时候才会有相对应的调试窗口 调试后的调试窗口&#xff1a…
阅读更多...
基于SpringBoot+VueJS+微信小程序技术的图书森林共享小程序设计与实现

基于SpringBoot+VueJS+微信小程序技术的图书森林共享小程序设计与实现

注&#xff1a;每个学校每个老师对论文的格式要求不一样&#xff0c;故本论文只供参考&#xff0c;本论文页数达到60页以上&#xff0c;字数在6000及以上。 基于SpringBootVueJS微信小程序技术的图书森林共享小程序设计与实现 目录 基于SpringBootVueJS微信小程序技术的图书森…
阅读更多...
AI算法16-贝叶斯线性回归算法Bayesian Linear Regression | BLR

AI算法16-贝叶斯线性回归算法Bayesian Linear Regression | BLR

贝叶斯线性回归算法简介 频率主义线性回归概述 线性回归的频率主义观点可能你已经学过了&#xff1a;该模型假定因变量&#xff08;y&#xff09;是权重乘以一组自变量&#xff08;x&#xff09;的线性组合。完整的公式还包含一个误差项以解释随机采样噪声。如有两个自变量时…
阅读更多...
2024Datawhale AI夏令营---基于术语词典干预的机器翻译挑战赛--学习笔记

2024Datawhale AI夏令营---基于术语词典干预的机器翻译挑战赛--学习笔记

#Datawhale #NLP 1.背景介绍&#xff1a; 机器翻译&#xff08;Machine Translation&#xff0c;简称MT&#xff09;是自然语言处理领域的一个重要分支&#xff0c;其目标是将一种语言的文本自动转换为另一种语言的文本。机器翻译的发展可以追溯到20世纪50年代&#xff0c;经历…
阅读更多...
各向异性含水层中地下水三维流基本微分方程的推导（二）

各向异性含水层中地下水三维流基本微分方程的推导（二）

各向异性含水层中地下水三维流基本微分方程的推导 参考文献&#xff1a; [1] 刘欣怡,付小莉.论连续性方程的推导及几种形式转换的方法[J].力学与实践,2023,45(02):469-474. 书接上回&#xff1a; 我们能得到三个方向的流入流出平衡方程&#xff1a; ∂ ρ u x ∂ x d x d y d…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023