验证码功能:kaptcha生成验证码

embedded/2024/10/11 13:21:45/

结合 kaptcha生成验证码功能。

导入jar包
编写Kaptcha配置类
生成随机字符、生成图片

导包

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

编写配置类

java">   @Beanpublic 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");/*验证码产犊：4位*/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层

自动注入

java"> @Autowiredprivate Producer kaptchaProducer;

请求方法:详细注释

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

测试:输入请求路径，获得一张验证码图片，说明方法是没什么问题的。

引入登录页

引入验证码

测试完成后，可以在登录页面进行引入了，替换前端的静态图片。

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

只需要将其中的img路径换掉即可。

<img th:src="@{/kaptcha}" />

刷新验证码操作

替换超链接指向:refresh_kaptcha(）为刷新验证码的javascript方法

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

为了降低代码的复用性，将请求的项目路径放入全局JS中作为一个常量处理。

javascript">var CONTEXT_PATH = "/community";

javascript实现点击刷新验证码
javascript"><script>/*刷新验证码实现*/function refresh_kaptcha(){/*注意这里的/kaptcha和图片中的路径其实是一样的，为了防止浏览器误以为是同一个请求路径请求静态资源而被忽略，在后面加一些参数(参数本身对功能没有影响)*/var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();$("#kaptcha").attr("src",path);}</script>
注意这里的/kaptcha和图片中的路径其实是一样的，为了防止浏览器误以为是同一个请求路径请求静态资源而被忽略，在后面加一些参数(参数本身对功能没有影响)