kaptcha簡(jiǎn)介:
kaptcha是一個(gè)很有用的驗(yàn)證碼生成工具，由于它有許多可配置項(xiàng)，所以用它可以簡(jiǎn)單快捷的生成各式各樣的驗(yàn)證碼。
開(kāi)發(fā)工具及使用的核心技術(shù):
1、eclipse
2、mybatis
3、spring
4、springmvc
5、kaptcha
本文將介紹kaptcha兩種使用方式:
方式一:在 spring-kaptcha.xml 中配置
方式二:在 web.xml 中配置
正式開(kāi)始:
一、搭骨架
1、添加依賴:
|
1
2
3
4
5
6
|
<!-- 驗(yàn)證碼 --> <dependency> <groupid>com.github.penggle</groupid> <artifactid>kaptcha</artifactid> <version>2.3.2</version> </dependency> |
要使用kaptcha驗(yàn)證碼，除了spring和mybatis那些依賴，只需引入這一個(gè)即可。
2、完善配置文件
①spring-dao.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!-- 配置整合mybatis過(guò)程 --> <!-- 1、配置數(shù)據(jù)庫(kù)相關(guān)參數(shù)properties的屬性：${url} --> <context:property-placeholder location="classpath:jdbc.properties" /> <!-- 2、配置數(shù)據(jù)庫(kù)連接池 --> <bean id="datasource" class="com.mchange.v2.c3p0.combopooleddatasource"> <!-- 配置連接池屬性 --> <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"/> <!-- 關(guān)閉連接不自動(dòng)commit --> <property name="autocommitonclose" value="false"/> <!-- 獲取連接超時(shí)時(shí)間 --> <property name="checkouttimeout" value="10000"/> <!-- 當(dāng)獲取連接失敗時(shí)重試次數(shù) --> <property name="acquireretryattempts" value="2"/> </bean> <!-- 3、配置mybatis的sqlsessionfactory --> <bean id="sqlsessionfactory" class="org.mybatis.spring.sqlsessionfactorybean"> <property name="datasource" ref="datasource" /> <!-- 自動(dòng)掃描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會(huì)自動(dòng)查找其下的類 --> <bean class="org.mybatis.spring.mapper.mapperscannerconfigurer"> <property name="basepackage" value="com.zhu.kaptcha.dao" /> <property name="sqlsessionfactorybeanname" value="sqlsessionfactory"></property> </bean> |
②spring-service.xml
|
1
2
3
4
5
6
7
8
9
10
11
|
<!-- 掃描service包下所有使用注解的類型 --> <context:component-scan base-package="com.zhu.kaptcha.service"/> <!-- 事務(wù)管理 --> <bean id="transactionmanager" class="org.springframework.jdbc.datasource.datasourcetransactionmanager"> <property name="datasource" ref="datasource" /> </bean> <!-- 配置基于注解的聲明式事物 --> <tx:annotation-driven transaction-manager="transactionmanager"/> |
③spring-web.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!-- 配置springmvc --> <!-- 1、開(kāi)啟springmvc注解模式 --> <mvc:annotation-driven /> <!--2、定義視圖解析器 --> <bean id="viewresolver" class="org.springframework.web.servlet.view.internalresourceviewresolver"> <property name="prefix" value="/"/> <property name="suffix" value=".jsp"/> </bean> <!-- 3、掃描web相關(guān)的bean --> <context:component-scan base-package="com.zhu.kaptcha.controller"/> |
④web.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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> <!-- 編碼過(guò)濾器 --> <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> |
至此，骨架就搭起來(lái)了，接下來(lái)完成對(duì)數(shù)據(jù)庫(kù)的操作。
二、對(duì)數(shù)據(jù)庫(kù)的操作
1、entity層
user.java
|
1
2
3
4
5
|
public class user { private int uid; private string username; private string password;} |
2、dao層
userdao.java
|
1
2
3
4
|
public interface userdao { user finduserbyusername(string username);} |
userdao.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@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; } }} |
注:寫(xiě)到dao層和service層應(yīng)該做一下junit測(cè)試，測(cè)試比較簡(jiǎn)單，這里就不做說(shuō)明了。
三、整合kaptcha
方式一、通過(guò)spring-kaptcha.xml配置
1、在resources的spring文件夾下新建 spring-kaptcha.xml 配置文件，內(nèi)容如下:
spring-kaptcha.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<bean id="captchaproducer" class="com.google.code.kaptcha.impl.defaultkaptcha"> <property name="config"> <bean class="com.google.code.kaptcha.util.config"> <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> |
注:這個(gè)bean就是配置了一些驗(yàn)證碼的屬性，也可以直接寫(xiě)在spring-web.xml中，根據(jù)個(gè)人習(xí)慣，我喜歡把不同模塊的配置寫(xiě)在不同的文件中。
2、新建一個(gè)controller用于生成驗(yàn)證碼
codecontroller.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
@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"); //生成驗(yàn)證碼 string captext = captchaproducer.createtext(); session.setattribute(constants.kaptcha_session_key, captext); //向客戶端寫(xiě)出 bufferedimage bi = captchaproducer.createimage(captext); servletoutputstream out = response.getoutputstream(); imageio.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } }} |
注意:這個(gè)controller的路由為“kaptcha”，那么等下前端驗(yàn)證碼的src就為kaptcha.jpg 。
3、新建一個(gè)工具類用于比對(duì)驗(yàn)證碼
codeutil.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
public class codeutil { /** * 將獲取到的前端參數(shù)轉(zhuǎn)為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; } } /** * 驗(yàn)證碼校驗(yàn) * @param request * @return */ public static boolean checkverifycode(httpservletrequest request) { //獲取生成的驗(yàn)證碼 string verifycodeexpected = (string) request.getsession().getattribute(com.google.code.kaptcha.constants.kaptcha_session_key); //獲取用戶輸入的驗(yàn)證碼 string verifycodeactual = codeutil.getstring(request, "verifycodeactual"); if(verifycodeactual == null ||!verifycodeactual.equals(verifycodeexpected)) { return false; } return true; }} |
注意:這里get傳的參數(shù)名為“verifycodeactual”，那么等下在頁(yè)面中驗(yàn)證碼的name值也得為這個(gè)。
接下來(lái)就可以使用驗(yàn)證碼了！
4、用戶登錄的controller
usercontroller.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
@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", "驗(yàn)證碼有誤!"); return "fail"; } else { if (result) { request.setattribute("user", username); return "success"; } else { request.setattribute("errmsg", "用戶名或密碼錯(cuò)誤!"); return "fail"; } } }} |
注:這里調(diào)用codeutil工具類比對(duì)輸入的驗(yàn)證碼是否正確。
5、前端頁(yè)面
login.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<%@ 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 /> 驗(yàn)證碼: <input type="text" placeholder="請(qǐng)輸入驗(yàn)證碼" name="verifycodeactual"> <div class="item-input"> <img id="captcha_img" alt="點(diǎn)擊更換" title="點(diǎn)擊更換" onclick="refresh()" src="kaptcha.jpg" /> </div> <input type="submit" value="登錄" /> </form> </body></html> |
success.jsp
|
1
2
3
|
<body> <h1>歡迎登錄，${user}</h1></body> |
fail.jsp
|
1
2
3
4
5
|
<body> 對(duì)不起，登錄失敗，原因:<br> ${codeerr} <h2>${errmsg}</h2></body> |
注:login.jsp的js代碼是完成“點(diǎn)擊更換”功能;注意驗(yàn)證碼的name要和傳入工具類中的名字一樣，src就是生成驗(yàn)證碼的controller路由加上.jpg。
6、測(cè)試:
輸入正確的驗(yàn)證碼:
登錄成功:
輸入錯(cuò)誤的驗(yàn)證碼:
頁(yè)面顯示驗(yàn)證碼有誤:
點(diǎn)擊驗(yàn)證碼可以更換！
方式二、在web.xml中配置驗(yàn)證碼
相比于方式一，一增二減。
減:
1、在上面那個(gè)項(xiàng)目的基礎(chǔ)上，把 codecontroller.java刪掉 。
2、把 spring-kaptcha.xml刪掉 ，其他的保留。
增:
1、在 web.xml 中 添加 如下配置:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!-- 驗(yàn)證碼 --> <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> <!-- 使用哪些字符生成驗(yàn)證碼 --> <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> <!-- 字符個(gè)數(shù) --> <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> |
注:這段配置就是用來(lái)配置驗(yàn)證碼的，注意最后的 <url-pattern>/kaptcha.jpg</url-pattern> 要與驗(yàn)證碼中的 src = "kaptcha.jpg" 對(duì)應(yīng)。
這樣就完成了驗(yàn)證碼的配置，接下來(lái)測(cè)試。 測(cè)試:
輸入錯(cuò)誤的驗(yàn)證碼:
頁(yè)面顯示驗(yàn)證碼錯(cuò)誤:
輸入正確的驗(yàn)證碼:
登錄成功:
測(cè)試通過(guò)！
總結(jié):
1、在頁(yè)面中加驗(yàn)證碼很簡(jiǎn)單，只需要添加 <img src= "xx"> 即可。用一個(gè)img標(biāo)簽，然后通過(guò)src指向生成驗(yàn)證碼的controller的路由加上 .jpg (驗(yàn)證碼用spring方式配置)，或者通過(guò)src指向
<url-pattern>/kaptcha.jpg</url-pattern> ，即 src="kaptcha.jpg" 。
2、點(diǎn)擊更換也簡(jiǎn)單，就是給img標(biāo)簽加一個(gè)onclick事件，然后用js完成。
點(diǎn)擊更換的js:
|
1
2
3
4
5
|
<script type="text/javascript"> function refresh() { document.getelementbyid('captcha_img').src="kaptcha.jpg?"+math.random(); } </script> |
然后在img標(biāo)簽中加上 onclick="refresh()" ，這樣就完成了這個(gè)點(diǎn)擊事件。
3、更多kaptcha屬性的配置
| constant | 描述 | 默認(rèn)值 |
| kaptcha.border | 圖片邊框，合法值：yes , no | yes |
| kaptcha.border.color | 邊框顏色，合法值： r,g,b (and optional alpha) 或者 white,black,blue. | black |
| kaptcha.border.thickness | 邊框厚度，合法值：>0 | 1 |
| kaptcha.image.width | 圖片寬 | 200 |
| kaptcha.image.height | 圖片高 | 50 |
| kaptcha.producer.impl | 圖片實(shí)現(xiàn)類 | com.google.code.kaptcha.impl.defaultkaptcha |
| kaptcha.textproducer.impl | 文本實(shí)現(xiàn)類 | com.google.code.kaptcha.text.impl.defaulttextcreator |
| kaptcha.textproducer.char.string | 文本集合，驗(yàn)證碼值從此集合中獲取 | abcde2345678gfynmnpwx |
| kaptcha.textproducer.char.length | 驗(yàn)證碼長(zhǎng)度 | 5 |
| kaptcha.textproducer.font.names | 字體 | arial, courier |
| kaptcha.textproducer.font.size | 字體大小 | 40px. |
| kaptcha.textproducer.font.color | 字體顏色，合法值： r,g,b 或者 white,black,blue. | black |
| kaptcha.textproducer.char.space | 文字間隔 | 2 |
| kaptcha.noise.impl | 干擾實(shí)現(xiàn)類 | com.google.code.kaptcha.impl.defaultnoise |
| kaptcha.noise.color | 干擾 顏色，合法值： r,g,b 或者 white,black,blue. | black |
| kaptcha.obscurificator.impl |
圖片樣式： 水紋com.google.code.kaptcha.impl.waterripple 魚(yú)眼com.google.code.kaptcha.impl.fisheyegimpy 陰影com.google.code.kaptcha.impl.shadowgimpy |
com.google.code.kaptcha.impl.waterripple |
| kaptcha.background.impl | 背景實(shí)現(xiàn)類 | com.google.code.kaptcha.impl.defaultbackground |
| kaptcha.background.clear.from | 背景顏色漸變，開(kāi)始顏色 | light grey |
| kaptcha.background.clear.to | 背景顏色漸變， 結(jié)束顏色 | white |
| kaptcha.word.impl | 文字渲染器 | com.google.code.kaptcha.text.impl.defaultwordrenderer |
| kaptcha.session.key | session key | kaptcha_session_key |
| kaptcha.session.date | session date | kaptcha_session_date |
以上內(nèi)容屬于個(gè)人筆記整理，如有錯(cuò)誤，歡迎批評(píng)指正！
原文鏈接：https://www.jianshu.com/p/e5ffa123cda4
