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