SpringMvc項目中使用GoogleKaptcha 生成驗證碼

時間 2019-12-01

標籤 springmvc 項目使用 googlekaptcha 生成驗證碼欄目 Spring 简体版

原文原文鏈接

前言：google captcha 是google生成驗證碼的一個工具類，其原理是將隨機生成字符串保存到session中，同時以圖片的形式返回給頁面，以後前臺頁面提交到後臺進行對比。

一、jar包準備

官方提供的pom應該是javascript

<dependency>  
    <groupId>com.google.code.kaptcha</groupId>  
    <artifactId>kaptcha</artifactId>  
    <version>2.3.2</version>  
</dependency>

可是下載不下來，我在阿里的maven倉庫找到的pom以下：html

<dependency>  
    <groupId>com.github.penggle</groupId>  
    <artifactId>kaptcha</artifactId>  
    <version>2.3.2</version>  
</dependency>

測試能夠正常下載，這裏推薦阿里的maven倉庫，下載速度還行，挺穩定，附地址：http://maven.aliyun.com/nexus/#welcome前端

二、spring bean的配置

 1 <!-- google kaptcha的相關配置-->
 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                         <!-- 驗證碼圖片的寬度 默認200 -->
16                         <prop key="kaptcha.image.width">125</prop>  
17                         <!-- 驗證碼圖片的高度 默認50 -->
18                         <prop key="kaptcha.image.height">45</prop>  
19                         <!-- 驗證碼文本字符長度  默認爲5 -->
20                         <prop key="kaptcha.textproducer.char.length">4</prop>  
21                         <!-- 驗證碼文本字體樣式  默認爲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>

三、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         //利用生成的字符串構建圖片
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 }

四、前臺頁面代碼

 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="提交驗證" onclick="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.jsjava

五、運行效果

附Google Captcha 可配置項jquery

 1 kaptcha.border  是否有邊框  默認爲true  咱們能夠本身設置yes，no  
 2 kaptcha.border.color   邊框顏色   默認爲Color.BLACK  
 3 kaptcha.border.thickness  邊框粗細度  默認爲1  
 4 kaptcha.producer.impl   驗證碼生成器  默認爲DefaultKaptcha  
 5 kaptcha.textproducer.impl   驗證碼文本生成器  默認爲DefaultTextCreator  
 6 kaptcha.textproducer.char.string   驗證碼文本字符內容範圍  默認爲abcde2345678gfynmnpwx  
 7 kaptcha.textproducer.char.length   驗證碼文本字符長度  默認爲5  
 8 kaptcha.textproducer.font.names    驗證碼文本字體樣式  默認爲new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)  
 9 kaptcha.textproducer.font.size   驗證碼文本字符大小  默認爲40  
10 kaptcha.textproducer.font.color  驗證碼文本字符顏色  默認爲Color.BLACK  
11 kaptcha.textproducer.char.space  驗證碼文本字符間距  默認爲2  
12 kaptcha.noise.impl    驗證碼噪點生成對象  默認爲DefaultNoise  
13 kaptcha.noise.color   驗證碼噪點顏色   默認爲Color.BLACK  
14 kaptcha.obscurificator.impl   驗證碼樣式引擎  默認爲WaterRipple  
15 kaptcha.word.impl   驗證碼文本字符渲染   默認爲DefaultWordRenderer  
16 kaptcha.background.impl   驗證碼背景生成器   默認爲DefaultBackground  
17 kaptcha.background.clear.from   驗證碼背景顏色漸進   默認爲Color.LIGHT_GRAY  
18 kaptcha.background.clear.to   驗證碼背景顏色漸進   默認爲Color.WHITE  
19 kaptcha.image.width   驗證碼圖片寬度  默認爲200  
20 kaptcha.image.height  驗證碼圖片高度  默認爲50