當(dāng)前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
SpringMvc项目中使用GoogleKaptcha 生成验证码
生活随笔
收集整理的這篇文章主要介紹了
SpringMvc项目中使用GoogleKaptcha 生成验证码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前言:google captcha 是google生成驗證碼的一個工具類,其原理是將隨機(jī)生成字符串保存到session中,同時以圖片的形式返回給頁面,之后前臺頁面提交到后臺進(jìn)行對比。
?
1、jar包準(zhǔn)備
官方提供的pom應(yīng)該是
<dependency> <groupId>com.google.code.kaptcha</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>但是下載不下來,我在阿里的maven倉庫找到的pom如下:
<dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>測試可以正常下載,這里推薦阿里的maven倉庫,下載速度還行,挺穩(wěn)定,附地址:http://maven.aliyun.com/nexus/#welcome
2、spring bean的配置
1 <!-- google kaptcha的相關(guān)配置--> 2 <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> 3 <property name="config"> 4 <bean class="com.google.code.kaptcha.util.Config"> 5 <constructor-arg> 6 <props> 7 <!-- 是否有邊框 可選yes 或者 no --> 8 <prop key="kaptcha.border">yes</prop> 9 <!-- 邊框顏色 --> 10 <prop key="kaptcha.border.color">105,179,90</prop> 11 <!-- 驗證碼文本字符顏色 --> 12 <prop key="kaptcha.textproducer.font.color">blue</prop> 13 <!-- 驗證碼文本字符大小 --> 14 <prop key="kaptcha.textproducer.font.size">45</prop> 15 <!-- 驗證碼圖片的寬度 默認(rèn)200 --> 16 <prop key="kaptcha.image.width">125</prop> 17 <!-- 驗證碼圖片的高度 默認(rèn)50 --> 18 <prop key="kaptcha.image.height">45</prop> 19 <!-- 驗證碼文本字符長度 默認(rèn)為5 --> 20 <prop key="kaptcha.textproducer.char.length">4</prop> 21 <!-- 驗證碼文本字體樣式 默認(rèn)為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize) --> 22 <prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop> 23 </props> 24 </constructor-arg> 25 </bean> 26 </property> 27 </bean>3、Controller的兩個方法
1 package com.ccg.controller; 2 3 import java.awt.image.BufferedImage; 4 import java.io.IOException; 5 import java.io.PrintWriter; 6 7 import javax.annotation.Resource; 8 import javax.imageio.ImageIO; 9 import javax.servlet.ServletOutputStream; 10 import javax.servlet.http.HttpServletRequest; 11 import javax.servlet.http.HttpServletResponse; 12 import javax.servlet.http.HttpSession; 13 14 import org.springframework.stereotype.Controller; 15 import org.springframework.web.bind.annotation.RequestMapping; 16 import org.springframework.web.bind.annotation.RequestParam; 17 import org.springframework.web.servlet.ModelAndView; 18 19 import com.google.code.kaptcha.Constants; 20 import com.google.code.kaptcha.Producer; 21 22 @Controller 23 @RequestMapping("captcha") 24 public class CaptchaController { 25 26 @Resource 27 private Producer captchaProducer; 28 /** 29 * 30 * 獲取驗證碼圖片 31 * @author ccg 32 * @param request 33 * @param response 34 * @return 35 * @throws IOException 36 * Created 2017年1月17日 下午5:07:28 37 */ 38 @RequestMapping("getCaptchaCode") 39 public ModelAndView getCaptchaCode(HttpServletRequest request, HttpServletResponse response) throws IOException{ 40 HttpSession session = request.getSession(); 41 42 response.setDateHeader("Expires", 0); 43 response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); 44 response.addHeader("Cache-Control", "post-check=0, pre-check=0"); 45 response.setHeader("Pragma", "no-cache"); 46 response.setContentType("image/jpeg"); 47 48 //生成驗證碼文本 49 String capText = captchaProducer.createText(); 50 session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText); 51 System.out.println("生成驗證碼文本===="+capText); 52 //利用生成的字符串構(gòu)建圖片 53 BufferedImage bi = captchaProducer.createImage(capText); 54 ServletOutputStream out = response.getOutputStream(); 55 ImageIO.write(bi, "jpg", out); 56 57 try { 58 out.flush(); 59 } finally { 60 out.close(); 61 } 62 return null; 63 } 64 65 /** 66 * 67 * 前端輸入的驗證碼與生成的對比 68 * @author ccg 69 * @param request 70 * @param response 71 * @param captchaCode 72 * Created 2017年1月17日 下午5:34:23 73 */ 74 @RequestMapping("checkCaptchaCode") 75 public void checkCaptchaCode(HttpServletRequest request, HttpServletResponse response,@RequestParam("captchaCode") String captchaCode){ 76 System.out.println("頁面輸入驗證碼===="+captchaCode); 77 78 response.setCharacterEncoding("UTF-8"); 79 response.setHeader("Pragma", "No-cache"); 80 response.setHeader("Cache-Control", "no-cache"); 81 response.setDateHeader("Expires", 0); 82 83 String generateCode =(String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY); 84 String result = ""; 85 if(generateCode.equals(captchaCode)){ 86 result = "驗證成功"; 87 }else{ 88 result = "輸入錯誤"; 89 } 90 PrintWriter out = null; 91 try { 92 out = response.getWriter(); 93 } catch (IOException e) { 94 e.printStackTrace(); 95 } 96 out.print(result); 97 out.flush(); 98 } 99 }4、前臺頁面代碼
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 生成的驗證碼:<img id="changeCaptcha" src="http://127.0.0.1/captcha/getCaptchaCode.htm"> <a href="javascript:changeCaptcha()">看不清,換一張</a> 11 <br> 12 <br> 13 請輸入驗證碼:<input id="captchaCode" type="text"> <input type="button" value="提交驗證" οnclick="checkCaptcha()"> 14 </body> 15 <script type="text/javascript"> 16 //獲取驗證碼圖片 17 function changeCaptcha(){ 18 $("#changeCaptcha").attr("src","http://127.0.0.1/captcha/getCaptchaCode.htm"); 19 } 20 //驗證輸入的驗證碼 21 function checkCaptcha(){ 22 var captchaCode = $("#captchaCode").val(); 23 $.ajax({ 24 type:'post', 25 async : false, 26 url:'http://127.0.0.1/captcha/checkCaptchaCode.htm', 27 data:{"captchaCode" : captchaCode}, 28 success:function(res){ 29 alert(res); 30 } 31 }); 32 } 33 </script> 34 </html>需要注意到引用了jquery.min.js
5、運行效果
?
?
附Google Captcha 可配置項
1 kaptcha.border 是否有邊框 默認(rèn)為true 我們可以自己設(shè)置yes,no 2 kaptcha.border.color 邊框顏色 默認(rèn)為Color.BLACK 3 kaptcha.border.thickness 邊框粗細(xì)度 默認(rèn)為1 4 kaptcha.producer.impl 驗證碼生成器 默認(rèn)為DefaultKaptcha 5 kaptcha.textproducer.impl 驗證碼文本生成器 默認(rèn)為DefaultTextCreator 6 kaptcha.textproducer.char.string 驗證碼文本字符內(nèi)容范圍 默認(rèn)為abcde2345678gfynmnpwx 7 kaptcha.textproducer.char.length 驗證碼文本字符長度 默認(rèn)為5 8 kaptcha.textproducer.font.names 驗證碼文本字體樣式 默認(rèn)為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize) 9 kaptcha.textproducer.font.size 驗證碼文本字符大小 默認(rèn)為40 10 kaptcha.textproducer.font.color 驗證碼文本字符顏色 默認(rèn)為Color.BLACK 11 kaptcha.textproducer.char.space 驗證碼文本字符間距 默認(rèn)為2 12 kaptcha.noise.impl 驗證碼噪點生成對象 默認(rèn)為DefaultNoise 13 kaptcha.noise.color 驗證碼噪點顏色 默認(rèn)為Color.BLACK 14 kaptcha.obscurificator.impl 驗證碼樣式引擎 默認(rèn)為WaterRipple 15 kaptcha.word.impl 驗證碼文本字符渲染 默認(rèn)為DefaultWordRenderer 16 kaptcha.background.impl 驗證碼背景生成器 默認(rèn)為DefaultBackground 17 kaptcha.background.clear.from 驗證碼背景顏色漸進(jìn) 默認(rèn)為Color.LIGHT_GRAY 18 kaptcha.background.clear.to 驗證碼背景顏色漸進(jìn) 默認(rèn)為Color.WHITE 19 kaptcha.image.width 驗證碼圖片寬度 默認(rèn)為200 20 kaptcha.image.height 驗證碼圖片高度 默認(rèn)為50?
以上,有問題歡迎留言~
轉(zhuǎn)載于:https://www.cnblogs.com/FlyHeLanMan/p/6293991.html
總結(jié)
以上是生活随笔為你收集整理的SpringMvc项目中使用GoogleKaptcha 生成验证码的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: maven 导入数据库
- 下一篇: gradle idea java ssm