《JavaEE进阶》----14.＜SpringMVC配置文件实践之【验证码项目】＞

本篇博客介绍的是Google的开源项目Kaptcha来实现的验证码。

这种是最简单的验证码。

也是很常见的一种验证码。可以去看项目结果展示。就可以明白这个项目了。

前言：

随着安全性的要求越来越高、很多项目都使用了验证码。如今验证码的形式也是有许许多多、更复杂的图形验证码和行为验证码已经成为了更流行的趋势.

验证码的实现方式有很多，网上也有比较多的插件或者工具包可以使用。

本篇博客介绍的是Google的开源项目Kaptcha来实现的。

上图就是我们要做的验证码示例：

验证码 = 验证码 + 背景图片 + 干扰项

验证码前后端都可以做。

验证码的原理并不复杂。

项目需求：

首先我们来了解一下本篇讲解的验证码是什么样的。能达到什么效果。

1.页面生成验证码

2.输入验证码、点击提交、验证用户输入验证码是否正确、正确则进行页面跳转。不正确则继续刷新验证码、重新输入。

一、Kaptcha插件介绍

Kapycha 是Google的一个高度可配置的实用验证码生成工具。

1.1 验证码原理

验证码可以客户端生成，也可以服务器生成。对于普通的字符验证码，后端通常分两部分。

一是生成验证码内容，根据验证码内容和干扰项等生成图片，返回给客户端。

二是把验证码内容存储起来。校验时取出来进行对比。

kaptcha插件选择把验证码存储在Session里。

1.2引入依赖

首先我们要引入依赖，相当于下载好这个插件。

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

1.3生成验证码

这个插件提供了两种方式生成验证码

1.通过代码来生成（不具体说了）

2.仅通过配置文件来生成验证码（推荐使用）

Kaptcha详细配置（简单了解一下即可）

也可以使用Kaptcha.items配置多个验证码生成器。

Kaptcha.items是一个Map

key为验证码生成器名称、value为验证码生成器的配置

下面是我们在yml的类型的配置文件中的配置。这里简单示例一下：

#配置Kaptcha验证码
kaptcha:items:# home captchahome:path: /home/captchasession:key: HOME_KAPTCHA_SESSION_KEYdate: HOME_KAPTCHA_SESSION_DATE# admin captchaadmin:path: /admin/captchasession:key: ADMIN_KAPTCHA_SESSION_KEYdate: ADMIN_KAPTCHA_SESSION_DATE

配置说明：

home：生成器名称

path：生成器访问路径

session：

key：

date：

这三个是生成验证码存储中Session中的key

配置后,可以直接访问http://XXXX:port/home/captcha即可生成验证码

如我的访问路径就是

http://127.0.0.1:1208/home/captcha

http://127.0.0.1:1208/admin/captcha

两个都可以。

当刷新浏览器，就会刷新出新的验证码。

显然我们只是能够显示出验证码。那么我们如何让验证码为我们所用。达到验证的目的呢

类似于这样。这就是我们接下来要做的工作了。

二、配合Spring MVC来使用验证码

1.创建项目,引入SpringMVC的依赖包。

2.引入kapycha依赖。相当于下载，载入这个插件

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

3.使用yml配置文件生成验证码

kaptcha: border:enbaled: trueimage:height: 50width: 160text-producer:character:length: 4font:color: blueitems:admin:path: /admin/captchasession:key: KAPTCHA_SESSION_KEYdate: KAPTCHA_SESSION_DATE

生成的验证码效果如图所示：

在项目中放入前端代码：前端需要约定前后端交互接口。

2.1前端代码

1.进行前端页面展示

2.约定前后端交互接口。

<!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="captcha" id="inputCaptcha" /><imgid="verificationCodeImg"src="/admin/captcha"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>$("#verificationCodeImg").click(function () {$(this).hide().attr("src", "/admin/captcha?dt=" + new Date().getTime()).fadeIn(); //防止前端浏览器缓存});$("#checkCaptcha").click(function () {$.ajax({url: "/admin/check",type: "get",data: {captcha: $("#inputCaptcha").val(), //取值},success: function (result) {if (result) {location.href = "success.html";} else {alert("验证码校验错误！");}},});});</script></body>
</html>

前后端交互的代码：

    <script>$("#verificationCodeImg").click(function () {$(this).hide().attr("src", "/admin/captcha?dt=" + new Date().getTime()).fadeIn(); //防止前端浏览器缓存});$("#checkCaptcha").click(function () {$.ajax({url: "/admin/check",type: "get",data: {captcha: $("#inputCaptcha").val(), //取值},success: function (result) {if (result) {location.href = "success.html";} else {alert("验证码校验错误！");}},});});</script>

前端页面展示：

2.2后端代码

后端工作

1.生成验证码、并返回验证码

2.校验验证码是否正确。

2.2.1定义生成验证码的接口

通过get请求：/admin/captcha路径

响应图片内容。

2.2.2 校验验证码是否正确的接口

请求：/admin/check

captcha ：用户输入的验证码等于图片中的验证码

响应：true/false

@RequestMapping("/admin")
@RestController
public class KaptchaController {private static final String KAPTCHA_SESSION_KEY = "KAPTCHA_SESSION_KEY";private static final String KAPTCHA_SESSION_DATE = "KAPTCHA_SESSION_DATE";private static final long TIME_OUT = 60 * 1000; //一分钟/毫秒数@RequestMapping("/check")public boolean check(String captcha, HttpSession session){//判断输入的验证码是否为空if(!StringUtils.hasLength(captcha)){return false;}//获取生成的验证码String savedCaptcha = (String) session.getAttribute(KAPTCHA_SESSION_KEY);Date savedCaptchaData = (Date) session.getAttribute(KAPTCHA_SESSION_DATE);System.out.println(savedCaptcha);if(captcha.equalsIgnoreCase(savedCaptcha)){//不区分验证码的大小写进行比对//savedCaptchaData != null//在 Session 中不存在或尚未存储时，尝试读取它的值会导致空指针异常，程序会中断。//在后续的时间计算逻辑中可能会出现错误。...if(savedCaptchaData != null && System.currentTimeMillis()-savedCaptchaData.getTime() < TIME_OUT ){return true;}}return false;}}