图形验证码校验实现流程
1.应用场景
在项目开发中，有许多场景需要应用到图形验证码校验。最常见的场景之一是在用户登录时。为了提升安全性，通常会要求用户在提交登录表单时输入图形验证码。这样，验证码与其他表单数据一同发送到后端进行验证，可以有效防止恶意攻击，如暴力破解和自动化脚本登录。
除了登录场景，图形验证码还可应用于其他多个场景，包括：
- 获取手机验证码：现在很多客户端应用在用户注册时使用手机号绑定，避免过量垃圾账号影响。为了避免自动化脚本恶意攻击手机号获取接口带来不必要的流量浪费，可以通过图形验证码来进行人机校验。
- 找回密码：在用户请求找回密码时，要求输入图形验证码可以确保请求是由真实用户发起的，降低密码重置的风险。
- 评论和留言：在需要用户提交评论或留言的场合，添加图形验证码可以防止自动化工具生成大量垃圾评论，维护社区的健康环境。
2.整体思路
前端：
- 提供图形验证码显示区域与输入区域
- 向后端接口请求图形验证码数据（包括 验证码图片这里使用base64 和验证码对应的唯一key
- 接收验证码数据进行显示
- 对请求验证码操作设置防抖
后端：
- 封装生成验证码接口
- 避免生成接口的频繁访问
- 生成图形验证码
- 生成图形验证码对应的唯一key
- 设置验证码过期时间
- 返回验证码数据
- 校验验证码
- 验证码格式
- 是否过期
- 是否正确
总体思路： 前端请求验证码 => 后端校验是否频繁请求（频繁请求返回错误result ) => 非频繁则生成验证码和对应key =>
保存正确验证码 => 设置正确验证码到期时间 => 返回验证码数据（base64图片，key) => 前端接收数据显示图片=> 提交表单时携带通过图片输入的验证码和验证码key => 后端通过前端传入的key查询验证码（未查询到结果：验证码过期或key错误） => 查询到结果校验是否与用户输入的验证码匹配 => 匹配则证明验证码校验正确可以进行其它流程
3.具体实现
3.1技术栈简介
本实现流程基于后端 SpringBoot + 前端 Vue 来实现。用redis实现验证码过期逻辑
3.2 引入工具类
既然需要图形验证码功能，那么首先就需要引入一个可以生成图形验证码的工具类，这样的工具类有很多，如果你的项目引入了hotool那么也可以直接使用他提供的验证码生成工具类，更多就不一一介绍了，本文使用下面这个工具类。该工具类提供了默认的图片样式，也可以手动对样式进行更改。
/**
* 图形验证码生成
*/
public class VerifyUtil {
// 默认验证码字符集
private static final char[] chars = {
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'};
// 默认字符数量
private final Integer SIZE;
// 默认干扰线数量
private final int LINES;
// 默认宽度
private final int WIDTH;
// 默认高度
private final int HEIGHT;
// 默认字体大小
private final int FONT_SIZE;
// 默认字体倾斜
private final boolean TILT;
private final Color BACKGROUND_COLOR;
/**
* 初始化基础参数
*
* @param builder
*/
private VerifyUtil(Builder builder) {
SIZE = builder.size;
LINES = builder.lines;
WIDTH = builder.width;
HEIGHT = builder.height;
FONT_SIZE = builder.fontSize;
TILT = builder.tilt;
BACKGROUND_COLOR = builder.backgroundColor;
}
/**
* 实例化构造器对象
*
* @return
*/
public static Builder newBuilder() {
return new Builder();
}
/**
* @return 生成随机验证码及图片
* Object[0]：验证码字符串；
* Object[1]：验证码图片。
*/
public Object[] createImage() {
StringBuffer sb = new StringBuffer();
// 创建空白图片
BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
// 获取图片画笔
Graphics2D graphic = image.createGraphics();
// 设置抗锯齿
graphic.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// 设置画笔颜色
graphic.setColor(BACKGROUND_COLOR);
// 绘制矩形背景
graphic.fillRect(0, 0, WIDTH, HEIGHT);
// 画随机字符
Random ran = new Random();
//graphic.setBackground(Color.WHITE);
// 计算每个字符占的宽度，这里预留一个字符的位置用于左右边距
int codeWidth = WIDTH / (SIZE + 1);
// 字符所处的y轴的坐标
int y = HEIGHT * 3 / 4;
for (int i = 0; i < SIZE; i++) {
// 设置随机颜色
graphic.setColor(getRandomColor());
// 初始化字体
Font font = new Font(null, Font.BOLD + Font.ITALIC, FONT_SIZE);
if (TILT) {
// 随机一个倾斜的角度 -45到45度之间
int theta = ran.nextInt(45);
// 随机一个倾斜方向 左或者右
theta = (ran.nextBoolean() == true) ? theta : -theta;
AffineTransform affineTransform = new AffineTransform();
affineTransform.rotate(Math.toRadians(theta), 0, 0);
font = font.deriveFont(affineTransform);
}
// 设置字体大小
graphic.setFont(font);
// 计算当前字符绘制的X轴坐标
int x = (i * codeWidth) + (codeWidth / 2);
// 取随机字符索引
int n = ran.nextInt(chars.length);
// 得到字符文本
String code = String.valueOf(chars[n]);
// 画字符
graphic.drawString(code, x, y);
// 记录字符
sb.append(code);
}
// 画干扰线
for (int i = 0; i < LINES; i++) {
// 设置随机颜色
graphic.setColor(getRandomColor());
// 随机画线
graphic.drawLine(ran.nextInt(WIDTH), ran.nextInt(HEIGHT), ran.nextInt(WIDTH), ran.nextInt(HEIGHT));
}
// 返回验证码和图片
return new Object[]{sb.toString(), image};
}
/**
* 随机取色
*/
private Color getRandomColor() {
Random ran = new Random();
Color color = new Color(ran.nextInt(256), ran.nextInt(256), ran.nextInt(256));
return color;
}
/**
* 构造器对象
*/
public static class Builder {
// 默认字符数量
private int size = 4;
// 默认干扰线数量
private int lines = 10;
// 默认宽度
private int width = 80;
// 默认高度
private int height = 35;
// 默认字体大小
private int fontSize = 25;
// 默认字体倾斜
private boolean tilt = true;
//背景颜色
private Color backgroundColor = Color.LIGHT_GRAY;
public Builder setSize(int size) {
this.size = size;
return this;
}
public Builder setLines(int lines) {
this.lines = lines;
return this;
}
public Builder setWidth(int width) {
this.width = width;
return this;
}
public Builder setHeight(int height) {
this.height = height;
return this;
}
public Builder setFontSize(int fontSize) {
this.fontSize = fontSize;
return this;
}
public Builder setTilt(boolean tilt) {
this.tilt = tilt;
return this;
}
public Builder setBackgroundColor(Color backgroundColor) {
this.backgroundColor = backgroundColor;
return this;
}
public VerifyUtil build() {
return new VerifyUtil(this);
}
}
}
更改图片参数：
// 返回的数组第一个参数是生成的验证码，第二个参数是生成的图片
Object[] objs = VerifyUtil.newBuilder()
.setWidth(100) //设置图片的宽度
.setHeight(30) //设置图片的高度
.setSize(4) //设置字符的个数
.setLines(8) //设置干扰线的条数
.setFontSize(20) //设置字体的大小
.setTilt(true) //设置是否需要倾斜
.setBackgroundColor(Color.WHITE) //设置验证码的背景颜色
.build() //构建VerifyUtil项目
.createImage(); //生成图片
3.3 封装验证码生成接口
前端会发送一个获取图形验证码的get请求，这里在service层实现业务逻辑，以下是具体方法
/**
* 获取图形验证码
*
* @return verifyVO
*/
@Override
public VerifyVO getImgCode(HttpServletRequest request) throws IOException {
// 1.是否可以进行验证码获取
// 获取用户的 IP 地址
String clientIp = request.getRemoteAddr();
// 替换冒号 避免对数据库目录的影响
String sanitizedIp = clientIp.replace(":", "_");
// 存储到 Redis 在业务逻辑最后加上过期时间
Long temp = stringRedisTemplate.opsForSet().add(RedisConstant.VERIFY_IP + sanitizedIp, sanitizedIp);
if (temp == null || temp == 0) {
// 存储失败说明为频繁请求
throw new VerifyException(ExceptionConstant.OPERATE_FREQUENTLY);
}
// 2.获取一个验证码
Verify verify = new Verify();
Object[] obj = VerifyUtil.newBuilder().build().createImage();
verify.setCode(obj[0].toString());
// 将图片输出为 Base64 字符串
BufferedImage image = (BufferedImage) obj[1];
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(image, "png", baos);
byte[] imageBytes = baos.toByteArray();
String base64Image = Base64.getEncoder().encodeToString(imageBytes);
verify.setImg(base64Image);
// 3.生成验证码对应的唯一key
String key = UUID.randomUUID().toString();
verify.setKey(key);
// 4.将验证码存入redis 设置过期时间
stringRedisTemplate.opsForValue().set(RedisConstant.VERIFY_KEY+key, verify.getCode(),RedisConstant.VERIFY_TIMEOUT, TimeUnit.SECONDS);
// 5.将验证码获取者ip存入redis 设置过期时间 防止同一客户端频繁获取
stringRedisTemplate.expire(RedisConstant.VERIFY_IP + sanitizedIp,RedisConstant.VERIFY_COLD_TIME,TimeUnit.SECONDS);
// 6.返回验证码
VerifyVO verifyVO = new VerifyVO();
verifyVO.setKey(verify.getKey());
verifyVO.setImg(verify.getImg());
return verifyVO;
}
验证码类和验证码VO类：
/**
* 验证码
*/
@Data
public class Verify {
/**
* 验证码
*/
private String code;
/**
* 验证码图片
*/
private String img;
/**
* 验证码-key
*/
private String key;
}
@Data
public class VerifyVO {
/**
* 验证码图片
*/
private String img;
/**
* 验证码-key
*/
private String key;
}
3.4显示验证码
前端接收数据和显示都很简单,接收到数据后在需要显示的位置设置数据即可 注意src的格式为:src="'data:image/png;base64,' + base64Img"如果数据异常也可以通过v-if/else 加上默认图片
<img v-if="base64Img" :src="'data:image/png;base64,' + base64Img" alt="" @click="getVerify" class="verify-img">
<img v-else src="../../assets/code_fail.png" alt="" class="verify-img">
3.5 对验证码进行校验
将校验逻辑封装成方法，方便多次调用
传入的数据是code-前端传来的验证码数字和key后端传给前端由传递回来用于获取正确验证码的key和redis操作类
这里由于拷贝项目中代码，直接抛出了错误给全局异常处理
在校验成功后就可以进行业务流程的下一步操作了
public static void checkVerify(String code, String key, StringRedisTemplate stringRedisTemplate) {
// 先对格式进行校验
if (code == null || !code.matches("^[A-Za-z0-9]{4}$")) {
throw new VerifyException(ExceptionConstant.VERIFY_ERROR);
}
// 通过key获取验证码
String verify = stringRedisTemplate.opsForValue().get(RedisConstant.VERIFY_KEY + key);
if (verify == null) {
// 已过期或者前端再次传递的key不正确
throw new VerifyException(ExceptionConstant.VERIFY_TIMEOUT);
}
// 忽略大小写进行校验
if (!verify.equalsIgnoreCase(code)) {
stringRedisTemplate.delete(RedisConstant.VERIFY_KEY + key);
throw new VerifyException(ExceptionConstant.VERIFY_ERROR);
}
// 验证码只进行一次校验，无论失败成功都进行失效处理
stringRedisTemplate.delete(RedisConstant.VERIFY_KEY + key);
}
4.后续扩展
-
根据具体场景后续还可以采用更合理的避免验证码接口被频繁调用的方案。
-
提供音频验证码或滑块验证码等替代方案，以便于无障碍访问，满足不同用户的需求。
-
统计验证码请求和校验的成功与失败次数，分析这些数据以调整系统的安全策略。
本文到此结束，所有方案均用于日常学习，新手一枚还请看到的大佬多多指正~~~
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
