快捷導(dǎo)航

springboot驗(yàn)證碼生成以及驗(yàn)證功能舉例詳解

更新時(shí)間：2023年04月15日 10:40:06 作者：Starbright.

登錄注冊是大部分系統(tǒng)需要實(shí)現(xiàn)的基本功能,同時(shí)也會(huì)對登錄驗(yàn)證增加需求,下面這篇文章主要給大家介紹了關(guān)于springboot驗(yàn)證碼生成以及驗(yàn)證功能的相關(guān)資料,需要的朋友可以參考下

1.easy-captcha工具包

生成驗(yàn)證碼的方式有許多種，這里選擇的是easy-captcha工具包。

github開原地址為：easy-captcha工具包

其支持Java圖形驗(yàn)證碼，支持gif、中文、算術(shù)等類型，可用于Java Web、JavaSE等項(xiàng)目。

2添加依賴

首先需要將easy-captcha的依賴配置文件增加到pom.xml文件中。

開源項(xiàng)目中已經(jīng)寫好了導(dǎo)入依賴語句復(fù)制粘貼過去即可。

   <dependency>
      <groupId>com.github.whvcse</groupId>
      <artifactId>easy-captcha</artifactId>
      <version>1.6.2</version>
   </dependency>

3.驗(yàn)證碼字符類型

使用方法：

//生成驗(yàn)證碼對象
SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
//設(shè)置驗(yàn)證碼的字符類型
captcha.setCharType(Captcha.TYPE_ONLY_NUMBER);

4.字體設(shè)置

如果不想使用內(nèi)置字體也可以使用系統(tǒng)字體。使用方法如下：

//生成驗(yàn)證碼對象
SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);

// 設(shè)置內(nèi)置字體
captcha.setFont(Captcha.FONT_1); 

// 設(shè)置系統(tǒng)字體
captcha.setFont(new Font("楷體", Font.PLAIN, 28));

5驗(yàn)證碼圖片輸出

這里可以選擇輸出為文件流，這是比較常見的處理方式。當(dāng)然，也有一些Web項(xiàng)目會(huì)使用base64編碼的圖片。這兩種方式easy-captcha都支持。
base64編碼的輸出方法如下所示：

SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
specCaptcha.toBase64();

// 如果不想要base64的頭部data:image/png;base64,
specCaptcha.toBase64("");  // 加一個(gè)空的參數(shù)即可

輸出到磁盤上的方法如下所示：

FileOutputStream outputStream = new FileOutputStream(new File("C:/captcha.png"))
SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
specCaptcha.out(outputStream);

該段代碼為生成一張圖片并保存到磁盤目錄中，這里可以使用easy-captcha工具自帶的out()方法輸出。而在開發(fā)Web項(xiàng)目時(shí)，則會(huì)使用Response對象的輸出流進(jìn)行驗(yàn)證碼的輸出。

6.生成并顯示驗(yàn)證碼

6.1后端

在controller包中新建KaptchaController類，就可以新建一個(gè)方法。在方法里使用GifCaptcha可以生成一個(gè)PNG類型的驗(yàn)證碼對象，并以圖片流的方式輸出到前端以供顯示，代碼如下所示：

@Controller
public class KaptchaController {
    @GetMapping("/kaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception{
        httpServletResponse.setHeader("Cache-Control","no-store");
        httpServletResponse.setHeader("Pragma","no-cache");
        httpServletResponse.setDateHeader("Expires",0);
        httpServletResponse.setContentType("image/gif");

        //生成驗(yàn)證碼對象,三個(gè)參數(shù)分別是寬、高、位數(shù)
        SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
        //設(shè)置驗(yàn)證碼的字符類型為數(shù)字和字母混合
        captcha.setCharType(Captcha.TYPE_DEFAULT);
        // 設(shè)置內(nèi)置字體
        captcha.setCharType(Captcha.FONT_1);
        //驗(yàn)證碼存入session
        httpServletRequest.getSession().setAttribute("verifyCode",captcha.text().toLowerCase());
        //輸出圖片流
        captcha.out(httpServletResponse.getOutputStream());
    }
}

這里在控制器中新增了defaultKaptcha()方法，該方法所攔截處理的路徑為/kaptcha。在前端訪問該路徑后就可以接收一個(gè)圖片流并顯示在瀏覽器頁面上。

6.2前端

在static目錄中新建kaptcha.html頁面，在該頁面中顯示驗(yàn)證碼，代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>驗(yàn)證碼顯示</title>
</head>
<body>
<img src="/kaptcha" onclick="this.src='/kaptcha?d='+new Date()*1" />
</body>
</html>

首先訪問后端驗(yàn)證碼路徑/kaptcha，由于驗(yàn)證碼是圖片形式，所以將其顯示在img標(biāo)簽中。然后定義onclick方法，在點(diǎn)擊該img標(biāo)簽時(shí)可以動(dòng)態(tài)切換顯示一個(gè)新的驗(yàn)證碼。點(diǎn)擊時(shí)訪問的路徑為’/kaptcha?d='+new Date()*1，即原來的驗(yàn)證碼路徑后面帶上一個(gè)時(shí)間戳參數(shù)d。時(shí)間戳是會(huì)變化的，所以每次點(diǎn)擊都會(huì)是一個(gè)與之前不同的請求。如果不這樣處理的話，由于瀏覽器的緩存機(jī)制，在點(diǎn)擊刷新驗(yàn)證碼后可能不會(huì)重新發(fā)送請求，將導(dǎo)致在一段時(shí)間內(nèi)一直顯示同一張驗(yàn)證碼圖片。

在編碼完成后，啟動(dòng)Spring Boot項(xiàng)目。在啟動(dòng)成功后打開瀏覽器并輸入驗(yàn)證碼顯示的測試頁面地址

http://localhost:8080/kaptcha

效果如下：

7 驗(yàn)證碼的輸入驗(yàn)證

一般的做法是在后端生成驗(yàn)證碼后，首先對當(dāng)前生成的驗(yàn)證碼內(nèi)容進(jìn)行保存，可以選擇保存在session對象中，或者保存在緩存中，或者保存在數(shù)據(jù)庫中。然后，返回驗(yàn)證碼圖片并顯示到前端頁面。用戶在識(shí)別驗(yàn)證碼后，在頁面對應(yīng)的輸入框中填寫驗(yàn)證碼并向后端發(fā)送請求，后端在接到請求后會(huì)對用戶輸入的驗(yàn)證碼進(jìn)行驗(yàn)證。如果用戶輸入的驗(yàn)證碼與之前保存的驗(yàn)證碼不相等的話，則返回“驗(yàn)證碼錯(cuò)誤”的提示消息且不會(huì)進(jìn)行后續(xù)的流程，只有驗(yàn)證成功才會(huì)繼續(xù)后續(xù)的流程。

7.1后端

在KaptchaController類中新增verify()方法，代碼如下所示：

    public String verify(@RequestParam("code") String code, HttpSession session){
        if (!StringUtils.hasLength(code)){
            return "驗(yàn)證碼不能為空";
        }
        String kaptchaCode = session.getAttribute("verifyCode")+"";
        if (!StringUtils.hasLength(kaptchaCode)||!code.toLowerCase().equals(kaptchaCode)){
            return "驗(yàn)證碼錯(cuò)誤";
        }
        return "驗(yàn)證成功";
    }

該方法所攔截處理的路徑為/verify，請求參數(shù)為code，即用戶輸入的驗(yàn)證碼。在進(jìn)行基本的非空驗(yàn)證后，與之前保存在session中的verifyCode值進(jìn)行比較，如果兩個(gè)字符串不相等則返回“驗(yàn)證碼錯(cuò)誤”的提示，二者相同則返回“驗(yàn)證碼成功”的提示。

7.2前端

在static目錄中新建verify.html，該頁面會(huì)顯示驗(yàn)證碼，同時(shí)也包含供用戶輸入驗(yàn)證碼的輸入框和提交按鈕，代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>驗(yàn)證碼測試</title>
</head>
<body>
<img src="/kaptcha" onclick="this.src='/kaptcha?d='+new Date()*1" />
<br>
<input type="text" maxlength="5" id="code" placeholder="請輸入驗(yàn)證碼" />
<button id="verify">驗(yàn)證</button>
<br>
<p id="verifyResult">
</p>
</body>
<!--jqGrid依賴jQuery,因此需要先引入jquery.min.js文件，下方地址為字節(jié)跳動(dòng)提供的cdn地址-->
<script src="http://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
    //驗(yàn)證按鈕的點(diǎn)擊事件
        $('#verify').click(function () {
            var code = $('#code').val();
            $.ajax({
                type: 'GET',//方法類型
                url: '/verify?code='+code,
                success: function (result) {
                //將驗(yàn)證結(jié)果顯示在p標(biāo)簽中
                    $('#verifyResult').html(result);
                },
                error:function () {
                    alert('請求失敗');
                },
            });
        });
    });
</script>
</html>

用戶識(shí)別顯示在頁面上的驗(yàn)證碼后，就可以在input框中輸入驗(yàn)證碼并點(diǎn)擊“驗(yàn)證”按鈕。在JS代碼中已經(jīng)定義了“驗(yàn)證”按鈕的點(diǎn)擊事件，一旦點(diǎn)擊，就會(huì)獲取用戶在輸入框中輸入的內(nèi)容，并將其作為請求參數(shù)向后端發(fā)送請求，驗(yàn)證用戶輸入的驗(yàn)證碼是否正確，后端在處理完成后會(huì)返回處理結(jié)果，拿到處理結(jié)果就顯示在id為verifyResult的p標(biāo)簽中。