前后端分离java开发图形验证码+谷歌开源Kaptcha使用(Springboot+redis实现图形验证码校验)

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: 前后端分离java开发图形验证码+谷歌开源Kaptcha使用(Springboot+redis实现图形验证码校验)

1.背景

注册-登录-修改密码一般需要发送验证码,但是容易被攻击恶意调用。

1.1 什么是短信-邮箱轰炸机

手机短信轰炸机是批量、循环给手机无限发送各种网站的注册验证码短信的方法。

1.2 公司带来的损失

短信一条5分钱,如果被大盗刷大家自己计算邮箱通知不用钱,但被大盗刷,带宽、连接等都被占用,导致无法正常使用。

2.如何避免自己的网站成为"肉鸡“或者被刷呢

  • 增加图形验证码(开发人员)
    图形验证码(CAPTCHA),是Completely Automated Public Turing Test to Tell Computers and Humans Apart (全自动区分计算机和人类的图灵测试)的简称。其本质是-种区分用户是计算机还是人的公共全自动程序。可以有效的防止某些特定程序以暴力方式不断进行登录尝试。验证码的不断发展其实是随着其破解功能的逐步强大而跟着演进的,这是一个攻防博弈的精彩世界。
  • 单IP请求次数限制(开发人员)
  • 限制号码发送(一般短信提供商会做)
  • 攻防永远是有的,只过加大了攻击者的成本,ROI划不过来自然就放弃了

3.表单重复提交问题

  1. 用户正常提交,由于网络延迟等原因,未收到服务器的响应,这时,用户着急多点了几次提交操作,会造成表单重复提交。
  2. 用户正常提交,服务器也没有延迟,但是提交完成后,用户回退浏览器。重新提交,也会造成表单重复提交。

这两个表单重复提交问题的解决方案:验证码

4.Kaptcha框架介绍

谷歌开源的一个可高度配置的实用验证码生成工具:

  • 验证码的字体/大小颜色
  • 验证码内容的范围(数字,字母,中文汉字!)
  • 验证码图片的大小,边框,边框粗细,边框颜色
  • 验证码的干扰线验证码的样式(鱼眼样式、3D、 普通模糊)

5.前后端分离验证码实战开发-思路分析

这里以修改密码为例,规则是修改用户密码必须一同将验证码传给后端,如果验证码失效或者错误都需要重新生成并获取验证码。

  1. 前端向后端请求验证码。
  2. 后端通过谷歌开源工具Kaptcha生成图形验证码(实际是5个随机字符),缓存到redis,key键可以是 业务+用户id,value值就是那5个随机字符。设置TTL为2分钟。
  3. 后端将图形验证码转base64编码字符串,将该字符串返回给前端。
  4. 前端解析base64编码的字符串,即可在页面上显示图形验证码。
  5. 用户输入密码与验证码后提交表单到后端。
  6. 后端根据业务和用户id组成的key键到redis查找缓存的验证码信息,会有如下情况:
  • 如果redis返回为空,则通知前端验证码失效,需要重新获取验证码。
  • 如果redis返回不为空,但是不相等,说明验证码输入错误。则删除redis中对应验证码缓存,通知前端验证码错误,需要重新获取验证码。
  • 如果redis返回不为空,并且相等,则校验成功,就删除redis中对应验证码缓存,并在mysql中修改密码。最后通知前端修改成功。

6.前后端分离验证码实战开发-后端代码

5.1 pom.xml核心依赖

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

5.2 KaptchaConfig配置类

package com.zhulang.waveedu.sms.config;
import com.google.code.kaptcha.Producer;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.util.Properties;
/**
 * 谷歌提供的图片验证码kaptcha
 *
 * @author 狐狸半面添
 * @create 2023-01-29 11:02
 */
@Configuration
public class KaptchaConfig {
    @Bean
    public Producer kaptcha() {
        Properties properties = new Properties();
        /*
            设置图片有边框并且为蓝色
            properties.setProperty("kaptcha.border", "no");
            properties.setProperty("kaptcha.border.color", "blue");
         */
        // 设置图片无边框
        properties.setProperty("kaptcha.border", "no");
        // 背景颜色渐变开始,这里设置的是rgb值156,156,156
        properties.put("kaptcha.background.clear.from", "156,156,156");
        // 背景颜色渐变结束,这里设置以白色结束
        properties.put("kaptcha.background.clear.to", "white");
        // 字体颜色,这里设置为黑色
        properties.put("kaptcha.textproducer.font.color", "black");
        // 文字间隔,这里设置为10px
        properties.put("kaptcha.textproducer.char.space", "10");
        /*
            如果需要去掉干扰线,则如此配置:
            properties.put("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
         */
        // 干扰线颜色配置,这里设置成了idea的Darcula主题的背景色
        properties.put("kaptcha.noise.color", "43,43,43");
        // 字体
        properties.put("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        // 图片宽度,默认也是200px
        properties.setProperty("kaptcha.image.width", "200");
        // 图片高度,默认也是50px
        properties.setProperty("kaptcha.image.height", "50");
        // 从哪些字符中产生
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789abcdefghijklmnopqrsduvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");
        // 字符个数
        properties.setProperty("kaptcha.textproducer.char.length", "5");
        Config config = new Config(properties);
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

5.3 CaptchaServiceController生成与获取验证码

  • RedisCacheUtils是一个自定义的redis缓存工具类
  • RedisConstants是一个redis常量类,主要是设置缓存key前缀与TTL
  • UserHolderUtils.getUserId():通过自定义UserHolderUtils工具类获取用户id(通过token从redis获取用户信息,包括了userId)
package com.zhulang.waveedu.sms.controller;
import com.google.code.kaptcha.Producer;
import com.zhulang.waveedu.common.constant.RedisConstants;
import com.zhulang.waveedu.common.entity.Result;
import com.zhulang.waveedu.common.util.RedisCacheUtils;
import com.zhulang.waveedu.common.util.UserHolderUtils;
import org.apache.tomcat.util.codec.binary.Base64;
import org.springframework.util.FastByteArrayOutputStream;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
/**
 * 生成图片验证码
 *
 * @author 狐狸半面添
 * @create 2023-01-29 17:35
 */
@RestController
@RequestMapping("/captcha")
public class CaptchaServiceController {
    @Resource
    private Producer producer;
    @Resource
    private RedisCacheUtils redisCacheUtils;
    /**
     * 获取修改密码的图片验证码base64编码
     * 并缓存至redis中
     *
     * @return base编码
     */
    @GetMapping("/pwd/vc.jpg")
    public Result getPwdCaptcha(){
        // 1.生成验证码字符
        String text = producer.createText();
        // 2.生成图片
        BufferedImage bi = producer.createImage(text);
        FastByteArrayOutputStream fos = new FastByteArrayOutputStream();
        try {
            ImageIO.write(bi, "jpg", fos);
            // 3.缓存至 redis 中
            redisCacheUtils.setCacheObject(RedisConstants.PWD_CODE_KEY+ UserHolderUtils.getUserId(),text,RedisConstants.PWD_CODE_TTL);
            // 4.返回验证码图片的base64编码
            String imgEncode = Base64.encodeBase64String(fos.toByteArray());
            fos.flush();
            return Result.ok(imgEncode);
        }catch (Exception e){
            return Result.error();
        }finally {
            fos.close();
        }
    }
}

5.4 修改密码验证码校验代码

package com.zhulang.waveedu.basic.vo;
import com.zhulang.waveedu.common.util.RegexUtils;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Pattern;
/**
 * 修改密码时的VO
 *
 * @author 狐狸半面添
 * @create 2023-01-29 22:09
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class UpdatePwdVO {
    /**
     * 第一次输入的密码
     */
    @NotBlank(message = "输入密码为空")
    @Pattern(regexp = RegexUtils.RegexPatterns.PASSWORD_REGEX, message = "密码格式错误,应为8-16位的数字或字母")
    private String firPassword;
    /**
     * 第二次输入的密码(确认密码)
     */
    @NotBlank(message = "输入密码为空")
    @Pattern(regexp = RegexUtils.RegexPatterns.PASSWORD_REGEX, message = "密码格式错误,应为8-16位的数字或字母")
    private String secPassword;
    /**
     * 图片验证码字符
     */
    @NotBlank(message = "验证码为空")
    @Pattern(regexp = RegexUtils.RegexPatterns.CAPTCHA_CODE_REGEX, message = "验证码格式错误")
    private String code;
}
/**
 * User登录,注册,推出登录,注销的控制器
 *
 * @author 狐狸半面添
 * @create 2023-01-17 23:14
 */
@RestController
@RequestMapping("/user")
public class UserController {
    /**
     * 修改密码
     *
     * @param updatePwdVO 两个密码+code
     * @return 修改情况
     */
    @PutMapping("/updatePwd")
    public Result updatePwd(@Validated @RequestBody UpdatePwdVO updatePwdVO){
        return userService.updatePwd(updatePwdVO);
    }
}
/**
 * ServiceImpl实现了IService,提供了IService中基础功能的实现
 * 若ServiceImpl无法满足业务需求,则可以使用自定的UserService定义方法,并在实现类中实现
 *
 * @author 狐狸半面添
 * @create 2023-01-17 23:31
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    @Resource
    private RedisCacheUtils redisCacheUtils;
    @Override
    public Result updatePwd(UpdatePwdVO updatePwdVO) {
        // 1.如果两个密码不一致,则返回error
        if (!updatePwdVO.getFirPassword().equals(updatePwdVO.getSecPassword())){
            return Result.error(HttpStatus.HTTP_VERIFY_FAIL.getCode(), "两次密码不一致");
        }
        // 2.校验验证码是否正确
        String code = redisCacheUtils.getCacheObject(RedisConstants.PWD_CODE_KEY + UserHolderUtils.getUserId());
        // 2.1 不存在则返回
        if (code==null){
            return Result.error(HttpStatus.HTTP_VERIFY_FAIL.getCode(),"验证码已失效,请重新获取");
        }
        // 2.2 存在但不一致则清除并返回(忽略大小写)
        if (!code.equalsIgnoreCase(updatePwdVO.getCode())){
            redisCacheUtils.deleteObject(RedisConstants.PWD_CODE_KEY + UserHolderUtils.getUserId());
            return Result.error(HttpStatus.HTTP_VERIFY_FAIL.getCode(),"验证码错误,请重新获取");
        }
        // 3.验证码正确,则从缓存中移除
        redisCacheUtils.deleteObject(RedisConstants.PWD_CODE_KEY + UserHolderUtils.getUserId());
        // 4.修改密码
        LambdaUpdateWrapper<User> wrapper = new LambdaUpdateWrapper<>();
        wrapper.eq(User::getId,UserHolderUtils.getUserId())
            .set(User::getPassword,PasswordEncoderUtils.encode(updatePwdVO.getFirPassword()));
        this.update(wrapper);
        // 5.返回
        return Result.ok();
    }
}

5.5 测试图片验证码生成

我们对这段Base64进行解码,这里就使用一个在线工具:base64图片在线转换工具 - 站长工具 (chinaz.com)

📍 注意需要在上图中得到的字符串前面指定转换格式:data:image/jpg;base64,

7.验证码未来发展的讨论

验证码技术其实是一个攻防博弈的动态发展的技术,因此,随着验证码发展得越来越安全,相应的破解技术也跟着不断发展,随之而来的,是双方的

资源成本越来越高。

例如对于互联网应用来说,商业验证码、短信验证码等这些验证码,如果应用的业务流程控制不好,很容易被羊毛党、黑客等人利用,造成成本极大浪费。而网上逐渐出现的各种奇葩验证码,人眼难辨,也让很多正常用户叫苦不迭。

对于破解方来说,随着机器学习以及人工打码等技术的不断发展,可选择的技术手段也越来越多。验证码技术,也在破解方的大量资源投入下,变得越来越鸡肋。并且,很多互联网应用逐渐复杂的验证方式,安全性提高的同时,也提高了很多正常用户的使用门槛,成为了各种电信诈骗的温床。验证码技术逐渐开始偏离了最初的初衷。

而未来的验证码技术,一方面,会通过引入更多的验证元素来进一步提高验证码的安全性,例如刷脸、刷指纹、语音交互、点选你购买过的商品等。另一方面,通过对行为式验证码的研究逐渐深入,可以从传统的面向结果的验证,转化成面向过程的行为验证,并逐渐减少人工参与,降低关键信息被劫持的风险,形成更多对用户无感知的验证方式。例如分析用户鼠标轨迹、按键频率、使用习惯等。

总之,验证码技术,是一个所有人都将亲身参与的精彩世界。


相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
13天前
|
NoSQL 算法 Java
Java Redis多限流
通过本文的介绍,我们详细讲解了如何在Java中使用Redis实现三种不同的限流策略:固定窗口限流、滑动窗口限流和令牌桶算法。每种限流策略都有其适用的场景和特点,根据具体需求选择合适的限流策略可以有效保护系统资源和提高服务的稳定性。
37 18
|
20天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
6天前
|
监控 JavaScript 数据可视化
建筑施工一体化信息管理平台源码,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
智慧工地云平台是专为建筑施工领域打造的一体化信息管理平台,利用大数据、云计算、物联网等技术,实现施工区域各系统数据汇总与可视化管理。平台涵盖人员、设备、物料、环境等关键因素的实时监控与数据分析,提供远程指挥、决策支持等功能,提升工作效率,促进产业信息化发展。系统由PC端、APP移动端及项目、监管、数据屏三大平台组成,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
|
1月前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
116 13
|
29天前
|
前端开发 Java 测试技术
java日常开发中如何写出优雅的好维护的代码
代码可读性太差,实际是给团队后续开发中埋坑,优化在平时,没有那个团队会说我专门给你一个月来优化之前的代码,所以在日常开发中就要多注意可读性问题,不要写出几天之后自己都看不懂的代码。
62 2
|
Java 开发工具 git
Java开发初级6.24.3
5.在Git使用过程中,进行Git配置的操作命令是哪个() A. config B. config -g C. config -a D. git config 相关知识点: 在git中,经常使用git config 命令用来配置git的配置文件,git配置级别主要有:仓库级别 local 【优先级最高】、用户级别 global【优先级次之】、系统级别 system【优先级最低】 正确答案:D 10.RDBMS是什么? A. Rela Database Management Systems B. Relational Database Management Systems C. Relation
143 0
|
SQL 前端开发 JavaScript
Java开发初级6.24.2
3.Java网站src/main/java目录保存的是什么资源? A. Java源代码文件 B. 测试代码 C. JavaScript、CSS等文件 D. 图片资源 正确答案:A 4.什么是索引Index? A. SQL数据库里的表管理工具 B. SQL数据库里的查询工具 C. SQL数据库里的目录工具 D. SQL数据库用来加速数据查询的特殊的数据结构 正确答案:D
152 0
|
Java
Java开发初级6.24.1
1.下面关于泛型的描述中错误的一项是? A. “? extends 类”表示设置泛型上限 B. “? super 类”表示设置泛型下限 C. 利用“?”通配符可以接收全部的泛型类型实例,但却不可修改泛型属性内容 D. 如果类在定义时使用了泛型,则在实例化类对象时需要设置相应的泛型类型,否则程序将无法编译通过 相关知识点: https://edu.aliyun.com/course/35 正确答案:D 2.下列选项中属于SVN中控制鉴权用户访问版本库的权限默认权限的是() A. write B. read C. none D. null 相关知识点: auth-access:取值范围为"writ
246 0
|
Java 开发工具 git
Java开发初级6.23.3
5.在Git使用过程中,进行Git配置的操作命令是哪个() A. config B. config -g C. config -a D. git config 相关知识点: 在git中,经常使用git config 命令用来配置git的配置文件,git配置级别主要有:仓库级别 local 【优先级最高】、用户级别 global【优先级次之】、系统级别 system【优先级最低】 正确答案:D 10.RDBMS是什么? A. Rela Database Management Systems B. Relational Database Management Systems C. Relation
135 0
|
SQL 前端开发 JavaScript
Java开发初级6.23.2
3.Java网站src/main/java目录保存的是什么资源? A. Java源代码文件 B. 测试代码 C. JavaScript、CSS等文件 D. 图片资源 正确答案:A 4.什么是索引Index? A. SQL数据库里的表管理工具 B. SQL数据库里的查询工具 C. SQL数据库里的目录工具 D. SQL数据库用来加速数据查询的特殊的数据结构 正确答案:D
232 0