如何在Spring Boot项目中生成图形验证码

黑客之家 07-16 1282

前言：

今天咱们对“前端图片验证码”大约比较关切，同学们都需要了解一些“前端图片验证码”的相关资讯。那么小编也在网上汇集了一些有关“前端图片验证码””的相关文章，希望兄弟们能喜欢，同学们一起来了解一下吧！

大家好！我是黑客之家小编，黑客之家头条号

分享黑客技术，GO、Python、Kotlin、Android、Java编程知识，科技资讯等

喜欢的朋友可以关注我的头条号！

图形验证码是我们经常会用到的，例如在app或者网站注册的时候，登录的时候等等。图形验证码属于验证码的一种。

图形验证码

验证码（CAPTCHA）是 “Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。

采用图形验证码是为了数据的安全，防止某些破解软件，进行无限尝试破解，图形的话，软件无法识别，或识别的慢，这样更加安全。

理论上图形验证码是比较安全的，但是随着技术的发展，特别是机器学习和人工智能技术的发展，图形验证码也变得不安全了，今天我们将要生成的数字字母组合的验证码，其实已经不够安全了，生成效果如下：

这种验证码还是容易被机器识别的，后续的文章中会介绍如何采用程序识别这类图形验证码。

接着说图形验证码的生成，今天我们采用的是kaptcha。kaptcha是一个可配置验证码生成工具包，我们按照kaptcha的配置表配置就可以了。

在使用kaptcha之前，要导入kaptcha的包，依赖如下：

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

在Spring Boot项目中新建一个KaptchaConfig.java文件，具体代码如下：

package com.example.demo.config;/** * Created by hacker on 2019-07-16. */import com.google.code.kaptcha.impl.DefaultKaptcha;import com.google.code.kaptcha.util.Config;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import java.util.Properties;/** * @author hacker */@Configurationpublic class KaptchaConfig { @Bean public DefaultKaptcha getDefaultKaptcha() { DefaultKaptcha defaultKaptcha = new DefaultKaptcha(); Properties properties = new Properties(); properties.setProperty("kaptcha.border", "yes"); properties.setProperty("kaptcha.border.color", "105,179,90"); properties.setProperty("kaptcha.textproducer.font.color", "blue"); properties.setProperty("kaptcha.image.width", "110"); properties.setProperty("kaptcha.image.height", "40"); properties.setProperty("kaptcha.textproducer.font.size", "30"); properties.setProperty("kaptcha.session.key", "code"); properties.setProperty("kaptcha.textproducer.char.length", "4"); properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑"); Config config = new Config(properties); defaultKaptcha.setConfig(config); return defaultKaptcha; }}

这样kaptcha的样式和颜色字体等就设置好了，接着就是生成图形上的字符，同时通过二进制流的形式把生成的图片返回给前端。

代码如下：

package com.example.demo.controller;import com.google.code.kaptcha.impl.DefaultKaptcha;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.imageio.ImageIO;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.awt.image.BufferedImage;/** * <p> * 用户信息表 前端控制器 * </p> * * @author hacker */@RestController@RequestMapping("/api/")public class UserInfoController { @Autowired private DefaultKaptcha captchaProducer; @GetMapping("/getVerifyCode") public void getVerifyCode(HttpServletRequest request, HttpServletResponse response) throws Exception { String createText = captchaProducer.createText(); request.getSession().setAttribute("verifyCode", createText); response.setHeader("Cache-Control", "no-store"); response.setHeader("Pragma", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); BufferedImage challenge = captchaProducer.createImage(createText); ServletOutputStream outputStream = response.getOutputStream(); ImageIO.write(challenge, "jpg", outputStream); try { outputStream.flush(); } finally { outputStream.close(); } }}

这样我们就可以用GET方式获取到生成的图形验证码了。

为了能在浏览器里显示我们这里采用thymeleaf模板。

在pom.xml文件中引入thymeleaf依赖如下：

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

之后在templates文件夹下新建一个index.html文件，代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CAPTCHA</title> <script type="text/javascript"> function refresh() { document.getElementById('captcha_img').src = "/api/getVerifyCode?" + Math.random(); } </script></head><body><div> <img id="captcha_img" alt="点击更换" title="点击更换" onclick="refresh()" src="/api/getVerifyCode"/></div></body></html>

这样一个简单前端显示图形验证码就做好了，之后我们输入，就可以访问了，8090换成自己对应的端口。

图形验证码

点击图片可以切换图形验证码。至此，图形验证码功能结束！

如果觉得文章对你有帮助，欢迎关注，点赞，转发，评论！后续文章会介绍如何通过程序识别今天生成的图形验证码，感兴趣的同学，可以持续关注！