SpringBoot 集成 Kaptcha 实现图片验证码功能
我们通过一个案例来讲解如何使用 Spring Boot 来生成验证码，之后我们再对验证码的显示以及后端验证进行讲解。
实现流程
1. 添加 Maven 依赖
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
2. 添加配置类
注册 DefaultKaptcha 到 IOC 容器中，在 config 包中，新建 KaptchaConfig 类：
package com.example.thymeleafstudy.config;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import com.google.code.kaptcha.util.Config;
import java.util.Properties;
@Component
public class KaptchaConfig {
@Bean
public DefaultKaptcha getDefaultKaptcha(){
com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
Properties properties = new Properties();
// 图片边框
properties.put("kaptcha.border", "no");
// 字体颜色
properties.put("kaptcha.textproducer.font.color", "black");
// 图片宽
properties.put("kaptcha.image.width", "160");
// 图片高
properties.put("kaptcha.image.height", "40");
// 字体大小
properties.put("kaptcha.textproducer.font.size", "30");
// 验证码长度
properties.put("kaptcha.textproducer.char.space", "5");
// 字体
properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
Config config = new Config(properties);
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
这里就是对生成的图片验证码的规则配置，如颜色、宽高、长度、字体等等，可以根据需求自行修改这些规则，之后就可以生成自己想要的验证码了。
3. 验证码的生成与显示
后端处理
在 controller 包中新建 KaptchaController，之后注入刚刚配置好的 DefaultKaptcha 类，然后就可以新建一个方法，在方法里可以生成验证码对象，并以图片流的方式写到前端以供显示，代码如下：
package com.example.thymeleafstudy.controller;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayOutputStream;
@Controller
public class KaptchaController {
@Autowired
private DefaultKaptcha captchaProducer;
@GetMapping("/kaptcha")
public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
byte[] captchaOutputStream;
ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();
try {
//生产验证码字符串并保存到session中
String verifyCode = captchaProducer.createText();
httpServletRequest.getSession().setAttribute("verifyCode", verifyCode);
var challenge = captchaProducer.createImage(verifyCode);
ImageIO.write(challenge, "jpg", imgOutputStream);
} catch (IllegalArgumentException e) {
httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
return;
}
captchaOutputStream = imgOutputStream.toByteArray();
httpServletResponse.setHeader("Cache-Control", "no-store");
httpServletResponse.setHeader("Pragma", "no-cache");
httpServletResponse.setDateHeader("Expires", 0);
httpServletResponse.setContentType("image/jpeg");
ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
responseOutputStream.write(captchaOutputStream);
responseOutputStream.flush();
responseOutputStream.close();
}
}
我们在控制器中新增了 defaultKaptcha() 方法，该方法所拦截处理的路径为 /kaptcha，在前端访问该路径后就可以接收到一个图片流并显示在浏览器页面的对应位置上。
前端处理
新建 kaptcha.html，放在 SpringBoot 的 /static 目录下，在该页面中显示验证码，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码显示</title>
</head>
<body>
<img src="/kaptcha"
onclick="this.src='/kaptcha?d='+new Date()*1">
</body>
</html>
访问后端验证码路径 /kaptcha，并将其返回显示在 img标签中，之后定义了 onclick 方法，在点击该 img 标签时可以动态的切换显示一个新的验证码，点击时访问的路径为 '/kaptcha?d='+new Date()*1，即原来的验证码路径后面带上一个时间戳参数，时间戳是会变化的，所以每次点击都会是一个与之前不同的请求，如果不这样处理的话，由于浏览器的机制可能并不会重新发送请求，无法实现刷新验证码的功能交互。
功能验证
启动 Spring Boot 项目，成功之后会在浏览器中输入如下地址 http://localhost:8080/kaptcha.html 进行验证，即可看到验证码图片，并且在每次点击验证码图片区域后也可以动态的切换为一张新的验证码图片。
4. 验证码的输入验证
验证码的显示完成后，我们接下来要做的就是对用户输入的验证码进行比对和验证，因为一般的做法就是后端生成后会对当前生成的验证码进行保存（可能是 session 中、或者缓存中、或者数据库中），之后显示到前端页面，用户在看到验证码之后在页面对应的输入框中填写验证码，之后才向后端发送请求，而后端再接到请求后会对用户输入的验证码进行验证，如果不对的话则不会进行后续操作，接下来我们来简单的实现一下这个流程。
后端处理
在 KaptchaController 类中新增 verify 方法，代码如下：
@GetMapping("/verify")
@ResponseBody
public String verify(@RequestParam("code") String code, HttpSession session) {
if (StringUtils.isEmpty(code)) {
return "验证码不能为空";
}
String kaptchaCode = session.getAttribute("verifyCode") + "";
if (StringUtils.isEmpty(kaptchaCode) || !code.equals(kaptchaCode)) {
return "验证码错误";
}
return "验证成功";
}
该方法所拦截处理的路径为 /verify，请求参数为 code，即用户输入的验证码，在进行基本的非空验证后，与之前保存在 session 中的 verifyCode 值进行比较，不同则返回验证码错误，相同则返回验证成功。
前端处理
新建 verify.html，该页面中显示验证码，同时有可以供用户输入验证码的输入框以及提交按钮，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码测试</title>
</head>
<body>
<img src="/kaptcha"
onclick="this.src='/kaptcha?d='+new Date()*1">
<input type="text" maxlength="5" id="code" placeholder="请输入验证码">
<button id="verify">验证</button>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#verify").click(function () {
var code = $("#code").val();
$.ajax({
type: 'GET',//方法类型
url: '/verify?code=' + code,
success: function (result) {
alert(result);
},
error: function () {
alert("请求失败");
}
});
})
});
</script>
</html>
用户在输入框中输入验证码后可以点击“验证”按钮，点击事件触发后执行 js 方法，该方法会获取到用户输入的验证码的值，并将其作为请求参数，之后进行 Ajax 请求，请求后会在弹框中显示后端返回的处理结果。
功能验证
编码后再次启动 Spring Boot 项目，成功之后会在浏览器中输入如下地址 http://localhost:8080/verify.html 进行验证，我们可以在输入框中输入左侧显示的验证码，之后点击验证按钮并进行相应的验证，如果输入的内容与验证码中的信息不同则返回验证码错误，如果输入正确的内容则会提示验证成功，验证结果与预期一致，本次实验完成。
总结
网站中验证码的功能逻辑也基本如此，虽然验证码的形式可能不同，比如滑块验证码、位置验证码、运算型验证码，但是验证逻辑也主要包括以下几点：
- 验证码的生成
- 验证码的显示
- 验证码的比对
扫一扫
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
