google kaptcha 驗證碼組件簡單入門
在Java Web階段或者SpringMVC階段我們在做登錄的時候都會建議使用驗證碼,這樣是為了防止自動登錄
1.Servlet版的配置說明
-
在web.xml中配置如下Servlet,代碼如下
<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.border.color</param-name> <param-value>105,179,90</param-value> </init-param> <init-param> <param-name>kaptcha.textproducer.font.color</param-name> <param-value>red</param-value> </init-param> <init-param> <param-name>kaptcha.image.width</param-name> <param-value>250</param-value> </init-param> <init-param> <param-name>kaptcha.image.height</param-name> <param-value>90</param-value> </init-param> <init-param> <param-name>kaptcha.textproducer.font.size</param-name> <param-value>70</param-value> </init-param> <!-- 配置session的存儲的KEY --> <init-param> <param-name>kaptcha.session.key</param-name> <param-value>session_code</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>宋體,楷體,微軟雅黑</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>kaptcha</servlet-name> <url-pattern>/code</url-pattern> </servlet-mapping> -
Login.jsp的代碼如下
<body> <h2>驗證碼</h2> <form action="login" method="post" > <input name="mycode" id="mycode" > <img alt="沒有加載成功" src="code" title="看不清,換一下" id="code"> <button>登錄</button> </form> <script type="text/javascript"> window.onload = function(){ document.getElementById("code").onclick=function(){ this.src="code?"+new Date().getTime();//欺騙瀏覽器,每次都是一次行的請求 } } </script> </body> -
LoginServlet的測試代碼如下
@WebServlet("/login") public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //解決POST請求的中文亂碼問題 request.setCharacterEncoding("UTF-8"); //獲取驗證碼 String mycode = request.getParameter("mycode"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); //獲取Session中的驗證碼 /* web.xml中配置的 <init-param> <param-name>kaptcha.session.key</param-name> <param-value>session_code</param-value> </init-param> */ String session_code = request.getSession().getAttribute("session_code").toString(); if(session_code.equalsIgnoreCase(mycode)){ out.write("驗證碼成功"); }else{ out.write("驗證碼失敗"); } out.flush(); out.close(); } }
2.SpringMVC版的配置說明
-
SpringMVC核心配置文件配置如下
<!-- 6.驗證碼 --> <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">no</prop> <prop key="kaptcha.border.color">red</prop> <prop key="kaptcha.border.thickness">5</prop> <prop key="kaptcha.image.width">150</prop> <prop key="kaptcha.image.height">50</prop> <prop key="kaptcha.noise.color">0,0,205</prop><!-- 0,0,205 black --> <prop key="kaptcha.background.clear.from">178,223,238</prop> <!-- 255,250,205 --> <prop key="kaptcha.background.clear.to">240,255,240</prop> <prop key="kaptcha.textproducer.font.names">微軟雅黑</prop> <prop key="kaptcha.textproducer.font.size">30</prop> <prop key="kaptcha.textproducer.font.color">72,118,255</prop> <!-- 255,110,180 --> <prop key="kaptcha.textproducer.char.space">3</prop> <prop key="kaptcha.textproducer.char.string">ABCDEFGHJKMNQRSTUVWXYZ123456789</prop> <prop key="kaptcha.textproducer.char.length">4</prop> </props> </constructor-arg> </bean> </property> </bean> -
生成驗證碼的Controller代碼
@Controller public class LoginController extends BaseController { //設(shè)置驗證保存到Session中的KEY值 private static final String SESSION_LOGIN_CODE = "session_login_code"; @Autowired private Producer producer; @GetMapping("/code") @ResponseBody//不這是該注解,會請求轉(zhuǎn)換到/WEB-INF/code.jsp頁面 public void generateCode() throws IOException{ /* Expires過時期限值，指瀏覽器或緩存服務(wù)器在該時間點后必須從真正的服務(wù)器中獲取新的頁面信息 */ this.response.setDateHeader("Expires", 0); /* 瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁面信息 */ //response.setHeader("Cache-Control", "no-cache"); /* 請求和響應(yīng)的信息都不應(yīng)該被存儲在對方的磁盤系統(tǒng)中 */ //response.setHeader("Cache-Control", "no-store"); /* 瀏覽器和緩存服務(wù)器都可以緩存頁面信息 */ //response.setHeader("Cache-Control", "public"); /* 對于客戶機(jī)的每次請求，代理服務(wù)器必須向服務(wù)器驗證緩存是否過時 */ //response.setHeader("Cache-Control", "must-revalidate"); this.response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); /* 不讓瀏覽器或中間緩存服務(wù)器緩存頁面，配合Expires 置為0限定更保險 */ this.response.setHeader("Pragma", "no-cache"); /* * response.setContentType(MIME)的作用是使客戶端瀏覽器區(qū)分不同類型的數(shù)據(jù)， * 并根據(jù)不同的MIME調(diào)用瀏覽器內(nèi)部不同的程序嵌入模塊來處理相應(yīng)的數(shù)據(jù) */ this.response.setContentType("image/jpeg"); /* 生成驗證碼 */ String capText = this.producer.createText(); /* 保存驗證碼到Session中 */ this.request.getSession().setAttribute(SESSION_LOGIN_CODE, capText); /* 使用給定文字創(chuàng)建圖片 */ BufferedImage bi = this.producer.createImage(capText); /* 數(shù)據(jù)寫入輸出流 */ ServletOutputStream out = this.response.getOutputStream(); ImageIO.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } } }請注意我使用了@ResponseBody注解
-
JSP頁面代碼
<body> <h2>驗證碼</h2> <form action="login" method="post" > <input name="mycode" id="mycode" > <img alt="沒有加載成功" src="code" title="看不清,換一下" id="code"> <button>登錄</button> </form> <script type="text/javascript"> window.onload = function(){ document.getElementById("code").onclick=function(){ this.src="code?"+new Date().getTime(); } } </script> </body> -
登錄驗證碼簡單測試
@Controller public class LoginController extends BaseController { //設(shè)置驗證保存到Session中的KEY值 private static final String SESSION_LOGIN_CODE = "session_login_code"; @Autowired private Producer producer; @PostMapping("/login") @ResponseBody public void login(String mycode) throws IOException{ //這是測試代碼 this.response.setContentType("text/html;charset=UTF-8"); PrintWriter out = this.response.getWriter(); String session_code = this.request.getSession().getAttribute(SESSION_LOGIN_CODE).toString(); if(session_code.equalsIgnoreCase(mycode)){ out.write("驗證碼成功"); }else{ out.write("驗證碼失敗"); } out.flush(); out.close(); } }
3.kaptcha 屬性說明
kaptcha.border 是否有邊框 默認(rèn)為true 我們可以自己設(shè)置yes，no
kaptcha.border.color 邊框顏色 默認(rèn)為Color.BLACK
kaptcha.border.thickness 邊框粗細(xì)度 默認(rèn)為1
kaptcha.producer.impl 驗證碼生成器 默認(rèn)為DefaultKaptcha
kaptcha.textproducer.impl 驗證碼文本生成器 默認(rèn)為DefaultTextCreator
kaptcha.textproducer.char.string 驗證碼文本字符內(nèi)容范圍 默認(rèn)為abcde2345678gfynmnpwx
kaptcha.textproducer.char.length 驗證碼文本字符長度 默認(rèn)為5
kaptcha.textproducer.font.names 驗證碼文本字體樣式 默認(rèn)為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
kaptcha.textproducer.font.size 驗證碼文本字符大小 默認(rèn)為40
kaptcha.textproducer.font.color 驗證碼文本字符顏色 默認(rèn)為Color.BLACK
kaptcha.textproducer.char.space 驗證碼文本字符間距 默認(rèn)為2
kaptcha.noise.impl 驗證碼噪點生成對象 默認(rèn)為DefaultNoise 或者配置 com.google.code.kaptcha.impl.NoNoise去掉干擾線
kaptcha.noise.color 驗證碼噪點顏色 默認(rèn)為Color.BLACK
kaptcha.obscurificator.impl 驗證碼樣式引擎 默認(rèn)為WaterRipple
圖片樣式：
水紋com.google.code.kaptcha.impl.WaterRipple
魚眼com.google.code.kaptcha.impl.FishEyeGimpy
陰影com.google.code.kaptcha.impl.ShadowGimpy
kaptcha.word.impl 驗證碼文本字符渲染 默認(rèn)為DefaultWordRenderer
kaptcha.background.impl 驗證碼背景生成器 默認(rèn)為DefaultBackground
kaptcha.background.clear.from 驗證碼背景顏色漸進(jìn) 默認(rèn)為Color.LIGHT_GRAY
kaptcha.background.clear.to 驗證碼背景顏色漸進(jìn) 默認(rèn)為Color.WHITE
kaptcha.image.width 驗證碼圖片寬度 默認(rèn)為200
kaptcha.image.height 驗證碼圖片高度 默認(rèn)為50
image
4.定制驗證碼
自定義數(shù)組運(yùn)算的驗證碼
-
模擬生成器的規(guī)則,自己建立一個數(shù)字的生成器
public class NumberCreator extends Configurable implements TextProducer{ private static Random Random = new Random(); @Override public String getText() { int num1 =Random.nextInt(100); int num2 =Random.nextInt(100); return num1+","+num2;//逗號是為了在前臺分隔字符串使用 } } -
配置文件修改
<!-- 6.驗證碼 --> <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">no</prop> <prop key="kaptcha.border.color">red</prop> <prop key="kaptcha.border.thickness">5</prop> <prop key="kaptcha.image.width">150</prop> <prop key="kaptcha.image.height">50</prop> <prop key="kaptcha.noise.color">0,0,205</prop><!-- 0,0,205 black --> <prop key="kaptcha.background.clear.from">178,223,238</prop> <!-- 255,250,205 --> <prop key="kaptcha.background.clear.to">240,255,240</prop> <prop key="kaptcha.textproducer.font.names">微軟雅黑</prop> <prop key="kaptcha.textproducer.font.size">30</prop> <prop key="kaptcha.textproducer.font.color">72,118,255</prop> <!-- 255,110,180 --> <prop key="kaptcha.textproducer.char.space">3</prop> <!-- 去掉干擾線 --> <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop> <!-- 自定義的生成器生成器 --> <prop key="kaptcha.textproducer.impl">com.shxt.text.NumberCreator</prop> </props> </constructor-arg> </bean> </property> </bean> -
修改生成圖片的代碼
@Controller public class LoginController extends BaseController { //設(shè)置驗證保存到Session中的KEY值 private static final String SESSION_LOGIN_CODE = "session_login_code"; @Autowired private Producer producer; @GetMapping("/code") @ResponseBody//不這是該注解,會請求轉(zhuǎn)換到/WEB-INF/code.jsp頁面 public void generateCode() throws IOException{ /* Expires過時期限值，指瀏覽器或緩存服務(wù)器在該時間點后必須從真正的服務(wù)器中獲取新的頁面信息 */ this.response.setDateHeader("Expires", 0); /* 瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁面信息 */ //response.setHeader("Cache-Control", "no-cache"); /* 請求和響應(yīng)的信息都不應(yīng)該被存儲在對方的磁盤系統(tǒng)中 */ //response.setHeader("Cache-Control", "no-store"); /* 瀏覽器和緩存服務(wù)器都可以緩存頁面信息 */ //response.setHeader("Cache-Control", "public"); /* 對于客戶機(jī)的每次請求，代理服務(wù)器必須向服務(wù)器驗證緩存是否過時 */ //response.setHeader("Cache-Control", "must-revalidate"); this.response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); /* 不讓瀏覽器或中間緩存服務(wù)器緩存頁面，配合Expires 置為0限定更保險 */ this.response.setHeader("Pragma", "no-cache"); /* * response.setContentType(MIME)的作用是使客戶端瀏覽器區(qū)分不同類型的數(shù)據(jù)， * 并根據(jù)不同的MIME調(diào)用瀏覽器內(nèi)部不同的程序嵌入模塊來處理相應(yīng)的數(shù)據(jù) */ this.response.setContentType("image/jpeg"); /* 生成驗證碼 */ String capText = this.producer.createText(); String[] arr = capText.split(","); String result = ""; int r; switch (new Random().nextInt(2)) { case 0: //加法運(yùn)算 r = Integer.parseInt(arr[0])+Integer.parseInt(arr[1]); result = arr[0]+"+"+arr[1]+"=?"; break; default://減法 r = Integer.parseInt(arr[0])-Integer.parseInt(arr[1]); result = arr[0]+"-"+arr[1]+"=?"; break; } /* 保存驗證碼到Session中 */ this.request.getSession().setAttribute(SESSION_LOGIN_CODE, r); /* 使用給定文字創(chuàng)建圖片 */ BufferedImage bi = this.producer.createImage(result); /* 數(shù)據(jù)寫入輸出流 */ ServletOutputStream out = this.response.getOutputStream(); ImageIO.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } } }
image
自定義中文驗證碼
-
模擬生成器的規(guī)則,自己建立一個中文生成器
public class ChineseCreator extends Configurable implements TextProducer{ private static Random random = new Random(); @Override public String getText() { //獲取驗證的長度 int length = this.getConfig().getTextProducerCharLength(); //簡單使用數(shù)組,可以網(wǎng)上查詢生成中文漢字的工具類 String[] s = {"四","海","興","唐","胖","先","森","西","游","記","悟","空","八","戒","唐","僧","林","黛","玉","武","松"}; StringBuffer sb = new StringBuffer(); for(int i = 0; i < length; i++){ int ind = random.nextInt(s.length); sb.append(s[ind]); } return sb.toString(); } } -
配置文件需要修改kaptcha.obscurificator.impl
<!-- 6.驗證碼 --> <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">no</prop> <prop key="kaptcha.border.color">red</prop> <prop key="kaptcha.border.thickness">5</prop> <prop key="kaptcha.image.width">150</prop> <prop key="kaptcha.image.height">50</prop> <prop key="kaptcha.noise.color">0,0,205</prop><!-- 0,0,205 black --> <prop key="kaptcha.background.clear.from">178,223,238</prop> <!-- 255,250,205 --> <prop key="kaptcha.background.clear.to">240,255,240</prop> <prop key="kaptcha.textproducer.font.names">微軟雅黑</prop> <prop key="kaptcha.textproducer.font.size">30</prop> <prop key="kaptcha.textproducer.font.color">72,118,255</prop> <!-- 255,110,180 --> <prop key="kaptcha.textproducer.char.space">3</prop> <prop key="kaptcha.textproducer.char.length">4</prop> <!-- 去掉干擾線 --> <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop> <prop key="kaptcha.textproducer.impl">com.shxt.text.ChineseCreator</prop> <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop> </props> </constructor-arg> </bean> </property> </bean> -
修改生成圖片的代碼
@Controller public class LoginController extends BaseController { //設(shè)置驗證保存到Session中的KEY值 private static final String SESSION_LOGIN_CODE = "session_login_code"; @Autowired private Producer producer; @GetMapping("/code") @ResponseBody//不這是該注解,會請求轉(zhuǎn)換到/WEB-INF/code.jsp頁面 public void generateCode() throws IOException{ /* Expires過時期限值，指瀏覽器或緩存服務(wù)器在該時間點后必須從真正的服務(wù)器中獲取新的頁面信息 */ this.response.setDateHeader("Expires", 0); /* 瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁面信息 */ //response.setHeader("Cache-Control", "no-cache"); /* 請求和響應(yīng)的信息都不應(yīng)該被存儲在對方的磁盤系統(tǒng)中 */ //response.setHeader("Cache-Control", "no-store"); /* 瀏覽器和緩存服務(wù)器都可以緩存頁面信息 */ //response.setHeader("Cache-Control", "public"); /* 對于客戶機(jī)的每次請求，代理服務(wù)器必須向服務(wù)器驗證緩存是否過時 */ //response.setHeader("Cache-Control", "must-revalidate"); this.response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); /* 不讓瀏覽器或中間緩存服務(wù)器緩存頁面，配合Expires 置為0限定更保險 */ this.response.setHeader("Pragma", "no-cache"); /* * response.setContentType(MIME)的作用是使客戶端瀏覽器區(qū)分不同類型的數(shù)據(jù)， * 并根據(jù)不同的MIME調(diào)用瀏覽器內(nèi)部不同的程序嵌入模塊來處理相應(yīng)的數(shù)據(jù) */ this.response.setContentType("image/jpeg"); /* 生成驗證碼 */ String capText = this.producer.createText(); /* 保存驗證碼到Session中 */ this.request.getSession().setAttribute(SESSION_LOGIN_CODE, capText); /* 使用給定文字創(chuàng)建圖片 */ BufferedImage bi = this.producer.createImage(capText); /* 數(shù)據(jù)寫入輸出流 */ ServletOutputStream out = this.response.getOutputStream(); ImageIO.write(bi, "jpg", out); try { out.flush(); } finally { out.close(); } } }image
