java滑动验证码设计思路 java 滑动验证码

转载

mob64ca140f29e5 2023-08-09 10:32:18

文章标签 java滑动验证码设计思路 java redis 缓存 spring 文章分类 Java 后端开发

Java实现拖拉/滑动图片验证码

环境条件

JDK1.8
MAVEN-3.3
spring-boot-2.1.17.RELEASE
Redis

源码+DEMO+单元测试下载地址（有问题可关注并私信博主解决）

用户行为验证码（拖动图片）

实现思路

1.一个文件夹存储大小一致的背景图；另外一个文件存储高度跟背景图一致，但是宽度不一致的拖动图（需要UI将空白位置设置为透明）;上述两文件夹支持可配置路径和容错的默认路径.

java滑动验证码设计思路 java 滑动验证码_spring

java滑动验证码设计思路 java 滑动验证码_spring_02

java滑动验证码设计思路 java 滑动验证码_spring_03

2.项目启动完成时一次性全部背景图和拖动图转为字节或Base64缓存起来(可改为redis)；前端请求图片验证码时候在随机取缓存中的一张背景图片和一张拖动图。

private void cacheBackgroundImage(){
        if(StrUtil.isNotBlank(config.getBackgroundImagePath())&& FileUtil.isDirectory(config.getBackgroundImagePath())){
            log.info("开始加载文件路径为:{}的拖拉验证码背景图..",config.getBackgroundImagePath());
            for(File file :FileUtil.loopFiles(config.getBackgroundImagePath())){
                if(file.isDirectory()){
                    continue;
                }
                BASE64_BACKGROUND_IMAGE.put(file.getName(), Base64.encode(file));
            }
            log.info("完成加载文件路径为:{}的拖拉验证码背景图..",config.getBackgroundImagePath());
        }
        //加载默认的背景图
        if(BASE64_BACKGROUND_IMAGE.isEmpty()){
            log.info("开始加载默认路径为:defaultImage/background/的5张拖拉验证码背景图..");
            BASE64_BACKGROUND_IMAGE.put("1.jpg",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/1.jpg"),true)));
            BASE64_BACKGROUND_IMAGE.put("2.jpg",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/2.jpg"),true)));
            BASE64_BACKGROUND_IMAGE.put("3.jpg",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/3.jpg"),true)));
            BASE64_BACKGROUND_IMAGE.put("4.jpg",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/4.jpg"),true)));
            BASE64_BACKGROUND_IMAGE.put("5.jpg",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/background/5.jpg"),true)));
            log.info("完成加载默认路径为:defaultImage/background/的5张拖拉验证码背景图..");
        }
    }

    private void cacheDraggedImage(){
        if(StrUtil.isNotBlank(config.getDraggedImagePath()) && FileUtil.isDirectory(config.getDraggedImagePath())){
            log.info("开始加载文件路径为:{}的拖拉验证码拼图..",config.getDraggedImagePath());
            for(File file :FileUtil.loopFiles(config.getDraggedImagePath())){
                if(file.isDirectory()){
                    continue;
                }
                BASE64_DRAGGED_IMAGE.put(file.getName(), Base64.encode(file));
            }
            log.info("完成加载文件路径为:{}的拖拉验证码拼图..",config.getDraggedImagePath());
        }
        //加载默认的拼图
        if(BASE64_DRAGGED_IMAGE.isEmpty()){
            log.info("开始加载默认路径为:defaultImage/dragged/的11张拖拉验证码拼图..");
            BASE64_DRAGGED_IMAGE.put("1.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/1.png"),true)));
            BASE64_DRAGGED_IMAGE.put("2.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/2.png"),true)));
            BASE64_DRAGGED_IMAGE.put("3.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/3.png"),true)));
            BASE64_DRAGGED_IMAGE.put("4.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/4.png"),true)));
            BASE64_DRAGGED_IMAGE.put("5.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/5.png"),true)));
            BASE64_DRAGGED_IMAGE.put("6.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/6.png"),true)));
            BASE64_DRAGGED_IMAGE.put("7.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/7.png"),true)));
            BASE64_DRAGGED_IMAGE.put("8.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/8.png"),true)));
            BASE64_DRAGGED_IMAGE.put("9.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/9.png"),true)));
            BASE64_DRAGGED_IMAGE.put("10.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/10.png"),true)));
            BASE64_DRAGGED_IMAGE.put("11.png",Base64.encode(IoUtil.readBytes(
                    ClassUtil.getClassLoader().getResourceAsStream("defaultImage/dragged/11.png"),true)));
            log.info("完成加载默认路径为:defaultImage/dragged/的11张拖拉验证码拼图..");
        }
        
    }

3.以拖动图大少新建一张背景为透明的拖动图，以背景图的宽度和拖拉图宽度为基础随机生成一个背景图的抠图X1开始坐标。循环拖拉图的每个像素，如果这个坐标X:Y为非透明的RGB，采集背景X1+X：Y的RGB并设置到新建的拖拉图，在设置背景图 X1+1:Y坐标的RGB为黑色(也可用高斯模糊算法去模糊)。将已抠图的背景图和新建的拖动图BASE64返回前端+额外一个令牌；且用Redis以令牌为key对该随机开始抠图的坐标X1存储和根据配置设置过期时间（默认3分钟，为图片验证码的有效期）

int pointX = createPointX(backgroundImageWidth,draggedImageWidth,backgroundImageHeight,draggedImageHeight);
for(int i=0;i<draggedImageWidth;i++){
    for (int j=0;j<draggedImageHeight;j++){
        int rgb = draggedImageTemplate.getRGB(i,j);
        if(rgb <0){//非透明
            int backgroundRGB = backgroundImage.getRGB(pointX+i,j);
            draggedImage.setRGB(i,j,backgroundRGB);
            backgroundImage.setRGB(pointX+i,j,Color.DARK_GRAY.getRGB());
        }
    }
}

java滑动验证码设计思路 java 滑动验证码_redis_04