验证码案例 —— Kaptcha 插件介绍 后端生成验证码，前端展示并进行session验证（带完整前后端源码）

🧸欢迎来到dream_ready的博客，📜相信你对这篇博客也感兴趣o (ˉ▽ˉ；)

📜表白墙/留言墙 —— 中级SpringBoot项目，MyBatis技术栈MySQL数据库开发，练手项目前后端开发(带完整源码) 全方位全步骤手把手教学

目录

1、验证码案例

1.1、项目前端页面展示：

1.2、代码结构展示：

2、Kaptcha 插件介绍及简单讲解如何使用

2.1、原理

2.2、引入依赖

2.3、生成验证码

2.4、Kaptcha详细配置如下：

2.5、常用配置如下（直接在yml里配置即可，可适当忽略上面那么多配置，下面这些是最常用的！）：

3、验证码项目正式编写

3.1、约定前后端交互接口

3.2、创建SpringBoot项目

3.3、实现服务器端(后端)代码

3.3.1、引入依赖

3.3.2、通过yml配置创建验证码生成器

3.3.3、后端返回验证码

3.3.4、验证码校验

3.4、实现前端代码（带完整源码）

3.4.1、主页页面：

3.4.2、验证正确后跳转的页面：

！！！注意事项！部署前后必看！！！

1、验证码案例

注：验证码生成大多由前端负责，但由于各位后端程序员不太懂前端，又想学习验证码的生成和验证，所以作者编写了这篇基本由后端负责的验证码案例！

随着安全性的要求越来越⾼, ⽬前项⽬中很多都使⽤了验证码, 验证码的形式也是多种多样, 更复杂的图形验证码和行为验证码已经成为了更流⾏的趋势.

验证码的实现⽅式很多, ⽹上也有⽐较多的插件或者⼯具包可以使⽤, 咱们选择使⽤Google的开源项⽬ Kaptcha来实现.

1.1、项目前端页面展示：

 

1.2、代码结构展示：

2、Kaptcha 插件介绍及简单讲解如何使用

  • 此处我们使用的这个Kaptcha是适配SpringBoot进行二次开发后的，使用极其简单
  • Kaptcha 是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具，官方文档：
  • https://code.google.com/archive/p/kaptcha/
  • ⽹上有很多⼈甚⾄公司基于Google的kaptcha进⾏了⼆次开发. 我们选择⼀个直接适配SpringBoot的 开源项⽬
  • GitHub - oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter
  • 由于作者的⽂档写的不是很全, 下⾯简单介绍下插件的使⽤

2.1、原理

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

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

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

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

2.2、引入依赖

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

2.3、生成验证码

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

  • GitHub - oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter  第一种参考官方文档即可，有点麻烦，此处不再介绍
  • 仅通过配置⽂件来⽣成验证码(超级简单，推荐)

2.4、Kaptcha详细配置如下：

上面的许多配置⽂档中都没有介绍, 感兴趣的朋友可以观看源码:

com.oopsguy.kaptcha.autoconfigure.KaptchaProperties

也可以使⽤ kaptcha.items 配置多个验证码⽣成器

kaptcha.items 是⼀个Map, key为验证码⽣成器名称, value为验证码⽣成器的配置

2.5、常用配置如下（直接在yml里配置即可，可适当忽略上面那么多配置，下面这些是最常用的！）：

kaptcha:image:width: 100height: 60textproducer:font:size: 36items:# home captchaadmin:path: /admin/captchasession:key:  HOME_KAPTCHA_SESSION_KEYdate: HOME_KAPTCHA_SESSION_DATE

配置说明：

配置后, 可以直接访问 http://XXXX:port/home/captcha即可⽣成验证码

3、验证码项目正式编写

3.1、约定前后端交互接口

生成验证码

请求： GET         /admin/captcha

响应：图片内容

补充说明：浏览器给服务器发送⼀个 GET /admin/captcha 这样的请求, 服务器返回⼀个图⽚, 浏览器显示在页面上

校验验证码是否正确

请求：POST         /admin/check

请求中携带内容： captcha= XXXX （captcha是用户输入的验证码）

响应：true/false

根据⽤⼾输⼊的验证码, 校验验证码是否正确. true: 验证成功. false: 验证失败.

3.2、创建SpringBoot项目

如何在idea中创建Springboot项目？ 手把手带你创建Springboot项目，稳！-CSDN博客

创建时导入SpringWeb和lombok依赖

3.3、实现服务器端(后端)代码

3.3.1、引入依赖

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

3.3.2、通过yml配置创建验证码生成器

你的application文件后缀大概率是  .properties  ，将其后缀改为 .yml   即可

kaptcha:image:width: 100height: 60textproducer:font:size: 33items:# home captchaadmin:path: /admin/captchasession:key:  HOME_KAPTCHA_SESSION_KEYdate: HOME_KAPTCHA_SESSION_DATE

简单解释session下面的配置：

  • key：引入该配置后，它会自动帮我们把验证码内容(已转换成字符串)设置到session中，名称为key后面的内容
  • date：通常设置为验证码过期时间 

友情提示：我这里只写了部分配置，能满足上面我展示图片的要求，若你想配置更多样式，可以查看我上面的配置大全！这里不过多介绍

3.3.3、后端返回验证码

注：该配置引入后，不需要写其他代码，他会自动创建/admin/captcha接口，访问该接口即显示验证码，这个工作是该配置以及引入的依赖包自动帮我们完成的

3.3.4、验证码校验

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;@RequestMapping("/admin")
@RestController
public class CaptchaController {//企业标准(建议)://常量定义: key: 全部大写, 单词之间使用下划线分割  value: 通常是小写, 以下划线分割private static final String KAPTCHA_SESSION_KEY = "HOME_KAPTCHA_SESSION_KEY";private static final String KAPTCHA_SESSION_DATE = "HOME_KAPTCHA_SESSION_DATE";//验证码的有效时间:msprivate static final Long SESSION_TIMEOUT = 60 * 1000L;//验证成功: true//验证失败: false/***  1. 从Session中获取到生成的验证码*  2. 比对前端传递的验证码和Session中存储的是否一样*/@RequestMapping("/check")public Boolean check(String captcha, HttpSession session){if (!StringUtils.hasLength(captcha)){return false;}//从Session中获取验证码String saveCaptcha = (String)session.getAttribute(KAPTCHA_SESSION_KEY);Date saveDate = (Date)session.getAttribute(KAPTCHA_SESSION_DATE);//比对验证码if (captcha.equals(saveCaptcha)){//比对日期if (saveDate==null || System.currentTimeMillis() - saveDate.getTime()<SESSION_TIMEOUT){return true;}}return false;}
}

逻辑如下：

  • 先判断验证码是否为空，若为空，直接返回false，不为空，往下走
  • 从session中获取验证码和过期时间
  • 比对验证码是否正确，且是否过期，如果有任意一个不符合条件，返回false，如果都符合条件，返回true

3.4、实现前端代码（带完整源码）

3.4.1、主页页面：

<!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="看不清？换一张" />--><img id="verificationCodeImg" src="http://127.0.0.1:8080/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();$(this).hide().attr('src', 'http://127.0.0.1:8080/admin/captcha?dt=' + new Date().getTime()).fadeIn();});$("#checkCaptcha").click(function () {$.ajax({type: "get",url: "/admin/check",data:{captcha: $("#inputCaptcha").val()},success:function(result){if(result){location.href = "success.html";// location.assign("success.html");   // 和上面这句一样，也是页面跳转}else{alert("验证码错误");}}});// alert("验证码校验");});</script>
</body></html>

前端代码就不在这里过多解释了，会的不用解释，不会的解释两下还是不明白，建议丢给gpt 

3.4.2、验证正确后跳转的页面：

注：验证失败的话会在主页弹出一个小窗口，说明验证码校验失败

​​​​<!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>

至此，项目所有代码编写完毕！

！！！注意事项！部署前后必看！！！

本项目部署在本地，默认是本地ip地址，也就是127.0.0.1或localhost

​

正常来说， 127.0.0.1:8080/index.html  和  localhost:8080/index.html  都可以，但是博主自己验证包括找了些其他博主验证，localhost:8080/index.html 访问的话是存在些许bug的，后端取session可能为空，原因是session没有设置

但127.0.0.1不会有这个问题，跨域访问ip也不会有问题，所以只要不用localhost即可，请问放心使用！

🧸欢迎您于百忙之中阅读这篇博客，📜希望这篇博客给您带来了一些帮助，祝您生活愉快！

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

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

相关文章

强烈 推荐 13 个 Web前端在线代码IDE

强烈 推荐 13 个 Web前端在线代码IDE

codesandbox.io&#xff08;国外&#xff0c;提供免费空间&#xff09; 网址&#xff1a;https://codesandbox.io/ CodeSandbox 专注于构建完整的 Web 应用程序&#xff0c;支持多种流行的前端框架和库&#xff0c;例如 React、Vue 和 Angular。它提供了一系列增强的功能&…
阅读更多...
【数据预处理2】数据预处理——数据标准化

【数据预处理2】数据预处理——数据标准化

数据标准化 1. 什么是标准化&#xff1f;   数据标准化是一个常用的数据预处理操作&#xff0c;目的是将不同规格的数据转换到统一规格或不同分布的数据转换到某个特定范围&#xff0c;以减少规模、特征、分布差异等对模型的影响。这种操作也叫作无量纲化。   除了用作模型…
阅读更多...
＜MySQL＞ 如何合理的设计数据库中的表？数据表设计的三种关系

＜MySQL＞ 如何合理的设计数据库中的表？数据表设计的三种关系

目录 一、表的设计 二、一对一关系 三、一对多关系 四、多对多关系 一、表的设计 数据库设计就是根据需要创建出符合需求的表。 首先根据需求找到体系中的关键实体对象&#xff0c;通常每个实体对象都会有一个表&#xff0c;表中包含了这个实体的相关属性。 再理清楚实体对…
阅读更多...
Java Web——JavaScript运算符与流程语句

Java Web——JavaScript运算符与流程语句

1. 运算符 1.1. 算数运算符 数字是用来计算的&#xff0c;比如&#xff1a;乘法 * 、除法 / 、加法 、减法 - 等等&#xff0c;所以经常和算术运算符一起。 算术运算符&#xff1a;也叫数学运算符&#xff0c;主要包括加、减、乘、除、取余&#xff08;求模&#xff09;等 …
阅读更多...
C语言的由来与发展历程

C语言的由来与发展历程

C语言的起源可以追溯到上世纪70年代&#xff0c;由Dennis Ritchie在贝尔实验室开发出来。C语言的设计目标是提供一种简洁、高效、可移植的编程语言&#xff0c;以便于开发底层的系统软件。在那个时代&#xff0c;计算机技术正在迅速发展&#xff0c;出现了多种高级编程语言&…
阅读更多...
神经网络反向传播的数学原理

神经网络反向传播的数学原理

如果能二秒内在脑袋里解出下面的问题&#xff0c;本文便结束了。 已知&#xff1a;&#xff0c;其中。 求&#xff1a;。 到这里&#xff0c;请耐心看完下面的公式推导&#xff0c;无需长久心里建设。 首先&#xff0c;反向传播的数学原理是“求导的链式法则” : 设f和g为x…
阅读更多...
SpringBoot 整合 Freemarker

SpringBoot 整合 Freemarker

通过 Freemarker 模版&#xff0c;我们可以将数据渲染成 HTML 网页、电子邮件、配置文件以及源代码等。 Freemarker 不是面向最终用户的&#xff0c;而是一个 Java 类库&#xff0c;我们可以将之作为一个普通的组件嵌入到我们的产品中。 Freemarker 模版后缀为 .ftl(FreeMarke…
阅读更多...
PC端使子组件的弹框关闭

PC端使子组件的弹框关闭

子组件 <template><el-dialog title"新增部门" :visible"showDialog" close"close"> </el-dialog> </template> <script> export default {props: {showDialog: {type: Boolean,default: false,},},data() {retu…
阅读更多...
9 HDFS架构剖析

9 HDFS架构剖析

问题 100台服务器&#xff0c;存储空间单个200GB 20T 5T文件如何存储&#xff1f; 128MB一块 128MB81GB 1288*10241TB 5T数据分成的128MB的块数 8192 * 5 客户端(client)代表用户通过与namenode和datanode交互来访问整个文件系统。 HDFS集群有两类节点&#xff1a; 一个na…
阅读更多...
Unity中Shader立方体纹理Cubemap

Unity中Shader立方体纹理Cubemap

文章目录 前言一、什么是立方体纹理二、立方体纹理的生成方式1、使用6个面的生成方式2、使用单张图片的生成方式 三、Cubemap的采样方式四、在Unity中看一下Cubemap五、在Shader中&#xff0c;对立方体纹理进行采样使用1、我们在属性面板定义一个Cube类型的变量来存放立方体纹理…
阅读更多...
多功能神器，强劲升级，太极2.x你值得拥有！

多功能神器，强劲升级，太极2.x你值得拥有！

嗨&#xff0c;大家好&#xff0c;今天给大家分享一个好用好玩的软件。那就是太极2.x软件&#xff0c;最近在1.0版本上进行了全新升级&#xff0c;升级后的功能更强更稳定&#xff0c;轻度用户使用基本功能就已经足够了&#xff0c;我们一起来看看吧&#xff01; 首页 首页左…
阅读更多...
15项基本SCADA技术技能

15项基本SCADA技术技能

1. 人机界面 人机界面是将操作员连接到设备、系统或机器的仪表板或用户界面。 以下是 hmi 在 scada 技术人员简历中的使用方式&#xff1a; 完成了查尔斯湖废水处理厂和提升站的完整 HMI 图形界面。对加油系统、加油车、PLC、HMI、触摸屏进行故障排除和维修。对 Horner HMI …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023