一、驗證碼原理
(1)向後臺發送請求,後臺服務器生成一個隨機數,利用這個隨機數映射一張圖片,最後將這張圖片返回客戶端;
(2)後臺生成驗證碼字符串時,同時將這個字符串保存起來,當用戶提交驗證碼時檢測填寫的驗證碼是否和這個隨機數相同。
關於驗證碼,重要的有三點,這三點處理不好都可能被破解者利用。一是隨機數的生成,二是隨機數和圖片的映射,三是隨機數如何保存。
網上有很多種驗證碼插件,下面主要以google的驗證碼插件kaptcha爲例進行講解。
二、驗證碼示例
1.首先去官網下載jar:http://code.google.com/p/kaptcha/
2.建立一個web項目,導入kaptcha-2.3.jar到環境變量中。
3.在web.xml文件裏配置驗證碼生成器
<!-- 驗證碼生成器 -->
<servlet>
<servlet-name>yzm</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>black</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.char.space</param-name>
<param-value>5</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.font.size</param-name>
<param-value>40</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>yzm</servlet-name>
<url-pattern>/yzm.jpg</url-pattern>
</servlet-mapping>
4.前臺發送“獲取驗證碼”請求
<!-- 驗證碼圖片 -->
<span class="sp_img">
<img id="yzmImg" width="70px" height="25px" />
</span>
/**
* 獲得驗證碼圖片
*/
var yzm_num = 0;
function getYzmFromZsfy(){
var yzmImg = document.getElementById("yzmImg");
yzmImg.src = ctx + "/yzm.jpg?n=" + (yzm_num++);
}
5.後臺檢查驗證碼是否輸入正確
HttpSession session = request.getSession(false);
if (session != null) {
String captchaKey = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
Date captchaTime = (Date) session.getAttribute(Constants.KAPTCHA_SESSION_DATE);
// 刪除舊的驗證碼
session.removeAttribute(Constants.KAPTCHA_SESSION_KEY);
session.removeAttribute(Constants.KAPTCHA_SESSION_DATE);
}
if (StringUtils.isBlank(captchaKey) || create == null) {
throw new CaptchaException("驗證碼已過期");
}
String captchaInput = request.getParameter("yzm");
if (!captchaKey.equalsIgnoreCase(captchaInput) {
throw new CaptchaException("驗證碼錯誤");
}
驗證碼的使用,可參考以下鏈接:
http://www.open-open.com/lib/view/open1407057699179.html