【JavaEE进阶】实现验证码

忘是亡心i 2024-04-17 10:47 91阅读 0赞

#### 文章目录 ####

*  ?实现说明
 *  ?Kaptcha插件介绍
 *   *  ?插件原理
     *  ?引入依赖
     *  ?⽣成验证码
     *  ?Kaptcha详细配置
 *  ?准备⼯作
 *  ?约定前后端交互接⼝
 *   *  ?需求分析
     *  ?接⼝定义
     *  ?实现服务器后端代码
 *  ⭕总结

## ?实现说明 ##

随着安全性的要求越来越⾼,⽬前项⽬中很多都使⽤了验证码,验证码的形式也是多种多样,更复杂的图形验证码和⾏为验证码已经成为了更流⾏的趋势.  
![在这里插入图片描述][5acaab38146d4268b12047a6812d6aa3.png]

验证码的实现⽅式很多,⽹上也有⽐较多的插件或者⼯具包可以使⽤,这里博主选择使⽤Google的开源项⽬Kaptcha来实现.

## ?Kaptcha插件介绍 ##

Kaptcha是Google的⼀个⾼度可配置的实⽤验证码⽣成⼯具.代码: [代码链接][Link 1]

⽹上有很多⼈甚⾄公司基于Google的kaptcha进⾏了⼆次开发.我们选择⼀个直接适配SpringBoot的开源项⽬：[项目地址][Link 2]

下⾯简单介绍下插件的使⽤

### ?插件原理 ###

验证码可以客⼾端⽣成,也可以服务器⽣成.对于普通的字符验证码,后端通常分两部分.

*  ⼀是⽣成验证码内容,根据验证码内容和⼲扰项等,⽣成图⽚,返回给客⼾端
 *  ⼆是把验证码内容存储起来,校验时取出来进⾏对⽐.

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

### ?引入依赖 ###

想要使用该插件，我们需要引入以下依赖

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

### ?⽣成验证码 ###

该插件提供了两种⽅式⽣成验证码

*  通过代码来⽣成( [参考文档][Link 3] 不再介绍)
 *  仅通过配置⽂件来⽣成验证码(推荐)

博主这里实现也是使用验证码进行实现

### ?Kaptcha详细配置 ###

关于Kaptcha详细配置如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>配置项</th> 
   <th>配置说明</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>kaptcha.border</td> 
   <td>图⽚边框，合法值：yes,no</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>kaptcha.border.color</td> 
   <td>边框颜⾊，合法值：r,g,b(and optionalalpha)或者white,black,blue.</td> 
   <td>black</td> 
  </tr> 
  <tr> 
   <td>kaptcha.image.width</td> 
   <td>图⽚宽</td> 
   <td>200</td> 
  </tr> 
  <tr> 
   <td>kaptcha.image.height</td> 
   <td>图⽚⾼</td> 
   <td>50</td> 
  </tr> 
  <tr> 
   <td>kaptcha.producer.impl</td> 
   <td>图⽚实现类</td> 
   <td>com.google.code.kaptcha.impl.DefaultKaptcha</td> 
  </tr> 
  <tr> 
   <td>kaptcha.textproducer.impl</td> 
   <td>⽂本实现类</td> 
   <td>com.google.code.kaptcha.text.impl.DefaultTextCreator</td> 
  </tr> 
  <tr> 
   <td>kaptcha.textproducer.char.string</td> 
   <td>⽂本集合，验证码值从此集合中获取</td> 
   <td>abcde2345678gfynmnpwx</td> 
  </tr> 
  <tr> 
   <td>kaptcha.textproducer.char.length</td> 
   <td>验证码⻓度</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>kaptcha.textproducer.font.names</td> 
   <td>字体</td> 
   <td>Arial,Courier</td> 
  </tr> 
  <tr> 
   <td>kaptcha.textproducer.font.size</td> 
   <td>字体⼤⼩</td> 
   <td>40px.</td> 
  </tr> 
  <tr> 
   <td>kaptcha.textproducer.font.color</td> 
   <td>字体颜⾊，合法值：r,g,b或者white,black,blue.</td> 
   <td>black</td> 
  </tr> 
  <tr> 
   <td>kaptcha.textproducer.char.space</td> 
   <td>⽂字间隔</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>kaptcha.noise.impl</td> 
   <td>⼲扰实现类</td> 
   <td>com.google.code.kaptcha.impl.DefaultNoise</td> 
  </tr> 
  <tr> 
   <td>kaptcha.noise.color</td> 
   <td>⼲扰颜⾊，合法值：r,g,b或者white,black,blue.</td> 
   <td>black</td> 
  </tr> 
  <tr> 
   <td>kaptcha.obscurificator.impl</td> 
   <td>图⽚样式:⽔纹com.google.code.kaptcha.impl.WaterRipple⻥眼com.google.code.kaptcha.impl.FishEyeGimpy阴影com.google.code.kaptcha.impl.ShadowGimpy</td> 
   <td>com.google.code.kaptcha.impl.WaterRipple</td> 
  </tr> 
  <tr> 
   <td>kaptcha.background.impl</td> 
   <td>背景实现类</td> 
   <td>com.google.code.kaptcha.impl.DefaultBackground</td> 
  </tr> 
  <tr> 
   <td>kaptcha.background.clear.from</td> 
   <td>背景颜⾊渐变，开始颜⾊</td> 
   <td>light grey</td> 
  </tr> 
  <tr> 
   <td>kaptcha.background.clear.to</td> 
   <td>背景颜⾊渐变，结束颜⾊</td> 
   <td>white</td> 
  </tr> 
  <tr> 
   <td>kaptcha.word.impl</td> 
   <td>⽂字渲染器 com.google.code.kaptcha.text.impl.DefaultWordRenderer</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>kaptcha.session.key</td> 
   <td>session</td> 
   <td>key KAPTCHA_SESSION_KEY</td> 
  </tr> 
  <tr> 
   <td>kaptcha.session.date</td> 
   <td>session date</td> 
   <td>KAPTCHA_SESSION_DATE</td> 
  </tr> 
 </tbody> 
</table>

使⽤ kaptcha.items可以 配置多个验证码⽣成器

kaptcha.items 是⼀个Map,key为验证码⽣成器名称,value为验证码⽣成器的配置

kaptcha:
     items:
      home:
       path: /home/captcha
       session:
        key: KAPTCHA_SESSION_KEY
        date: KAPTCHA_SESSION_DATE

![在这里插入图片描述][a2a5952302b24fe9b5d47642cde93f7b.png]  
配置后,可以直接访问http://XXXX:port/home/captcha即可⽣成验证码

了解了该插件后，我们来开始做项目

## ?准备⼯作 ##

创建项⽬,引⼊SpringMVC的依赖包,把前端⻚⾯放在项⽬中(这里博主直接给出)

![在这里插入图片描述][301c8cf258874ab1900b40fdef36718a.png]  
index.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/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("验证码错误");
                $("#inputCaptcha").val("");
              }
            }
          });
        });
      </script>
    </body>
    
    </html>

success.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>

## ?约定前后端交互接⼝ ##

### ?需求分析 ###

界⾯如下图所⽰

1.  ⻚⾯⽣成验证码
2.  输⼊验证码,点击提交,验证⽤⼾输⼊验证码是否正确,正确则进⾏⻚⾯跳转  
    ![在这里插入图片描述][1a8ae720a4d8482caa9160be42205795.png]  
    ![在这里插入图片描述][ce8eaa7282724c26a4a5731739c1e864.png]

后端需要提供两个服务

1.  ⽣成验证码,并返回验证码
2.  校验验证码是否正确:校验验证码是否正确

### ?接⼝定义 ###

***接口一：⽣成验证码***

请求：

> GET /admin/captcha

响应：图片内容

> 浏览器给服务器发送⼀个 GET /admin/captcha 这样的请求,服务器返回⼀个图⽚,浏览器显⽰在⻚⾯上

***接口二：校验验证码是否正确***

请求:/admin/check

> POST /admin/check  
> captcha=xn8d

> captcha:⽤⼾输⼊的验证码

响应：

> true

根据⽤⼾输⼊的验证码,校验验证码是否正确true:验证成功.false:验证失败

### ?实现服务器后端代码 ###

我们分为三步完成

第一步引入依赖，上面已讲过了，直接引入就好

第二步通过配置创建验证码⽣成器

配置如下：

kaptcha:
     image:
      width: 200
      height: 50
     textproducer:
      font:
       size: 40
     items:
      home:
       path: /admin/captcha
       session:
        key: KAPTCHA_SESSION_KEY
        date: KAPTCHA_SESSION_DATE

第三步，验证码校验

这里我们需要根据前端传回来的验证码与服务器session中取得值做一个比对

除此之外我还添加了验证码为null时，返回false。以及一个验证码得时效性，当超过一定时间，该验证码就不能够再进行验证了，返回false

代码实现如下：

@RequestMapping("/admin")
    @RestController
    public class KaptchaController {
        
        //设置时间问60s
        private final static long VALID_MILLIS_TIME = 60 * 1000;
        @RequestMapping("/check")
        public boolean checkHomeCaptcha(String captcha, HttpSession session) {
        
            if (!StringUtils.hasLength(captcha)) {
        
                return false;
            }
            //获取验证码
            String savedCaptcha = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
            //获取验证生成时间
            Date sessionDate = (Date) session.getAttribute(Constants.KAPTCHA_SESSION_DATE);
            if (captcha.equalsIgnoreCase(savedCaptcha)) {
        
                if (sessionDate == null || System.currentTimeMillis() - sessionDate.getTime() < VALID_MILLIS_TIME)
                    return true;
            }
            return false;
        }
    }

注意事项：  
![在这里插入图片描述][4bacfd14b8d54ce59ade22b68fb2dadc.png]  
![在这里插入图片描述][9dbd632409cf4cc3a118b6570c2b1f15.png]

## ⭕总结 ##

关于《【JavaEE进阶】实现验证码》就讲解到这儿，感谢大家的支持，欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注，点赞，收藏支持一下！

[5acaab38146d4268b12047a6812d6aa3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/33666b58f2ae472b83c76ff26b1d3ee9.png
[Link 1]: http://code.google.com/p/kaptcha/
[Link 2]: https://github.com/oopsguy/kaptcha-spring-boot
[Link 3]: https://github.com/oopsguy/kaptcha-spring-boot/blob/master/README_zh-CN.md,
[a2a5952302b24fe9b5d47642cde93f7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/5d0f208bb412442b8d34c9025ce0e90b.png
[301c8cf258874ab1900b40fdef36718a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/f25cb582a67144409265b50cdb15f4a4.png
[1a8ae720a4d8482caa9160be42205795.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/661381e20a1944b4a36aaa51fbf83029.png
[ce8eaa7282724c26a4a5731739c1e864.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/3b99cee4d8ca48398f0a3c696e64d954.png
[4bacfd14b8d54ce59ade22b68fb2dadc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/34f0d04aed6a435daa46e122604d0423.png
[9dbd632409cf4cc3a118b6570c2b1f15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/22dc5e804dc74649b69cbf4157de627b.png