验证码案例
学了Spring MVC ，配置 相关章节， 现可以尝试写一个前后端交互的验证码
文章目录
- 验证码案例
- 前言
- 一、验证码是什么？
- 二、需求
- 1.引入依赖
- 2.导入前端页面
- 3.约定前后段交互接口
- 三、代码解析
- Controller
- model
- application.xml
- 四丶结果
- 五丶总结
前言
提示：这里可以添加本文要记录的大概内容：
页面如下图所示
1.页面生成验证码
2.输入验证码，点击提交，验证用户输入验证码是否正确，正确则页面跳转
提示：以下是本篇文章正文内容，下面案例可供参考
一、验证码是什么？
验证码，是来区分用户是计算机还是人的公共全自动程序，可以防止：恶意破解密码，刷票，等有效防止某个黑客对特定用户进行暴力登录，这个问题必须只有人类才能解答，验证码花样百出，下面我们将采用扭曲干扰验证码来实现前后端交互的接口
二、需求
1.引入依赖
代码如下（示例）：
<dependencies>//SpingWeb 框架<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>// lombok 自动生成<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency>//test 测试方法<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>//验证码 相关的类 封装好了的 直接用<dependency><groupId>cn.hutool</groupId><artifactId>hutool-captcha</artifactId><version>5.8.26</version></dependency></dependencies>
把这段代码加入pom.xml文件中即可，但是要把里面的注释删了 ，否则会出错
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://code.jquery.com/jquery-3.7.1.min.js"></script><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==true){location.href="/success.html"}else{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>
3.约定前后段交互接口
需求分析
后端需要提供两个服务
- 生成验证码，并返回验证码；
- 校验验证码是否正确；
接口定义
1.生成验证码
请求：
请求URL：/captcha/getCaptcha
响应：验证码图片内容
2.校验验证码是否正确
请求：
请求URL：/captcha/check
请求参数：captcha ，用户传过来的验证码
响应: true / false
三、代码解析
Controller
@RestController
@RequestMapping("/captcha")
public class CaptchaController {//注入配置 对象 ， 一些常量从里面读取@Autowiredprivate CaptchaProperties cp;//易凤种 华为msprivate static long VALID_TIME_OUT = 60*1000;@RequestMapping("/getCaptcha")public void getCaptcha(HttpSession session, HttpServletResponse response) {//生成验证码 ，并把验证码写入浏览器中//定义图形验证码的长和宽CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(cp.getWidth(), cp.getHeight(), cp.getCodeCount(), cp.getCilceCount());//打印验证码String code = captcha.getCode();System.out.println(code);//验证码 ， 当前时间 存入Sessionsession.setAttribute(cp.getSession().getCode(), code);session.setAttribute(cp.getSession().getDate(), new Date());try {//把验证码写到浏览器中captcha.write(response.getOutputStream());} catch (IOException e) {throw new RuntimeException(e);}}//校验验证码,获取生成的验证码 写给Session@RequestMapping("/check")public boolean check(String captcha,HttpSession session) {//校验是否为空，防止equls空指针if(!StringUtils.hasLength(captcha)){return false;}//从Session中读取值String code = (String) session.getAttribute(cp.getSession().getCode());Date date = (Date) session.getAttribute(cp.getSession().getDate());//校验获取验证码的时间 和 校验时间 的差值不能超过一分钟if(date == null || (System.currentTimeMillis() - date.getTime()) > VALID_TIME_OUT){return false;}return captcha.equalsIgnoreCase(code);}
}
解析 ：接口getCaptcha ，用来生成验证码(从hutool上面cv)，那么如何将生成的验证码传给另一个接口呢 ？ 设置Session，response是用来把验证码写入到文件/浏览器中的 ，前端用来改一下img中图片的src属性即可获取
Controller 从model中获取配置信息， 需要依赖注入 ，各种常量属性，和存储在Session中的“key
model
@Data
@Configuration
@ConfigurationProperties(prefix = "captcha")
//读取配置的信息
public class CaptchaProperties {private Integer width;private Integer height;private Integer codeCount;private Integer cilceCount;private Session session;@Datapublic static class Session {private String code;private String date;}
}
配置对象的接口 ，用来获取配置中的信息（对象） ，并封装成一个类，需要用到@configurationproperties（“prefix="对象名"”）并且设置对象中的属性，内部类，注意使用内部类 一般要加上 public static 或者会出现错误 具体原因后续再说
@Data 是用来生成 get/set 方法的，来自于lombok依赖
application.xml
captcha:width: 100height: 40codeCount: 4circleCount: 40Session:key: SESSION_CAPTCHA_KEYdate: SESSION_CAPTCHA_DATE
配置相关信息，配置了验证码的相关属性，前后端交互时的Session ， 使用 key - value 的形式
四丶结果
点击“提交”，跳转页面 成功！！
五丶总结
问题：
- HttpSErvletResponse 是什么 ？ 为什么能写入到浏览器 ？
- 在验证代码时，在一个接口中把验证码传给Session ，另一个接口为什么能从Session中获取到？
- 在使用内部类时， 为什么 要设置 public ？ 为什么 要用static才能运行？
- [ ]
注意：
- System.currentTimeMillis() 表示当前时间 ，类型为long ， 单位为ms
 CExercise_05_1函数_1.2计算base的exponent次幂)
