代码基于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