Kaptcha 是google以前維護的一個開源的驗證碼生成工具類庫，後來google公司放棄了，現在用的 Kaptcha 版本都是由 GitHub上進行維護的版本了。雖然由GitHub託管了，但是可以看到裏面的很多的包結構都是有google的。
雖說現在前端完成的功能越來越全面了，有很多不同類型的機器驗證，但是作爲一個後端開發還是有必要學一學如何使用Servlet 生成 驗證碼。
1. 使用Maven 導入需要的jar包依賴
如果項目不是Maven的，那麼可以通過這個下載鏈接下載相應的 jar 包 點此下載 密碼:980c
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
2. 配置相應的 web.xml
Kaptcha 的主要配置都是要依賴於 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>black</param-value>
</init-param>
<!-- 圖片寬度 -->
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>150</param-value>
</init-param>
<!-- 使用哪些字符生成驗證碼 -->
<init-param>
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>ACDEFHKPRSTWX345678</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.font.size</param-name>
<param-value>35</param-value>
</init-param>
<!-- 干擾線的顏色 -->
<init-param>
<param-name>kaptcha.noise.color</param-name>
<param-value>white</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. 前端顯示代碼
後端的業務完成了就要開始前端的顯示了。
這裏使用了
<html>
<head>
<%--後面實現點擊切換驗證碼的時候用到了jq --%>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>login</title>
</head>
<body>
<form action="loginServlet" method="post">
賬戶：<input type="text" name="usernaem"><br>
密碼：<input type="password" name="password"><br>
<%--驗證碼輸入框--%>
<input class="verifyInput" name="verifyInput" placeholder="請輸入驗證碼">
<%--驗證碼圖片顯示標籤，驗證碼將在這裏顯示，併爲圖片綁定點擊事件，點擊切換下一張圖片--%>
<%--src="Kaptcha" 表示請求項目的 一個Servlet ---> Kaptcha ，注意這個路徑的問題--%>
<img class="verifyCode" onclick="change()" src="Kaptcha">
<input type="submit" value="登錄">
</form>
<script>
function change() {
//帶上一個時間戳，表示當前圖片的唯一性。
var src = " Kaptcha?" + new Date().getTime();
// 將返回的圖片路徑返回並設置好。
$('.verifyCode').attr("src", src);
}
</script>
</body>
</html>
4. 將前端輸入的驗證碼進行校驗
前端輸入驗證碼後是需要後端對驗證碼的一致性進行校驗的。這個時候需要 處理表單提交的 Servlet 中進行邏輯判斷。
String verifyInput = req.getParameter("verifyInput"); // 得到前端輸入的驗證碼的值，
// 使用 Kaptcha 生成驗證碼後會自動的使用 Session 保存到私有空間裏面。此時，可以看API文檔，得知Session 的 key值爲：om.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY 。可以直接通過這個key 值取得相應的，Session 的 value 值。然後對驗證碼進行判斷。處理邏輯。
String kaptchaExpected = (String) req.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
if (!verifyInput.equalsIgnoreCase(kaptchaExpected)){
resp.getWriter().println("<h3>驗證碼錯誤</h3>");
return;
}
5. Kaptcha 使用文檔
驗證碼圖片的具體配置需要在 web.xml 中進行配置，示例格式如下：
<!-- 是否有邊框 -->
<init-param>
<param-name>kaptcha.border</param-name>
<param-value>no</param-value>
</init-param>
kaptcha.border : 是需要配置的類型，
no : 是需要配置的類型的具體的值。
![]()
取得Session 的值：
![]()
有什麼疑問可以私信
日有所思，日有所進。
學而不思則罔，思而不學則殆。