o2o(4)之Kaptcha生成验证码

代码基于suimobile+ssm框架编写，利用Kaptcha插件生成图片验证码用于登录注册验证。 

1.引入pom.xml依赖

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

2.配置web.xml文件

<!-- 验证码 -->
    <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.textproducer.font.size</param-name>
            <param-value>43</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>ACDEFHKPRSTWX345679</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>

3. 前端代码

kaptcha.html:

<!-- 验证码 kaptcha-->
<li>
  <div class="item-content">
     <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="changeVerifyCode(this)" src="../Kaptcha" />
        </div>
    </div>
  </div>
</li>

kaptcha.js:

$('#submit').click(function(){
　　var formData = new FormData();
　　var verifyCodeActual = $('#j_captcha').val();
        if(!verifyCodeActual){
            $.toast('请输入验证码！');
            return ;
        }
        formData.append('verifyCodeActual',verifyCodeActual);
        //提交
        $.ajax({
            url:registerUrl,
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,
            cache:false,
            success:function(data){
                if(data.success){
                    $.toast('提交成功！');
                } else {
                    $.toast('提交失败！' + data.Msg);
                }
                //成功与否更新验证码
                $('#captcha_img').click();
            }
        });
    });

4.后端代码

CodeUtil工具类：

public class CodeUtil {

    public static boolean checkVerifyCode(HttpServletRequest request) {
        String verifyCodeExpected = (String)request.getSession()
                .getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_CONFIG_KEY);
        String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
        if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
            return false;
        }
        return true;
    }
}

HttpServletRequestUtil工具类：

public static String getString(HttpServletRequest request, String key) {
        try {
            String result = request.getParameter(key);
            if(result != null) {
                result = result.trim();
            }
            if("".equals(result)) {
                result = null;
            }
            return result;
        } catch (Exception e) {
            return null;
        }
    }

 controller层代码调用：

Map<String, Object> modelMap = new HashMap<String,Object>();
        if(!CodeUtil.checkVerifyCode(request)) {
            modelMap.put("success",false);
            modelMap.put("errMsg", "输入了错误的验证码！");
            return modelMap;
        } else{
　　　　　　//进行下一步逻辑
　　　　 }

 5.调试页面

6.至此生成图片验证码成功！

 编写于2019-01-13 14:43:55