spring boot集成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>Kaptchaservlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServletservlet-class>
    
    
    <init-param>
        <param-name>kaptcha.borderparam-name>
        <param-value>noparam-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.textproducer.font.colorparam-name>
        <param-value>redparam-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.image.widthparam-name>
        <param-value>135param-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.image.heightparam-name>
        <param-value>50param-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.textproducer.char.stringparam-name>
        <param-value>ACDEFHKPRSTWX3456975param-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.textproducer.font.sizeparam-name>
        <param-value>43param-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.noise.colorparam-name>
        <param-value>blackparam-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.textproducer.char.lengthparam-name>
        <param-value>4param-value>
    init-param>
    
    <init-param>
        <param-name>kaptcha.textproducer.font.namesparam-name>
        <param-value>Arialparam-value> 
    init-param>
servlet>


<servlet-mapping>
    <servlet-name>Kaptchaservlet-name>
    
    <url-pattern>/Kaptchaurl-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;

@Configuration
public 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.pengglegroupId>
    <artifactId>kaptchaartifactId>
    <version>2.3.2version>
dependency>

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

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;

@Configuration
public 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;
    }
}

在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图形验证码组件的完整使用过程

kaptcha图形验证码属性表

Constant	描述	默认值
kaptcha.border	图片边框，合法值：yes , no	yes
kaptcha.border.color	边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.	black
kaptcha.border.thickness	边框厚度，合法值：>0	1
kaptcha.image.width	图片宽	200
kaptcha.image.height	图片高	50
kaptcha.producer.impl	图片实现类	com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl	文本实现类	com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string	文本集合，验证码值从此集合中获取	abcde2345678gfynmnpwx
kaptcha.textproducer.char.length	验证码长度	5
kaptcha.textproducer.font.names	字体	Arial
kaptcha.textproducer.font.size	字体大小	40px.
kaptcha.textproducer.font.color	字体颜色，合法值： r,g,b 或者 white,black,blue.	black
kaptcha.textproducer.char.space	文字间隔	2
kaptcha.noise.impl	干扰实现类	com.google.code.kaptcha.impl.DefaultNoise
kaptcha.noise.color	干扰 颜色，合法值： r,g,b 或者 white,black,blue.	black
kaptcha.obscurificator.impl	图片样式： 水纹 com.google.code.kaptcha.impl.WaterRipple 鱼眼 com.google.code.kaptcha.impl.FishEyeGimpy 阴影com.google.code.kaptcha.impl.ShadowGimpy	com.google.code.kaptcha.impl.WaterRipple
kaptcha.background.impl	背景实现类	com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from	背景颜色渐变，开始颜色	grey
kaptcha.background.clear.to	背景颜色渐变， 结束颜色	white
kaptcha.word.impl	文字渲染器	com.google.code.kaptcha.text.impl.DefaultWordRenderer
kaptcha.session.key	session key	KAPTCHA_SESSION_KEY
kaptcha.session.date	session date	KAPTCHA_SESSION_DATE

Linux环境下kaptcha验证码乱码

Linux系统的字体资源远远没有windows来的丰富。微软雅黑、arial，arvo、consolas等字体资源Linux系统是没有提供的。所以kaptcha如果使用arial等字体就会出现乱码现象。

Linux系统具体提供了哪些字体可以到 /usr/share/fonts 目录下查看。

解决Linux环境下kaptcha验证码乱码的两种方式

1. 到本地 C:\Windows\Fonts 目录下将你想要的字体copy到Linux环境的 /usr/share/fonts 目录中

1. 使用Linux系统提供的字体，如cmr10、cmsy10、cmex10等字体。不要使用arial、consolas等Linux系统默认不提供的字体

扩展
spring boot集成kaptcha的另一种方式：spring boot + kaptcha 生成、校对 验证码

DefaultKaptcha生成验证码 + 服务器验证码乱码问题