使用Kaptcha 生成驗證碼十分簡單并且參數可以進行自定義,以下簡單記錄下使用步驟。
1.在pom.xml中添加maven依賴:
1
2
3
4
5
6
|
< dependency > < artifactId >kaptcha</ artifactId > < version >2.3</ version > < classifier >jdk15</ classifier > </ dependency > |
2.web.xml中配置kaptcha屬性:
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
|
< bean id = "verifyCodeProducer" 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.border.thickness" >1</ prop > < prop key = "kaptcha.noise.color" >blue</ prop > < prop key = "kaptcha.image.width" >150</ prop > < prop key = "kaptcha.image.height" >50</ prop > < prop key = "kaptcha.session.key" >verifyCode</ prop > <!-- <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrst!@#$%^*</prop> --> < prop key = "kaptcha.textproducer.char.length" >4</ prop > < prop key = "kaptcha.textproducer.char.space" >4</ prop > < prop key = "kaptcha.textproducer.font.size" >30</ prop > < prop key = "kaptcha.textproducer.font.color" >blue</ prop > </ props > </ constructor-arg > </ bean > </ property > </ bean > |
其中bean節點的id值 verifyCodeProducer 為在類中引用@Resource生成實例時的名稱;屬性配置中 kaptcha.session.key 的值為在session中存取名稱。
在servlet節點中配置
3.controller類中的相關方法:
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
|
@Controller public class CommonController { @Autowired private Producer verifyCodeProducer; @RequestMapping (path = "/getVerifyCodeImage" , method = RequestMethod.GET) public void getVerifyCodeImage(HttpServletRequest request, HttpServletResponse response) { HttpSession session = request.getSession(); ResponseUtils.noCache(response); response.setContentType( "image/jpeg" ); String capText = verifyCodeProducer.createText(); session.setAttribute(Constants.SESSION_KEY_VERIFY_CODE, capText); BufferedImage bi = verifyCodeProducer.createImage(capText); ServletOutputStream out = null ; try { out = response.getOutputStream(); ImageIO.write(bi, "jpg" , out); out.flush(); } catch (Exception ex) { LOGGER.error( "Failed to produce the verify code image: " , ex); throw new ServerInternalException( "Cannot produce the verify code image." ); } finally { IOUtils.closeQuietly(out); } } } |
Constants.SESSION_KEY_VERIFY_CODE為屬性配置中 kaptcha.session.key 的值。
4.jsp:
1
2
3
4
5
6
7
|
< div class = "form-group has-feedback" > < span class = "glyphicon glyphicon-barcode form-control-feedback" ></ span > < input id = "verifyCode" name = "verifyCode" type = "text" maxlength = "4" class = "form-control" placeholder="<spring:message code = 'login.label.code' />" /> < div style = "height: 1px" ></ div > < img src = "${pageContext.request.contextPath}/getVerifyCodeImage" id = "verifyCodeImage" style = "margin-bottom: -3px" /> < a href = "#" rel = "external nofollow" onclick = "changeVerifyCode()" >< spring:message code = 'login.code.tip' /></ a > </ div > |
1
2
3
4
|
function changeVerifyCode() { $( '#verifyCodeImage' ).hide().attr( 'src' , '${pageContext.request.contextPath}/getVerifyCodeImage?' + Math.floor(Math.random()*100) ).fadeIn(); event.cancelBubble= true ; } |
5.kaptcha屬性說明:
- kaptcha.border.color 邊框顏色 默認為Color.BLACK
- kaptcha.border.thickness 邊框粗細度 默認為1
- kaptcha.producer.impl 驗證碼生成器 默認為DefaultKaptcha
- kaptcha.textproducer.impl 驗證碼文本生成器 默認為DefaultTextCreator
- kaptcha.textproducer.char.string 驗證碼文本字符內容范圍 默認為abcde2345678gfynmnpwx
- kaptcha.textproducer.char.length 驗證碼文本字符長度 默認為5
- kaptcha.textproducer.font.names 驗證碼文本字體樣式 默認為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
- kaptcha.textproducer.font.size 驗證碼文本字符大小 默認為40
- kaptcha.textproducer.font.color 驗證碼文本字符顏色 默認為Color.BLACK
- kaptcha.textproducer.char.space 驗證碼文本字符間距 默認為2
- kaptcha.noise.impl 驗證碼噪點生成對象 默認為DefaultNoise
- kaptcha.noise.color 驗證碼噪點顏色 默認為Color.BLACK
- kaptcha.obscurificator.impl 驗證碼樣式引擎 默認為WaterRipple
- kaptcha.word.impl 驗證碼文本字符渲染 默認為DefaultWordRenderer
- kaptcha.background.impl 驗證碼背景生成器 默認為DefaultBackground
- kaptcha.background.clear.from 驗證碼背景顏色漸進 默認為Color.LIGHT_GRAY
- kaptcha.background.clear.to 驗證碼背景顏色漸進 默認為Color.WHITE
- kaptcha.image.width 驗證碼圖片寬度 默認為200
- kaptcha.image.height 驗證碼圖片高度 默認為50
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。
原文鏈接:http://blog.csdn.net/aleefang/article/details/70231335