牛客网社区开发项目——2.5如何生成验证码_牛客论坛项目生成验证码-CSDN博客

本文链接：https://blog.csdn.net/zhangdaliya/article/details/113729551

本文介绍了如何在SpringBoot项目中集成Kaptcha库来生成动态验证码，并提供了详细的配置步骤。通过创建KaptchaConfig配置类，设置验证码的属性，然后在Controller中编写方法返回验证码图片。最后，在HTML页面中展示并使用JavaScript实现点击刷新验证码的功能。

摘要由CSDN通过智能技术生成

①导入生成相关的包kaptcha

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

这个包是一个普通包，spring boot并未对其做过整合，因此我们需要自行对其进行配置
②写一个配置类KaptchaConfig，配置好之后将这个类加载到spring容器中

@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","0,0,0");
        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;
    }
}

③在Controller类中单独写一个方法，向浏览器返回验证码图片

 @RequestMapping(path = "/kaptcha", method = RequestMethod.GET)
    public void getKaptcha(HttpServletResponse response, HttpSession session){
        //生成验证码
        String text = kaptchaProducer.createText();
        BufferedImage image = kaptchaProducer.createImage(text);
        //将验证码存入session
        session.setAttribute("text",text);
        //将验证码输出给浏览器
        response.setContentType("image/png");
        try {
            OutputStream os = response.getOutputStream();
            ImageIO.write(image,"png",os);
        } catch (IOException e) {
            logger.error("响应验证码失败："+e.getMessage());
        }
    }

④将动态生成验证码的图片配置到，login.html中
⑤用js实现，点击超链接就实现动态刷新功能

<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>