SpringBoot进阶教程(八十三)Kaptcha

Kaptcha是谷歌开源的一个可高度配置的比较老旧的实用验证码生成工具。它可以实现：(1)验证码的字体/大小颜色；(2)验证码内容的范围(数字，字母，中文汉字)；(3)验证码图片的大小，边框，边框粗细，边框颜色(4)验证码的干扰线验证码的样式(鱼眼样式、3D、普通模糊)。

v搭建架构

添加maven引用

        <dependency>

            <groupId>com.github.penggle</groupId>

            <artifactId>kaptcha</artifactId>

            <version>2.3.2</version>

        </dependency>

创建Kaptcha配置类

/**

 * @Author chen bo

 * @Date 2023/12

 * @Des

 */

@Configuration

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", "200");

        properties.put("kaptcha.image.height", "50");

        properties.put("kaptcha.textproducer.font.size", "25");

        properties.put("kaptcha.session.key", "verifyCode");

        properties.put("kaptcha.textproducer.char.space", "5");

        Config config = new Config(properties);

        defaultKaptcha.setConfig(config);

        return defaultKaptcha;

    }

}

此处配置的类可参考下方的配置表格：

常量	描述	默认值
kaptcha.border	图片边框，合法值：yes , no	yes
kaptcha.border.color	边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.	black
kaptcha.border.thickness	边框厚度，合法值：>0	1
kaptcha.image.width	图片宽	200
kaptcha.image.height	图片高	50
kaptcha.producer.impl	图片实现类	com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.font.size	文本实现类	com.google.code.kaptcha.text.impl.DefaultTextCreator
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.textproducer.char.length	验证码长度	5

创建controller

/**

 * @Author chen bo

 * @Date 2023/12

 * @Des

 */

@RestController

@RequestMapping("/demo")

@Slf4j

public class ImageController {

    @Autowired

    private DefaultKaptcha defaultKaptcha;

    @RequestMapping(path = "/kaptcha", method = RequestMethod.GET)

    public void getKaptcha(HttpServletResponse response, HttpSession session) {

        String text = defaultKaptcha.createText();

        BufferedImage image = defaultKaptcha.createImage(text);

        // 线上环境这个验证码肯定是要存redis里的，redis的key还需要设置一个合理的过期时间

        session.setAttribute("kaptcha", text);

        response.setContentType("image/png");

        try {

            ServletOutputStream os = response.getOutputStream();

            ImageIO.write(image, "png", os);

        } catch (IOException e) {

            log.error("响应验证码失败:" + e.getMessage());

        }

    }

    @CrossOrigin

    @RequestMapping(path = "/login", method = RequestMethod.POST)

    public String login(HttpSession session,  String kaptcha) {

        if(kaptcha.equals(session.getAttribute("kaptcha"))){

            return kaptcha + "验证码正确";

        }else{

            return kaptcha + "验证码错误";

        }

    }

}

添加登录页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function refresh_kaptcha() {

            var path = "http://localhost:8301/demo/kaptcha?p=" + Math.random();

            document.getElementById("kaptcha").src=path;

        }

        function login() {

            var xhr = new XMLHttpRequest;

            xhr.open('post', 'http://localhost:8301/demo/login');

            // post请求的参数要放在send方法中作为参数的 - 必须的字符串

            // post请求要带参数必须在send之前设置 头信息

            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

            // 数据在传送之前需要进行编码

            xhr.send('kaptcha=' + document.getElementById("kaptcha_value").value)

            xhr.onreadystatechange = function () {

                // 监听请求状态的变化 readystate (1-5 1准备发送 2 发送完成 3 发送完成数据准备接收 4数据

                if (xhr.readyState === 4) {

                    if (xhr.status >= 200 && xhr.status < 300) {

                        var res = xhr.responseText;

                        //res = JSON.parse(res)

                        alert(res);

                    }

                }

            }

        }

    </script>

</head>

<body>

<h3>请登录</h3>

<div class="col-sm-4">

    <input type="text" placeholder="请输入用户名" name="username" required="required"/>

    <br/>

    <input type="password" placeholder="请输入密码" name="password" required="required"/>

    <br/>

    <span style="display: inline">

            <input type="text" name="请输入验证码" id="kaptcha_value" placeholder="验证码" required="required"/>

            <img src="http://localhost:8301/demo/kaptcha" id="kaptcha" style="width:100px;height:50px;" class="mr-2"/>

            <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>

    </span>

    <br/>

    <button type="submit" onclick="login()">登录</button>

</div>

</body>

</html>

效果图

v自定义验证码文本生成器

创建自定义文本生成器

/**

 * @Author chen bo

 * @Date 2023/12

 * @Des

 */

public class CustomTextCreator extends DefaultTextCreator {

    private static final String[] Number = "0,1,2,3,4,5,6,7,8,9,10".split(",");

    @Override

    public String getText()

    {

        int result;

        Random random = new Random();

        int x = random.nextInt(10);

        int y = random.nextInt(10);

        StringBuilder suChinese = new StringBuilder();

        int randomOperand = (int) Math.round(Math.random() * 2);

        if (randomOperand == 0) {

            result = x * y;

            suChinese.append(Number[x]);

            suChinese.append("*");

            suChinese.append(Number[y]);

        } else if (randomOperand == 1) {

            if (!(x == 0) && y % x == 0) {

                result = y / x;

                suChinese.append(Number[y]);

                suChinese.append("/");

                suChinese.append(Number[x]);

            } else {

                result = x + y;

                suChinese.append(Number[x]);

                suChinese.append("+");

                suChinese.append(Number[y]);

            }

        } else if (randomOperand == 2) {

            if (x >= y) {

                result = x - y;

                suChinese.append(Number[x]);

                suChinese.append("-");

                suChinese.append(Number[y]);

            } else {

                result = y - x;

                suChinese.append(Number[y]);

                suChinese.append("-");

                suChinese.append(Number[x]);

            }

        } else {

            result = x + y;

            suChinese.append(Number[x]);

            suChinese.append("+");

            suChinese.append(Number[y]);

        }

        suChinese.append("=?@").append(result);

        return suChinese.toString();

    }

}

更新Kaptcha配置类

/**

 * @Author chen bo

 * @Date 2023/12

 * @Des

 */

@Configuration

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", "200");

//        properties.put("kaptcha.image.height", "50");

//        properties.put("kaptcha.textproducer.font.size", "25");

//        properties.put("kaptcha.session.key", "verifyCode");

//        properties.put("kaptcha.textproducer.char.space", "5");

//        Config config = new Config(properties);

//        defaultKaptcha.setConfig(config);

//

//        return defaultKaptcha;

//    }

    @Bean(name = "captchaProducerMath")

    public DefaultKaptcha getKaptchaBeanMath() {

        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();

        Properties properties = new Properties();

        // 是否有边框 默认为true 我们可以自己设置yes，no

        properties.setProperty("kaptcha.border", "yes");

        // 边框颜色 默认为Color.BLACK

        properties.setProperty("kaptcha.border.color", "105,179,90");

        // 验证码文本字符颜色 默认为Color.BLACK

        properties.setProperty("kaptcha.textproducer.font.color", "blue");

        // 验证码图片宽度 默认为200

        properties.setProperty("kaptcha.image.width", "160");

        // 验证码图片高度 默认为50

        properties.setProperty("kaptcha.image.height", "60");

        // 验证码文本字符大小 默认为40

        properties.setProperty("kaptcha.textproducer.font.size", "35");

        // KAPTCHA_SESSION_KEY

        properties.setProperty("kaptcha.session.key", "kaptchaCodeMath");

        // 验证码文本生成器

        properties.setProperty("kaptcha.textproducer.impl", "com.kaptcha.demo.util.CustomTextCreator");

        // 验证码文本字符间距 默认为2

        properties.setProperty("kaptcha.textproducer.char.space", "3");

        // 验证码文本字符长度 默认为5

        properties.setProperty("kaptcha.textproducer.char.length", "6");

        // 验证码文本字体样式 默认为new Font("Arial", 1, fontSize), new Font("Courier", 1,

        // fontSize)

        properties.setProperty("kaptcha.textproducer.font.names", "Arial,Courier");

        // 验证码噪点颜色 默认为Color.BLACK

        properties.setProperty("kaptcha.noise.color", "white");

        // 干扰实现类

        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");

        // 图片样式 水纹com.google.code.kaptcha.impl.WaterRipple

        // 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy

        // 阴影com.google.code.kaptcha.impl.ShadowGimpy

        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.ShadowGimpy");

        Config config = new Config(properties);

        defaultKaptcha.setConfig(config);

        return defaultKaptcha;

    }

}

创建CustomController

/**

 * @Author chen bo

 * @Date 2023/12

 * @Des

 */

@RestController

@Slf4j

@RequestMapping("/custom")

public class CustomController {

    @Autowired

    private Producer producer;

    public static final String DEFAULT_CODE_KEY = "random_code_";

    /**

     * @MethodName createCaptcha

     * @Description  生成验证码

     * @param httpServletResponse 响应流

     * @Author hl

     * @Date 2022/12/6 10:30

     */

    @GetMapping("/create")

    public void createCaptcha(HttpServletResponse httpServletResponse, HttpSession session) throws IOException {

        // 生成验证码

        String capText = producer.createText();

        String capStr = capText.substring(0, capText.lastIndexOf("@"));

        String result = capText.substring(capText.lastIndexOf("@") + 1);

        BufferedImage image = producer.createImage(capStr);

        // 保存验证码信息

        String randomStr = UUID.randomUUID().toString().replaceAll("-", "");

        System.out.println("随机数为:" + randomStr);

        //redisTemplate.opsForValue().set(DEFAULT_CODE_KEY + randomStr, result, 3600, TimeUnit.SECONDS);

        session.setAttribute("kaptcha", result);

        // 转换流信息写出

        FastByteArrayOutputStream os = new FastByteArrayOutputStream();

        try {

            ImageIO.write(image, "jpg", os);

        } catch (IOException e) {

            log.error("ImageIO write err", e);

            httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);

            return;

        }

        // 定义response输出类型为image/jpeg类型，使用response输出流输出图片的byte数组

        byte[] bytes = os.toByteArray();

        //设置响应头

        httpServletResponse.setHeader("Cache-Control", "no-store");

        //设置响应头

        httpServletResponse.setHeader("randomstr",randomStr);

        //设置响应头

        httpServletResponse.setHeader("Pragma", "no-cache");

        //在代理服务器端防止缓冲

        httpServletResponse.setDateHeader("Expires", 0);

        //设置响应内容类型

        ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();

        responseOutputStream.write(bytes);

        responseOutputStream.flush();

        responseOutputStream.close();

    }

}

效果图

v前后端验证码实现流程扩展

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

其他参考/学习资料：

v源码地址

https://github.com/toutouge/javademosecond/tree/master/kaptcha-demo

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

#comment_body_3242240 { display: none }

SpringBoot进阶教程(八十三)Kaptcha的更多相关文章

SpringBoot进阶教程(二十三)Linux部署Quartz
在之前的一篇文章中<SpringBoot(九)定时任务Schedule>,已经详细介绍了关于schedule框架的配置和使用,有收到一些朋友关于部署的私信,所以抽时间整理一个linux部署 ...
SpringBoot进阶教程(七十三)整合elasticsearch
Elasticsearch 是一个分布式.高扩展.高实时的搜索与数据分析引擎.它能很方便的使大量数据具有搜索.分析和探索的能力.充分利用Elasticsearch的水平伸缩性,能使数据在生产环境变得更 ...
SpringBoot进阶教程(六十三)Jasypt配置文件加密
数据库密码直接明文写在配置中,对安全来说,是一个很大的挑战.一旦密码泄漏,将会带来很大的安全隐患.尤其在一些企业对安全性要求很高,因此我们就考虑如何对密码进行加密.本文着重介绍Jasypt对Sprin ...
SpringBoot进阶教程(七十四)整合ELK
在上一篇文章<SpringBoot进阶教程(七十三)整合elasticsearch >,已经详细介绍了关于elasticsearch的安装与使用,现在主要来看看关于ELK的定义.安装及使用 ...
SpringBoot进阶教程(六十八)Sentinel实现限流降级
前面两篇文章nginx限流配置和SpringBoot进阶教程(六十七)RateLimiter限流,我们介绍了如何使用nginx和RateLimiter限流,这篇文章介绍另外一种限流方式---Senti ...
SpringBoot进阶教程(二十九)整合Redis 发布订阅
SUBSCRIBE, UNSUBSCRIBE 和 PUBLISH 实现了发布/订阅消息范例,发送者 (publishers) 不用编程就可以向特定的接受者发送消息 (subscribers). Ra ...
SpringBoot进阶教程(五十九)整合Codis
上一篇博文<详解Codis安装与部署>中,详细介绍了codis的安装与部署,这篇文章主要介绍介绍springboot整合codis.如果之前看过<SpringBoot进阶教程(五十二 ...
SpringBoot进阶教程 | 第四篇：整合Mybatis实现多数据源
这篇文章主要介绍,通过Spring Boot整合Mybatis后如何实现在一个工程中实现多数据源.同时可实现读写分离. 准备工作环境: windows jdk 8 maven 3.0 IDEA 创建 ...
SpringBoot进阶教程(六十一)intellij idea project下建多个module搭建架构(下)
在上一篇文章<SpringBoot进阶教程(六十)intellij idea project下建多个module(上)>中,我们已经介绍了在intellij idea中创建project之 ...
SpringBoot进阶教程(六十四)注解大全
在Spring1.x时代,还没出现注解,需要大量xml配置文件并在内部编写大量bean标签.Java5推出新特性annotation,为spring的更新奠定了基础.从Spring 2.X开始spri ...

随机推荐

MFC连接Access2007数据库
// TODO: 在此添加额外的初始化代码 //初始化ADO环境 if (!AfxOleInit()) { AfxMessageBox(L"OLE初始化失败"); return F ...
linux 操作系统下安装可视化界面
一.安装背景 1.小白一只,英文不熟.还很菜,面了几个实施,打击的体无完肤!so,人丑多读书吧. 2.安装环境: VMware + centos7 3.本着不懂就问的原则开始了--- 二.安装前准备 ...
Windows 设置 FRP 自动启动
由于 frps/frpc 不是 Windows 服务应用程序,因此我们不能直接使用 New-Service 命令创建 frps/frpc 服务.我们可以使用下面的方法将 frps/frpc 封装为 W ...
合合信息智能文字识别产品通过中国信通院“可信AI—OCR智能化服务”评估
近年来,我国对数据的重视程度不断加强.2022年1月,国务院印发的<"十四五"数字经济发展规划>进一步提出,到2025年要初步建立数据要素市场体系,并对充分发挥数据要素 ...
Identity – Permission Claims & UserClaimsPrincipalFactory
前言在 Identity – Authorize 有介绍过, Identity 的验证核心是 Claims. 在 Identity – Without Identity Framework 也看到了 ...
Linux下挂载SD卡，以及容易犯的误区
1.插入SD卡如果系统能够识别SD卡,则会打印一些信息: 2.查看系统给SD卡分配的设备名命令如下: fdisk -l 说明:通常是根据SD卡的存储容量来确定的. 比如下面的信息: 3.挂载SD卡 ...
XYD1006CSPS
T1 密钥 [关键结论,模拟,枚举] Description 给定两个长度为 \(n\) 的 \(01\) 序列 \(a\),\(b\),每个位置都有一个权值 \(c\), 每次操作可以将 \(a\) ...
逆向WeChat(七)
上篇介绍了如何通过嗅探MojoIPC抓包小程序的HTTPS数据. 本篇逆向微信客户端本地数据库相关事宜. 本篇在博客园地址https://www.cnblogs.com/bbqzsl/p/184235 ...
spring上 -基于Xml配置bean笔记
4,Spring 内容 7,快速入门需求:通过 Spring 的方式[配置文件], 获取 JavaBean: Monster 的对象, 并给该的对象属性赋值, 输出该对象信息. 代码结构: lib ...
强大的USB协议分析工具
2020年最后一天了,感谢大家一年来对我文章的支持,有你们的支持就是我强大的动力. 今天来给大家介绍一个USB 协议分析软件LeCroy USB Advisor,软件安装包下载连接如下: 链接:htt ...