Kaptcha—Google验证码工具

[1. Kaptcha的Maven依赖](#1. Kaptcha的Maven依赖)

[2. Kaptcha对jdk与SpringBoot的要求](#2. Kaptcha对jdk与SpringBoot的要求)

[3. application.yml](#3. application.yml)

[4. 前后端程序](#4. 前后端程序)

[4.1 后端：controller](#4.1 后端：controller)

[4.2 前端](#4.2 前端)

[5. 测试](#5. 测试)

Kaptcha是Google提供的开源验证码工具，用于生成图片验证码。

1. Kaptcha的Maven依赖

XML 复制代码

        <dependency>
            <groupId>com.oopsguy.kaptcha</groupId>
            <artifactId>kaptcha-spring-boot-starter</artifactId>
            <version>1.0.0-beta-2</version>
        </dependency>

2. Kaptcha对jdk与SpringBoot的要求

jdk8须搭配Spring Boot 2.x版本使用，jdk17须搭配Spring Boot 3.x版本使用；
kaptcha-spring-boot-starter依赖是为Spring Boot 2.x和jdk8设计的，在Spring Boot 3.x和jdk17的项目中无法直接使用。

故请在创建项目时选择jdk8与Spring Boot 2.x版本：

并检查以下几处的版本对应：

3. application.yml

在yml文件中进行Kaptcha的配置：

html 复制代码

server:
  port: 8080
kaptcha:
  image:
    width: 140
    height: 60
  textproducer:
    font:
      size: 26
  items:
#    home:
#      path: /home/kaptcha
#      session:
#        key: HOME_KAPTCHA_SESSION_KEY
#        date: HOME_KAPTCHA_SESSION_DATE

    admin:
      path: /admin/kaptcha
      session:
        key: ADMIN_KAPTCHA_SESSION_KEY
        date: ADMIN_KAPTCHA_SESSION_DATE
  noise:
    color: blue

注：也可以使用application.properties。

4. 前后端程序

4.1 后端：controller

创建controller包，并在包下创建一个KaptchaController文件：

java 复制代码

package com.example.kaptcha.controller;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.util.Date;

@RestController
@RequestMapping("/admin")
public class KaptchaController {
    private static final String KAPTCHA_SESSION_KEY ="ADMIN_KAPTCHA_SESSION_KEY";
    private static final String KAPTCHA_SESSION_DATE ="ADMIN_KAPTCHA_SESSION_DATE";
    // 验证码有效时间单位为60*10^3ms=60s=1min
    private static final Long SESSION_TIMEOUT=60 * 1000L;
    /**
     * 验证码后端验证
     * @param kaptcha与HttpSession
     * @return false表示验证失败，true表示验证成功
     */
    /**
     * 1. 从Session中获取生成的验证码
     * 2. 对比前端传递的验证码和Session中存储的是否一致
     */
    @RequestMapping("/check")
    public boolean check(String kaptcha, HttpSession session){
        // 前端验证码为空则返回false
        if(!StringUtils.hasLength(kaptcha)){
            return false;
        }
        // 从Session中获取验证码
        String saveKaptcha = (String)session.getAttribute(KAPTCHA_SESSION_KEY);
        Date saveDate = (Date)session.getAttribute(KAPTCHA_SESSION_DATE);
        if(kaptcha.equals(saveKaptcha)){
            if(saveDate == null || System.currentTimeMillis()-saveDate.getTime()<SESSION_TIMEOUT){
                return true;
            }
        }
        return false;
    }
}

4.2 前端

在static目录下创建一个index.html文件表示验证码生成与输入页：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>验证码</title>
    <style>
        #inputCaptcha {
            height: 30px;
            vertical-align: middle;
        }

        #verificationCodeImg {
            vertical-align: middle;
        }

        #checkCaptcha {
            height: 40px;
            width: 100px;
        }
    </style>
</head>

<body>
<h1>输入验证码</h1>
<div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/admin/kaptcha" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    $(function () {
        $("#verificationCodeImg").click(function () {
            $(this).hide().attr('src', '/admin/kaptcha?dt=' + new Date().getTime()).fadeIn();
        });

        $("#checkCaptcha").click(function () {
            $.ajax({
                type: "get",
                url: "/admin/check",
                data: {
                    kaptcha: $("#inputCaptcha").val()
                },
                success: function (result) {
                    if (result.toString().trim()=='true') {
                        // if(Boolean(result)){
                        location.href = "success.html";
                    } else {
                        alert("验证码错误");
                    }
                }
            });
        });
    });


</script>
</body>

</html>

再创建一个success.html表示验证码校验成功后的跳转页面：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证成功页</title>
</head>
<body>
<h1>验证成功</h1>
</body>
</html>

注：后端接口的返回结果是一个字符串，尤其在后端接口处定义返回类型是布尔类型时尤其注意。

在index.html中有一个使用JQuery进行的if判断，请注意此处的写法：

（1）if(result)：✘

（2）if(result=='true')：✘

（3）if(Boolean(result))：✔

（4）result.toString().trim()=='true'：✔

5. 测试

首先使用/index.html打开验证码生成页面：

再打开一个/admin/check页面，以验证码作为kaptcha参数值，组织为query string部分作为url：

可见后端无误，再验证前端，对应输入后即可实现跳转：