目
🌲实现说明
🎄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请求数据
代码:
🚩整体测试
正确校验:
错误校验: