【JavaEE进阶】验证码案例

目

🌲实现说明

🎄Hutool介绍

🌳准备工作

🌴约定前后端交互接口

🚩接口定义

🚩实现服务器后端代码

🚩前端代码

🚩整体测试

---

🌲实现说明

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

验证码的实现⽅式很多,可以前端实现,也可以后端实现.⽹上也有⽐较多的插件或者⼯具包可以使⽤, 咱们选择使⽤Hutool提供的⼩⼯具来实现

🎄Hutool介绍

咱们课程中验证码的实现,使⽤Hutool提供的⼩⼯具来实现

Hutool是⼀个Java⼯具包类库，对⽂件、流、加密解密、转码、正则、线程、XML等JDK⽅法进⾏封 装，组成各种Util⼯具类

Hutool是⼀个⼩⽽全的Java⼯具类库，通过静态⽅法封装，降低相关API的学习成本，提⾼⼯作效 率，使Java拥有函数式语⾔般的优雅，让Java语⾔也可以"甜甜的"

Hutool官⽹: https://hutool.cn/

Hutool参考⽂档: https://hutool.cn/docs/#/

Hutool源码: GitHub - dromara/hutool: 🍬A set of tools that keep Java sweet.

我们不需要知道这个工具中实现这些功能的代码是如何实现的，我们只需要调用它的API即可。

使用方法：

• 第一步：导包，需要什么就导什么包，也可导入该工具中所有的包(此处就导验证码的包)
• 第二步：查看验证码接口，实现类，方法介绍说明
• 第三步：查看代码及注释(部分代码实现，具体各种验证码查看官网)
• 第四步：代码具体实现
• 运行项目，发送请求，查看line.png文件；后端还打印了该验证码，此处不在展示

小结：Hutool工具有各种各样的验证码，以及实现方法，当前不在一一展示，可自行浏览官网。

🌳准备工作

界⾯如下图所⽰

1. ⻚⾯⽣成验证码

2. 输⼊验证码,点击提交,验证⽤⼾输⼊验证码是否正确,正确则进⾏⻚⾯跳转

创建项⽬,引⼊SpringMVC的依赖包,把前端⻚⾯放在项⽬中

index.html代码如下：

success.html代码如下：

前端代码验证：

🌴约定前后端交互接口

🚩接口定义

接口一：生成验证码

请求：

GET /captcha/get

响应：图片内容

浏览器给服务器发送⼀个 GET /captcha/get 这样的请求,服务器返回⼀个图⽚,浏览器显⽰在⻚⾯上

接口二：校验验证码是否正确

请求: 

/cpatcha/check

响应：

true/false

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

🚩实现服务器后端代码

首先在pom文件中引入依赖

图片生成代码：

测试：

由于我们学习了SpringBoot的配置，我们可以把图片的高度和宽度放在配置中

代码：

验证码校验：

注意：若使用Hutool工具中的接口来校验验证码的话，就需要把上述图片生成代码中的ICaptcha接口提到成员变量上，但是这只适用于单线程的时候，若是多线程的情况下，用多个客户端访问时只有这一个对象，那很显然是不合适的，所以这个方法是不适合的。

此时就可以借助前面学习的Session了，既然有不同的客户端，我们就可以通过Session来进行存储，每个客户端存储的是自己的Session，即在校验的时候，我们取的是自己的Session信息

代码：

测试：

生成验证码：

正确校验验证码：

错误校验验证码：

🚩前端代码

通过ajax请求数据

代码：

🚩整体测试

正确校验：

错误校验：