SpringMVC 整合 kaptcha（验证码功能）

一、添加依赖

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

二、springmvc配置文件

<!-- kaptcha 验证码配置 -->
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
    <property name="config">
        <bean class="com.google.code.kaptcha.util.Config">
            <constructor-arg>
                <props>
                    <prop key="kaptcha.border">no</prop>
                    <prop key="kaptcha.textproducer.font.color">blue</prop>
                    <prop key="kaptcha.image.width">125</prop>
                    <prop key="kaptcha.image.height">45</prop>
                    <prop key="kaptcha.textproducer.font.size">40</prop>
                    <prop key="kaptcha.session.key">code</prop>
                    <prop key="kaptcha.textproducer.char.length">4</prop>
                    <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
                </props>
            </constructor-arg>
        </bean>
    </property>
</bean>

三、后端

package com.beovo.dsd.controller;

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.IOException;

/**
 * 验证码控制器
 * @author Jimc.
 * @since 2018/11/21.
 */
@Controller
public class CaptchaController {


    @Autowired
    private Producer captchaProducer;

    /**
     * 获取 kaptcha 验证码
     *
     * @param request
     * @param response
     * @throws Exception
     */
    @RequestMapping(value = "captcha")
    public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) {
        HttpSession session = request.getSession();
        response.setDateHeader("Expires", 0);
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        response.setHeader("Pragma", "no-cache");
        response.setContentType("image/jpeg");
        // 生成验证码
        String capText = captchaProducer.createText();
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        // 向客户端写出
        ServletOutputStream out = null;
        try {
            BufferedImage bi = captchaProducer.createImage(capText);
            out = response.getOutputStream();
            ImageIO.write(bi, "jpg", out);
            out.flush();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                if (out != null){
                    out.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

四、前端

<form>
    <fieldset>
        <ul>
            <li class="frame-style form-error">
                <label class="user-icon" for="username"></label>
                <input name="username" type="text" id="username"/>
                <i>用户名</i>
            </li>
            <li class="frame-style form-error">
                <label class="password-icon" for="password"></label>
                <input name="password" type="password" id="password"/>
                <i>密码</i>
            </li>
            <li class="frame-style form-error">
                <label class="captcha-icon" for="captcha"></label>
                <input name="captcha" type="text" id="captcha" class="captcha"/>
                <i>验证码</i>
                <div class="captcha-region">
                    <img src="${ctxPath}/captcha" id="img-captcha">
                </div>
            </li>

        </ul>
        <div class="space"></div>

        <div class="clearfix">
            <label class="inline">
                <input type="checkbox" class="ace">
                <span class="lbl">记住密码</span>
            </label>

            <button type="button" class="width-35 pull-right btn btn-sm btn-primary" onclick="login()">
                <i class="icon-key"></i>
                登录
            </button>
        </div>

        <div class="space-4"></div>
    </fieldset>
</form>
<script type="text/javascript">
    $(function () {
        $("#img-captcha").on('click', function () {
            $(this).attr('src', '${ctxPath}/captcha?' + Math.floor(Math.random() * 10000)).fadeIn();
        });
    })
</script>

五、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, Courier
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	背景颜色渐变，开始颜色	light 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