o2o(4)之Kaptcha生成验证码

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

1.引入pom.xml依赖

<dependency>
  <groupId>com.github.pengglegroupId>
  <artifactId>kaptchaartifactId>
  <version>2.3.2version>
dependency>

 

2.配置web.xml文件

    <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.textproducer.font.sizeparam-name>
            <param-value>43param-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>ACDEFHKPRSTWX345679param-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>

 

3. 前端代码

kaptcha.html:

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

 

 5.调试页面

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

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

转载于:https://www.cnblogs.com/gmlo/p/10262525.html