spring整合kaptcha驗證碼的實現

kaptcha簡介:

kaptcha是一個很有用的驗證碼生成工具，由於它有許多可配置項，所以用它可以簡單快捷的生成各式各樣的驗證碼。

開發工具及使用的核心技術:

1、eclipse

2、mybatis

3、spring

4、springmvc

5、kaptcha

本文將介紹kaptcha兩種使用方式:

方式一:在spring-kaptcha.xml中配置

方式二:在web.xml中配置

正式開始:

一、搭骨架

1、添加依賴:

 <!-- 驗證碼--> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>

要使用kaptcha驗證碼，除了spring和mybatis那些依賴，只需引入這一個即可。

2、完善配置文件

①spring-dao.xml

 <!-- 配置整合mybatis過程--> <!-- 1、配置數據庫相關參數properties的屬性：${url} --> <context:property-placeholder location="classpath:jdbc.properties" /> <!-- 2、配置數據庫連接池--> <bean id="dataSource"> <!-- 配置連接池屬性--> <property name="driverClass" value="${jdbc.driver}"/> <property name="jdbcUrl" value="${jdbc.url}"/> <property name="user" value="${jdbc.username}"/> <property name="password" value="${jdbc.password}"/> <!-- c3p0連接池的私有屬性--> <property name="maxPoolSize" value="30"/> <property name="minPoolSize" value="10"/> <!-- 關閉連接不自動commit --> <property name="autoCommitOnClose" value="false"/> <!-- 獲取連接超時時間--> <property name="checkoutTimeout" value="10000"/> <!-- 當獲取連接失敗時重試次數--> <property name="acquireRetryAttempts" value="2"/> </bean> <!-- 3、配置mybatis的sqlSessionFactory --> <bean id="sqlSessionFactory"> <property name="dataSource" ref="dataSource" /> <!-- 自動掃描mappers.xml文件--> <property name="mapperLocations" value="classpath:mappers/*.xml"/> <!-- mybatis配置文件--> <property name="configLocation" value="classpath:mybatis-config.xml"/> <!-- 掃描entity包，使用別名--> <property name="typeAliasesPackage" value="com.zhu.kaptcha.entity"></property> </bean> <!-- 4、DAO接口所在包名，Spring會自動查找其下的類--> <bean> <property name="basePackage" value="com.zhu.kaptcha.dao" /> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> </bean>

②spring-service.xml

 <!-- 掃描service包下所有使用註解的類型--> <context:component-scan base-package="com.zhu.kaptcha.service"/> <!-- 事務管理--> <bean id="transactionManager" > <property name="dataSource" ref="dataSource" /> </bean> <!-- 配置基於註解的聲明式事物--> <tx:annotation-driven transaction-manager="transactionManager"/>

③spring-web.xml

 <!-- 配置springmvc --> <!-- 1、開啟springMvc註解模式--> <mvc:annotation-driven /> <!--2、定義視圖解析器--> <bean id="viewResolver"> <property name="prefix" value="/"/> <property name="suffix" value=".jsp"/> </bean> <!-- 3、掃描web相關的bean --> <context:component-scan base-package="com.zhu.kaptcha.controller"/>

④web.xml

 <servlet> <servlet-name>spring-dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/spring-*.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>spring-dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 編碼過濾器--> <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <async-supported>true</async-supported> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

至此，骨架就搭起來了，接下來完成對數據庫的操作。

二、對數據庫的操作

1、entity層

User.java

 public class User { private int uid; private String userName; private String passWord;}

2、dao層

UserDao.java

 public interface UserDao { User findUserByUserName(String userName);}

UserDao.xml

 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.zhu.kaptcha.dao.UserDao"> <select id="findUserByUserName" resultType="com.zhu.kaptcha.entity.User"> SELECT * FROM tb_user WHERE user_name=#{userName} </select></mapper>

3、service層

UserServiceImpl.java

 @Servicepublic class UserServiceImpl implements UserService { @Autowired private UserDao userDao; @Override public boolean login(String userName, String passWord) { User user = userDao.findUserByUserName(userName); if (passWord.equals(user.getPassWord())) { return true; } else { return false; } }}

注:寫到dao層和service層應該做一下Junit測試，測試比較簡單，這裡就不做說明了。

三、整合kaptcha

方式一、通過spring-kaptcha.xml配置

1、在resources的spring文件夾下新建spring-kaptcha.xml配置文件，內容如下:

spring-kaptcha.xml

 <bean id="captchaProducer"> <property name="config"> <bean> <constructor-arg> <props> <prop key="kaptcha.border">yes</prop> <prop key="kaptcha.border.color">105,179,90</prop> <prop key="kaptcha.textproducer.font.color">blue</prop> <prop key="kaptcha.image.width">125</prop> <prop key="kaptcha.image.height">45</prop> <prop key="kaptcha.textproducer.font.size">45</prop> <prop key="kaptcha.session.key">code</prop> <prop key="kaptcha.textproducer.char.length">4</prop> <prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop> </props> </constructor-arg> </bean> </property> </bean>

注:這個bean就是配置了一些驗證碼的屬性，也可以直接寫在spring-web.xml中，根據個人習慣，我喜歡把不同模塊的配置寫在不同的文件中。

2、新建一個controller用於生成驗證碼

CodeController.java

 @Controllerpublic class CodeController { @Autowired private Producer captchaProducer = null; @RequestMapping("/kaptcha") public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception { HttpSession session = request.getSession(); response.setDateHeader("Expires", 0); response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); response.addHeader("Cache-Control", "post-check=0, pre-check=0"); response.setHeader("Pragma", "no-cache"); response.setContentType("image/jpeg"); //生成驗證碼String capText = captchaProducer.createText(); session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText); //向客戶端寫出BufferedImage bi = captchaProducer.createImage(capText); ServletOutputStream out = response.getOutputStream(); ImageIO.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } }}

注意:這個controller的路由為“kaptcha”，那麼等下前端驗證碼的src就為kaptcha.jpg 。

3、新建一個工具類用於比對驗證碼

CodeUtil.java

 public class CodeUtil { /** * 將獲取到的前端參數轉為string類型* @param request * @param key * @return */ 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; } } /** * 驗證碼校驗* @param request * @return */ public static boolean checkVerifyCode(HttpServletRequest request) { //獲取生成的驗證碼String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); //獲取用戶輸入的驗證碼String verifyCodeActual = CodeUtil.getString(request, "verifyCodeActual"); if(verifyCodeActual == null ||!verifyCodeActual.equals(verifyCodeExpected)) { return false; } return true; }}

注意:這裡get傳的參數名為“verifyCodeActual”，那麼等下在頁面中驗證碼的name值也得為這個。

接下來就可以使用驗證碼了！

4、用戶登錄的Controller

UserController.java

 @Controller@RequestMapping("/user")public class UserController { @Autowired private UserService userService; @RequestMapping("/login") public String login(@RequestParam("userName") String userName, @RequestParam("passWord") String passWord, HttpServletRequest request) { boolean result = userService.login(userName, passWord); if (!CodeUtil.checkVerifyCode(request)) { request.setAttribute("codeErr", "驗證碼有誤!"); return "fail"; } else { if (result) { request.setAttribute("user", userName); return "success"; } else { request.setAttribute("errMsg", "用戶名或密碼錯誤!"); return "fail"; } } }}

注:這裡調用CodeUtil工具類比對輸入的驗證碼是否正確。

5、前端頁面

login.jsp

 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>登錄</title> <script type="text/javascript"> function refresh() { document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random(); } </script></head><body> <form action="${pageContext.request.contextPath }/user/login" method="post"> userName:<input type="text" name="userName" /><br /> password:<input type="password" name="passWord" /><br /> 驗證碼: <input type="text" placeholder="請輸入驗證碼" name="verifyCodeActual"> <div> <img id="captcha_img" onclick="refresh()" src="kaptcha.jpg" /> </div> <input type="submit" value="登錄" /> </form> </body></html>

success.jsp

 <body> <h1>歡迎登錄，${user}</h1></body>

fail.jsp

 <body> 對不起，登錄失敗，原因:<br> ${codeErr} <h2>${errMsg}</h2></body>

注:login.jsp的js代碼是完成“點擊更換”功能;注意驗證碼的name要和傳入工具類中的名字一樣，src就是生成驗證碼的controller路由加上.jpg。

6、測試:

輸入正確的驗證碼:

登錄成功:

輸入錯誤的驗證碼:

頁面顯示驗證碼有誤:

點擊驗證碼可以更換！

方式二、在web.xml中配置驗證碼

相比於方式一，一增二減。

減:

1、在上面那個項目的基礎上，把CodeController.java刪掉。

2、把spring-kaptcha.xml刪掉，其他的保留。

增:

1、在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>135</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.image.height</param-name> <param-value>50</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.noise.color</param-name> <param-value>red</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.jpg</url-pattern> </servlet-mapping>

注:這段配置就是用來配置驗證碼的，注意最後的<url-pattern>/kaptcha.jpg</url-pattern>要與驗證碼中的src = "kaptcha.jpg"對應。

這樣就完成了驗證碼的配置，接下來測試。 測試:

輸入錯誤的驗證碼:

頁面顯示驗證碼錯誤:

輸入正確的驗證碼:

登錄成功:

測試通過！

總結:

1、在頁面中加驗證碼很簡單，只需要添加<img src= "xx">即可。用一個img標籤，然後通過src指向生成驗證碼的controller的路由加上.jpg (驗證碼用spring方式配置)，或者通過src指向

<url-pattern>/kaptcha.jpg</url-pattern> ，即src="kaptcha.jpg" 。

2、點擊更換也簡單，就是給img標籤加一個onclick事件，然後用js完成。

點擊更換的js:

 <script type="text/javascript"> function refresh() { document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random(); } </script>

然後在img標籤中加上onclick="refresh()" ，這樣就完成了這個點擊事件。

3、更多kaptcha屬性的配置

以上內容屬於個人筆記整理，如有錯誤，歡迎批評指正！