o2o(4)之Kaptcha生成驗證碼
阿新 • • 發佈:2019-01-13
程式碼基於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