700字范文 > spring boot集成kaptcha图形验证码

spring boot集成kaptcha图形验证码

时间：2020-12-13 09:22:06

文章目录

环境变化引发的思考web.xml设置kaptcha图形验证码config设置kaptcha图形验证码kaptcha图形验证码完整教程kaptcha图形验证码属性表Linux环境下kaptcha验证码乱码解决Linux环境下kaptcha验证码乱码的两种方式

环境变化引发的思考

1. 以往Web应用程序开发中,集成kaptcha图形验证码的相关属性都是在web.xml文件中进行配置

2. spring boot默认是以jar包的方式启动嵌入式的servlet容器(Tomcat)来启动spring boot的web应用，没有web.xml

3. 🆗，问题来了！没有了web.xml, 是不是我们自定义的servlet类或外部引入的一些servlet类(例如KaptchaServlet)就无法注册到servlet容器中啦！

4. 肯定不会啦，spring那么优秀的开发团队肯定有把这些因素考虑到的，spring boot提供ServletRegistrationBean类供我们向servlet容器中注册servlet以获得完全控制

web.xml设置kaptcha图形验证码

🆗，也就是说，以往Web应用程序开发中，我们是这样集成kaptcha图形验证码

在web.xml中配置kaptcha组件

<servlet><servlet-name>Kaptcha</servlet-name><servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class><init-param><param-name>kaptcha.border</param-name><param-value>no</param-value></init-param><init-param><param-name>kaptcha.textproducer.font.color</param-name><param-value>red</param-value></init-param><init-param><param-name>kaptcha.image.width</param-name><param-value>135</param-value></init-param><init-param><param-name>kaptcha.image.height</param-name><param-value>50</param-value></init-param><init-param><param-name>kaptcha.textproducer.char.string</param-name><param-value>ACDEFHKPRSTWX3456975</param-value></init-param><init-param><param-name>kaptcha.textproducer.font.size</param-name><param-value>43</param-value></init-param><init-param><param-name>kaptcha.noise.color</param-name><param-value>black</param-value></init-param><init-param><param-name>kaptcha.textproducer.char.length</param-name><param-value>4</param-value></init-param><init-param><param-name>kaptcha.textproducer.font.names</param-name><param-value>Arial</param-value> </init-param></servlet><servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/Kaptcha</url-pattern></servlet-mapping>

config设置kaptcha图形验证码

spring boot没有web.xml，但spring boot提供了ServletRegistrationBean类供我们向servlet容器中注册servlet组件。

import com.google.code.kaptcha.servlet.KaptchaServlet;import org.springframework.boot.web.servlet.ServletRegistrationBean;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import javax.servlet.ServletException;@Configurationpublic class KaptchaConfiguration {//注册servlet@Bean(name = "kaptchaServlet")public ServletRegistrationBean servletRegistrationBean() throws ServletException {//注册KaptchaServlet类到servlet容器中，并指定映射路径ServletRegistrationBean servlet = new ServletRegistrationBean(new KaptchaServlet(), "/Kaptcha");/*配置Kaptcha相关初始化参数*///是否有边框servlet.addInitParameter("kaptcha.border","no");//字体颜色servlet.addInitParameter("kaptcha.textproducer.font.color","red");//字体大小servlet.addInitParameter("kaptcha.textproducer.font.size","33");//字体样式servlet.addInitParameter("kaptcha.textproducer.font.names","Arial");//使用哪些字符生成验证码servlet.addInitParameter("kaptcha.textproducer.char.string","1234567890abcdefgh");//图片验证码字符个数servlet.addInitParameter("kaptcha.textproducer.char.length","6");//图片宽度servlet.addInitParameter("kaptcha.image.width","135");//图片高度servlet.addInitParameter("kaptcha.image.height","50");//干扰线的颜色servlet.addInitParameter("kaptcha.noise.color","black");return servlet;}}

kaptcha图形验证码完整教程

接下来提供Kaptcha组件的完整使用过程：

pom.xml

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

注册KaptchaServlet，指定映射路径，并配置初始化参数

在html中添加验证码控件，并设置点击更新验证码的设置

<div class="item-inner"><div class="item-title label">验证码</div><input type="text" id="j_captcha" placeholder="验证码"><div class="item-input"><img id="captcha_img" alt="点击更换" title="点击更换"onclick="this.src='../Kaptcha?'+new Date()*1" src="../Kaptcha"/></div></div>

获取前端数据，并传输至后端

$(function () {$('#submit').click(function() {// 获取输入的帐号var username = $('#username').val();// 获取输入的密码var password = $('#password').val();// 获取表单输入的验证码var verifyCode = $('#j_captcha').val();// 判断输入的验证码是否为空if(!verifyCode){$.toast('请输入验证码!');return;}// 发送ajax异步请求$.ajax({url: '/o2o/local/account_bind', //请求地址type: "post", //指定Ajax请求方式data: {username : username,password : password,verifyCode : verifyCode}, //传输至后台的数据（json对象）dataType: 'json', //指定服务器返回的数据类型success: function(data) {//判断请求是否成功处理if (data.success) {//toast是一种轻量的提示，在页面中间显示，并且会在2秒(默认值，可修改)之后自动消失$.toast('提交成功！');window.location.href = '/o2o/shop_admin/shop_list';} else {$.toast('提交失败！' + data.errMsg);}//进行提交后,不管成功还是失败,都对验证码进行更新$('#captcha_img').click();}});});});

后端对应的路由方法接收数据，并进行处理

@RequestMapping("/account_bind")@ResponseBody //@ResponseBody注解会将这个方法的返回值转换为JSON类型数据，返回到response中,可以抽象理解成response.getWriter.write(JSON.toJSONString(map));private Map<String,Object> addLocalAccount(HttpServletRequest request){Map<String,Object> map = new HashMap<String, Object>();//验证码校验if(!VerifyCodeUtil.checkVerifyCode(request)){map.put("success",false);map.put("errorMsg","验证码错误!");return map;}map.put("success",true);return map;}

后端处理验证码的方法（该方法封装在VerifyCodeUtil 工具类中）

import com.google.code.kaptcha.Constants;import javax.servlet.http.HttpServletRequest;public class VerifyCodeUtil {public static boolean checkVerifyCode(HttpServletRequest request){//获取生产的验证码String verifyCodeGenerated = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);//获取实际提交的验证码String verifyCodeActual = HttpServletRequestUtil.getString(request,"verifyCode");//判断实际提交的验证码是否与生产的验证码是否一致if(verifyCodeActual == null && !verifyCodeActual.equals(verifyCodeGenerated)){return false;}return true;}}

🆗，这就是spring boot集成Kaptcha图形验证码组件的完整使用过程