Springboot整合kaptcha實作驗證碼

驗證碼的作用

防止惡意破解密碼、刷票、論壇灌水、刷頁。

有效防止某個黑客對某一個特定注冊使用者用特定程式暴力破解方式進行不斷的登入嘗試，實際上使用驗證碼是現在很多網站通行的方式（比如招商銀行的網上個人銀行，百度社群），我們利用比較簡易的方式實作了這個功能。雖然登入麻煩一點，但是對網友的密碼安全來說這個功能還是很有必要，也很重要。但我們還是 提醒大家要保護好自己的密碼 ，盡量使用混雜了數字、字母、符号在内的 6 位以上密碼，不要使用諸如 1234 之類的簡單密碼或者與使用者名相同、類似的密碼 ，免得你的賬号被人盜用給自己帶來不必要的麻煩。

驗證碼通常使用一些線條和一些不規則的字元組成，主要作用是為了防止一些黑客把密碼資料化盜取。

Kaptcha 簡介

kaptcha 是一個很有用的驗證碼生成工具，由于它有許多可配置項，是以用它可以簡單快捷的生成各式各樣的驗證碼。可自由配置的選項如：

• 驗證碼的字型
• 驗證碼字型的大小
• 驗證碼字型的字型顔色
• 驗證碼内容的範圍(數字，字母，中文漢字！)
• 驗證碼圖檔的大小，邊框，邊框粗細，邊框顔色
• 驗證碼的幹擾線
• 驗證碼的樣式(魚眼樣式、3D、普通模糊、...)

Kaptcha 詳細配置表

Constant	描述	預設值
kaptcha.border	圖檔邊框，合法值：yes , no	yes
kaptcha.border.color	邊框顔色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.	black
kaptcha.image.width	圖檔寬	200
kaptcha.image.height	圖檔高	50
kaptcha.producer.impl	圖檔實作類	com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl	文本實作類	com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string	文本集合，驗證碼值從此集合中擷取	abcde2345678gfynmnpwx
kaptcha.textproducer.char.length	驗證碼長度	5
kaptcha.textproducer.font.names	字型	Arial, Courier
kaptcha.textproducer.font.size	字型大小	40px.
kaptcha.textproducer.font.color	字型顔色，合法值： r,g,b 或者 white,black,blue.	black
kaptcha.textproducer.char.space	文字間隔	2
kaptcha.noise.impl	幹擾實作類	com.google.code.kaptcha.impl.DefaultNoise
kaptcha.noise.color	幹擾 顔色，合法值： r,g,b 或者 white,black,blue.	black
kaptcha.obscurificator.impl	圖檔樣式：<br />水紋 com.google.code.kaptcha.impl.WaterRipple <br /> 魚眼 com.google.code.kaptcha.impl.FishEyeGimpy <br /> 陰影 com.google.code.kaptcha.impl.ShadowGimpy	com.google.code.kaptcha.impl.WaterRipple
kaptcha.background.impl	背景實作類	com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from	背景顔色漸變，開始顔色	light grey
kaptcha.background.clear.to	背景顔色漸變， 結束顔色	white
kaptcha.word.impl	文字渲染器	com.google.code.kaptcha.text.impl.DefaultWordRenderer
kaptcha.session.key	session key	KAPTCHA_SESSION_KEY
kaptcha.session.date	session date	KAPTCHA_SESSION_DATE

Springboot整合Kaptcha

1.引入maven依賴

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

2.編寫kaptcha配置資訊

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
    <!-- 生成kaptcha的bean-->
    <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
        <property name="config">
            <bean class="com.google.code.kaptcha.util.Config">
                <constructor-arg type="java.util.Properties">
                    <!--設定kaptcha屬性 -->
                    <props>
                        <!-- 是否有邊框 -->
                        <prop key="kaptcha.border ">yes</prop>
                        <!-- 邊框顔色 -->
                        <prop key="kaptcha.border.color">105,179,90</prop>
                        <!-- 字型顔色 -->
                        <prop key="kaptcha.textproducer.font.color">blue</prop>
                        <!-- 圖檔寬度 -->
                        <prop key="kaptcha.image.width">100</prop>
                        <!-- 圖檔高度 -->
                        <prop key="kaptcha.image.height">50</prop>
                        <!-- 字型大小 -->
                        <prop key="kaptcha.textproducer.font.size">27</prop>
                        <!-- session key -->
                        <prop key="kaptcha.session.key">code</prop>
                        <!-- 驗證碼長度 -->
                        <prop key="kaptcha.textproducer.char.length">4</prop>
                        <!-- 字型 -->
                        <prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop>
                        <!-- 使用哪些字元 -->
                        <prop key="kaptcha.textproducer.char.string">0123456789</prop>
                        <!-- 圖檔樣式 水紋 -->
                        <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.WaterRipple</prop>
                        <!-- 幹擾顔色 -->
                        <prop key="kaptcha.noise.color">black</prop>
                        <!-- 幹擾實作類 -->
                        <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.DefaultNoise</prop>
                        <!-- 背景漸變 開始顔色 -->
                        <prop key="kaptcha.background.clear.from">185,56,213</prop>
                        <!-- 背景漸變 結束顔色 -->
                        <prop key="kaptcha.background.clear.to">white</prop>
                        <!-- 字元間隔 -->
                        <prop key="kaptcha.textproducer.char.space">3</prop>
                    </props>
                </constructor-arg>
            </bean>
        </property>
    </bean>
</beans>
           

可以使用xml，也可以使用注解conifg配置

3.利用剛才配置的Bean編寫Controller，用于給用戶端請求獲得驗證碼圖檔

package cn.lzx.university_shop.controller;

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;

/**
 * 用于生成驗證碼
 */

@Controller
public class CodeController {

    @Autowired
    private Producer captchaProducer = null;

    @RequestMapping("/kaptcha")
    public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
        HttpSession session = request.getSession();
        response.setDateHeader("Expires", 0);
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        response.setHeader("Pragma", "no-cache");
        response.setContentType("image/jpeg");
        //生成驗證碼
        String capText = captchaProducer.createText();
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        //向用戶端寫出
        BufferedImage bi = captchaProducer.createImage(capText);
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(bi, "jpg", out);
        try {
            out.flush();
        } finally {
            out.close();
        }
    }



}
           

4.編寫頁面

<!-- 驗證碼 kaptcha -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">驗證碼</div>
                                <input type="text" id="j_kaptcha" placeholder="驗證碼">
                                <div class="item-input">
                                    <img id="kaptcha_img" alt="點選更換" title="點選更換"
                                    onclick="changeVerifyCode(this)" src="/o2o/kaptcha">
                                </div>
                            </div>
                        </div>
                    </li>
           

src請求路徑即剛才Controller的通路路徑

5.服務端效驗

package cn.lzx.university_shop.utils;

import com.google.code.kaptcha.Constants;

import javax.servlet.http.HttpServletRequest;

/**
 * 驗證碼
 */
public class CodeUtils {

    public static boolean checkVerifyCode(HttpServletRequest request){
        //期待值
        String verifyCodeExpected = (String)request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
        //真實值
        String verifyCodeActual = request.getParameter("verifyCodeActual");
        if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)){
            return false;
        }
        return true;
    }

}
           

期待值的key是剛才Controller裡面設定的，真實值的key是前端傳遞過來的。