第二章（三）、生成验证码

目录

一、导入jar包

二、设置kaptcha的配置文件，将kaptcha的默认实现类DefaultKaptcha放入容器中

三、修改前端代码

四、controller完成验证码请求

---

一、导入jar包

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
	<groupId>com.github.penggle</groupId>
	<artifactId>kaptcha</artifactId>
	<version>2.3.2</version>
</dependency>

二、设置kaptcha的配置文件，将kaptcha的默认实现类DefaultKaptcha放入容器中

Producer就是Kaptcha的主体，是一个接口，DefaultKaptcha是Producer的默认实现类

@Configuration
public class KaptchaConfig {

    @Bean
    public Producer kaptchaProducer() {
        Properties properties = new Properties();
        properties.setProperty("kaptcha.image.width", "100");
        properties.setProperty("kaptcha.image.height", "40");
        properties.setProperty("kaptcha.textproducer.font.size", "32");
        properties.setProperty("kaptcha.textproducer.font.color", "black");
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");

        DefaultKaptcha kaptcha = new DefaultKaptcha();
        Config config = new Config(properties);
        kaptcha.setConfig(config);
        return kaptcha;
    }
}

三、修改前端代码

因为global.js是全局js文件，被所有html引用，所以在global.js中设置项目路径常量CONTEXT_PATH

var CONTEXT_PATH = "/community";

<div class="col-sm-4">
	<img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
	<a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
</div>

<script>
	function refresh_kaptcha() {
		var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();
		$("#kaptcha").attr("src", path);
    }
</script>

四、controller完成验证码请求

因为验证码刷新发送的是一个请求，所以要在controller中处理请求

利用Producer生成验证码的文本和图片，将文本内容存入session，以便下一步登陆时判断用户输入的验证码正确与否。

// 刷新验证码
@RequestMapping(value = "/kaptcha", method = RequestMethod.GET)
public void kaptcha(HttpServletResponse response, HttpSession session) {
    // 生成验证码文本
    String text = kaptchaProducer.createText();
    // 生成验证码图片
    BufferedImage image = kaptchaProducer.createImage(text);

    // 将验证码存入session
    session.setAttribute("kaptcha", text);

    // 将图片输出给浏览器
    // 首先设置服务器响应给客户端的文件的格式
    response.setContentType("image/png");
    try {
        // 获取字节流
        ServletOutputStream stream = response.getOutputStream();
        // 使用向浏览器输出图片的工具类
        ImageIO.write(image, "png", stream);
    } catch (IOException e) {
        logger.error("响应验证码失败" + e.getMessage());
    }
}