引入kaptcha實現驗證碼驗證

1.導入jar包，

可以選擇去 https://mvnrepository.com 里面搜索，也可以直接復制下面的代碼

2.復制到maven配置文件pom.xml中並保存

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

3.成功導入jar包以后，去web.xml文件中配置kaptcha與它的servlet映射等

<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <!-- 定義Kaptch樣式 是否有邊框 這里為 無 -->
        <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>105</param-value>
        </init-param>
        <!-- 驗證碼使用哪些字符生成 -->
        <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>35</param-value>
        </init-param>
        <!-- 字體大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>30</param-value>
        </init-param>
        <!-- 干擾線的顏色，驗證碼的背景 黑色-->
        <init-param>
            <param-name>Kaptcha.noise.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 字符個數 4個-->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 字體 宋體-->
        <init-param>
            <param-name>Kaptcha.testproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
 </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

這里附上kaptcha可配置項參考（根據自己喜好設置）：

kaptcha.border  是否有邊框  默認為true  我們可以自己設置yes，no  
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   

 

3.接着去頁面添加對應控件標簽,這里給驗證碼圖片定義了一個js點擊事件

<form>
<img id="captcha_img" alt="點擊更換" title="點擊更換" onclick="changeVerifyCode(this)" src="../Kaptcha" >
<input type="text" id="j_captcha" >
<button type="submit" id="submit">提交</button>
</form>

function changeVerifyCode(img){
    img.src="../Kaptcha?" + Math.floor(Math.random() * 100);
}

這里changeVerifyCode函數其實就是調用了驗證碼的servlet去生成新的驗證碼

接着在點擊提交的時候去獲取輸入的驗證碼，並隨着formData提交給后台

$('#submit').click(function(){
var formData = new FormData();
var verifyCodeActual = $('#j_captcha').val();
            //點擊提交時，判斷驗證碼是否為空，如果為空，提示輸入驗證碼
            if(!verifyCodeActual){
                $.toast('請輸入驗');
                return;
            }
            //如果不為空，將驗證碼塞進formData里面去
            formData.append('verifyCodeActual',verifyCodeActual);
　　　　　　　

            //不管提交成功與否，驗證碼都會更換

　　　　　　  $('#captcha_img').click();
｝

提交到Controller層以后  在里面處理前端傳來的其他信息之前  先進行驗證碼的校驗 

這之前需要先編寫一個校驗驗證碼的工具類：

public class CodeUtil {
    
    /**
     * 判斷驗證碼輸入是否正確
     * @param request
     * @return
     */
    public static boolean chekVerifyCode(HttpServletRequest request) {
        //圖片里的驗證碼，從seesion中獲取。verifyCodeExepected這個為實際的驗證碼
        String verifyCodeExepected = (String)request.getSession().getAttribute(
                com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        //verifyCodeActual這個為輸入的驗證碼。將request中對應的key轉換為string類型的
        String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
        //如果輸入驗證碼與實際驗證碼不相等或空返回false，如果輸入驗證碼不為空切與實際驗證碼相等，返回true。
        if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExepected)) {
            return false;
        }
        return true;
    }
}

這里如果你的verifyCodeActual獲取不到值，看下你前端傳來的request是否含有文件流，如果有，說明你缺少處理文件流的MultipartResolver，因為前台傳入了文件流，后台沒法識別的到，導致request中session整個key都是空的，所以對於這種form里面有文件流的情況，就需要在配置文件中配置一個文件上傳解析器。（我配在了springmvc的配置文件中）

在配置之前，你要確保有這個文件上傳處理依賴的jar包：

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>

<!-- 文件上傳解析器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 默認編碼 -->
        <property name="defaultEncoding" value="utf-8"></property>
        <!-- 文件上傳最大尺寸 單位是字節 1024字節=1kb 1024kb=1mb-->
        <property name="maxUploadSize" value="20971520"></property>
        <!-- 最大內存 20MB -->
        <property name="maxInMemorySize" value="20971520"></property>
    </bean>

 

接着就可以在Controller層校驗驗證碼了：

　　　　//判斷驗證碼輸入是否正確，正確就跳出if，往下執行其他操作，若驗證碼輸入錯誤，結束當前方法，向前端傳錯誤信息
        if(!CodeUtil.chekVerifyCode(request)) {
            modelMap.put("errMsg", "輸入了錯誤的驗證碼");
            return modelMap;
        }