🐋前言：在springboot的登陆页面中为了防止机器大规模注册，机器暴力破解数据密码等危害，需要验证随机生成的验证码。现提出两种简易方案生成验证码功能，一种采用springboot整合kaptcha第三方验证码生成工具的生成方案；另一种采用springboot整合第三方类库hutool生成验证码，验证成功跳转至success页面，失败则跳转false页面。基本实现方案如下：
🐬 目录:
🐇 效果一览(单击图片刷新验证码)
一、使用整合kaptcha方式实现验证码生成与验证
🐪 kaptcha是一个可高度适配的使用验证码生成工具，Kaptcha详细配置表如下：
| Constant | description | default |
|---|---|---|
| kaptcha.border | 图片边框，合法值：yes,no | yes |
| kaptcha.border.color | 边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue. | black |
| kaptcha.image.width | 图片宽 | 200 |
| kaptcha.image.height | 图片高 | 50 |
| kaptcha.producer.impl | 图片实现类 | com.google.code.kaptcha.impl.DefaultKaptcha |
| kaptcha.textproducer.impl | 文本实现类 | com.google.code.kaptcha.text.impl.DefaultTextCreator |
| kaptcha.textproducer.char.string | 文本集合，验证码值从此集合中获取 | abcde2345678gfynmnpwx |
| kaptcha.textproducer.char.length | 验证码长度 | 5 |
| kaptcha.textproducer.font.names | 字体 | Arial, Courier |
| kaptcha.textproducer.font.size | 字体大小 | 40px. |
| kaptcha.textproducer.font.color | 字体颜色，合法值： r,g,b 或者 white,black,blue. | black |
| kaptcha.textproducer.char.space | 文字间隔 | 2 |
| kaptcha.noise.impl | 干扰实现类 | com.google.code.kaptcha.impl.DefaultNoise |
| kaptcha.noise.color | 干扰 颜色，合法值： r,g,b 或者 white,black,blue. | black |
| kaptcha.obscurificator.impl | 图片样式： 水纹 com.google.code.kaptcha.impl.WaterRipple 鱼眼 com.google.code.kaptcha.impl.FishEyeGimpy 阴影 com.google.code.kaptcha.impl.ShadowGimpy | com.google.code.kaptcha.impl.WaterRipple |
| kaptcha.background.impl | 背景实现类 | com.google.code.kaptcha.impl.DefaultBackground |
| kaptcha.background.clear.from | 背景颜色渐变，开始颜色 | light grey |
| kaptcha.background.clear.to | 背景颜色渐变， 结束颜色 | white |
| kaptcha.word.impl | 文字渲染器 | com.google.code.kaptcha.text.impl.DefaultWordRenderer |
| kaptcha.session.key | session key | KAPTCHA_SESSION_KEY |
| kaptcha.session.date | session date | KAPTCHA_SESSION_DATE |
1.1 pom文件中导入kaptcha依赖
💬 新建springboot项目，并在其pom.xml中导入kaptcha依赖：
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
1.2 创建前端页面与跳转页面
💬 前端页面index.html
<h2>kaptcha验证码验证</h2>
<form action="/loginh" method="post">
<input type="text" name="verifyCode" placeholder="请输入验证码" required="true">
<img alt="单击图片刷新！" class="pointer" src="/common/kaptcha"
onclick="this.src='/common/kaptcha?d='+new Date()*1">
</br>
<button type="submit" value="submit">登陆</button>
</form>
💬 跳转页面success.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>success</h2>
</body>
</html>
1.3 实现后端代码
1.3.1 注入keptcha配置类
💬 创建配置类KaptchaConfig.java
package com.allin.config;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
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", "150");
properties.put("kaptcha.image.height", "40");
properties.put("kaptcha.textproducer.font.size", "30");
properties.put("kaptcha.session.key", "verifyCode");
properties.put("kaptcha.textproducer.char.space", "5");
Config config = new Config(properties);
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
1.3.2 创建后端控制类生成验证码
💬 创建控制类CommonController类,一方面通过流的方式将随机生成的验证码图片信息发送到前端浏览器；另一方面将验证码中的验证信息写入session中，以方便后续的验证
package com.allin.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.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
@Controller
public class CommonController {
@Autowired
private DefaultKaptcha captchaProducer;
@GetMapping("/common/kaptcha")
public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
byte[] captchaOutputStream = null;
ByteArrayOutputStream imgOutputStream = new ByteArrayOutputStream();
try {
//生产验证码字符串并保存到session中
String verifyCode = captchaProducer.createText();
httpServletRequest.getSession().setAttribute("verifyCode", verifyCode);
BufferedImage 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();
}
}
1.3.3 实现验证码的验证与页面跳转
💬 对前端输入的数据并发送到服务器的验证信息进行校验，当输入信息与验证码信息一致则跳转至success.html页面，否则跳转至false.html页面
@Controller
public class AdminController {
@PostMapping("/loginh")
public String loginByKaptcha(@RequestParam("verifyCode") String verifyCode,
HttpSession session){
String kaptchaCode = session.getAttribute("verifyCode") + "";
if(verifyCode.equals(kaptchaCode)){
return "success";
}
return "false";
}
}
一、使用hutool-captcha方式实现验证码生成与验证
🏆Hutool是一个Java工具包，也只是一个工具包，它帮助我们简化每一行代码，减少每一个方法，让Java语言也可以“甜甜的”。Hutool最初是我项目中“util”包的一个整理，后来慢慢积累并加入更多非业务相关功能，并广泛学习其它开源项目精髓，经过自己整理修改，最终形成丰富的开源工具集
1.1 pom文件中导入hutool-captcha依赖
💬 新建springboot项目，并在其pom.xml中导入hutool-captcha依赖：
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.1</version>
</dependency>
1.2 创建前端页面与跳转页面
💬 前端页面index.html
<h2>Hutool-captcha验证码验证</h2>
<form action="/loginc" method="post">
<input type="text" name="verifyCode" placeholder="请输入验证码" required="true">
<img alt="单击图片刷新!" class="pointer" src="/common/verify"
onclick="this.src='/common/verify?d='+new Date()*1">
</br>
<button type="submit" value="submit">登陆</button>
</form>
💬 跳转页面success.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>success</h2>
</body>
</html>
1.3 实现后端代码
1.3.1 创建后端控制类生成验证码
💬 创建控制类CommonController类,一方面通过流的方式将随机生成的验证码图片信息发送到前端浏览器；另一方面将验证码中的验证信息写入session中，以方便后续的验证
@RestController
public class HutoolController {
@GetMapping("/common/verify")
public void Verify(HttpServletRequest request,HttpServletResponse response) throws IOException {
//定义图形验证码的长、宽、验证码字符数、干扰线宽度
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(150, 40, 5, 4);
//图形验证码写出，可以写出到文件，也可以写出到流
captcha.write(response.getOutputStream());
//获取验证码中的文字内容
String verifyCode = captcha.getCode();
request.getSession().setAttribute("verifyCode",verifyCode);
}
1.3.3 实现验证码的验证与页面跳转
💬 对前端输入的数据并发送到服务器的验证信息进行校验，当输入信息与验证码信息一致则跳转至success.html页面，否则跳转至false.html页面
@Controller
public class AdminController {
@PostMapping("/loginc")
public String loginByHutool(@RequestParam("verifyCode") String verifyCode,
HttpSession session){
String captchaCode = session.getAttribute("verifyCode") + "";
if(verifyCode.equals(captchaCode)){
return "success";
}
return "false";
}
}