Kaptcha图片验证码工具&SpringBoot整合kaptcha（谷歌验证码工具）实现验证码功能

Love The Way You Lie 2023-10-09 23:59 107阅读 0赞

**验证码的作用**

图片验证码自从诞生以来从未被抛弃，依然发出属于它所应有的光。验证码经常验证如下一些场景。

1、用户登录，防止机器人登录

2、论坛留言，防止恶意灌水

3、短信验证码发送，防止盗刷短信

### **Kaptcha 简介** ###

Kaptcha 是一个可高度配置的实用验证码生成工具，可自由配置的选项如：

*  验证码的字体
 *  验证码字体的大小
 *  验证码字体的字体颜色
 *  验证码内容的范围(数字，字母，中文汉字！)
 *  验证码图片的大小，边框，边框粗细，边框颜色
 *  验证码的干扰线
 *  验证码的样式(鱼眼样式、3D、普通模糊)

### Kaptcha详细配置表 ###

配置项：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
    描述：图片样式，
       水纹 com.google.code.kaptcha.impl.WaterRipple 
       鱼眼 com.google.code.kaptcha.impl.FishEyeGimpy 
       阴影 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、pom.xml文件中引入

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

2、配置DefaultKaptcha

import java.util.Properties;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    import com.google.code.kaptcha.impl.DefaultKaptcha;
    import com.google.code.kaptcha.util.Config;
    
    @Configuration
    public class ConfigBean {
        
    
        @Bean
        public DefaultKaptcha getDefaultKaptcha(){
        
            DefaultKaptcha dk = new DefaultKaptcha();
            Properties properties = new Properties();
            properties.put("kaptcha.border", "yes");
            properties.put("kaptcha.border.color","105,179,90");
            properties.put("kaptcha.textproducer.font.color","blue");
            properties.put("kaptcha.image.width","125");
            properties.put("kaptcha.image.height","45");
            properties.put("kaptcha.textproducer.font.size","45");
            properties.put("kaptcha.session.key","code");
            properties.put("kaptcha.textproducer.char.length","4");
            properties.put("kaptcha.textproducer.font.names","宋体,楷体,微软雅黑");
            Config config = new Config(properties );
            dk.setConfig(config);
            return dk;
        }
    
    }

3、编写controller

package com.piano.student.controller;
    
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.google.code.kaptcha.Constants;
    import com.google.code.kaptcha.impl.DefaultKaptcha;
    
    @Controller
    public class KaptchaController {
        
    
        @Autowired
        private DefaultKaptcha captchaProducer;
    
        @RequestMapping(value = "verification", method = RequestMethod.GET)
        public ModelAndView verification(HttpServletRequest request, HttpServletResponse response) throws IOException {
        
            response.setDateHeader("Expires", 0);
            // Set standard HTTP/1.1 no-cache headers.
            response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
            // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
            response.addHeader("Cache-Control", "post-check=0, pre-check=0");
            // Set standard HTTP/1.0 no-cache header.
            response.setHeader("Pragma", "no-cache");
            // return a jpeg
            response.setContentType("image/jpeg");
            // create the text for the image
            String capText = captchaProducer.createText();
            // store the text in the session
            request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
            // create the image with the text
            BufferedImage bi = captchaProducer.createImage(capText);
            ServletOutputStream out = response.getOutputStream();
            // write the data out
            ImageIO.write(bi, "jpg", out);
            try {
        
                out.flush();
            } finally {
        
                out.close();
            }
            return null;
        }
    }

4、访问http://127.0.0.1:8083/verification

![Kaptcha图片验证码工具\_配置项][Kaptcha]

--------------------

### 介绍： ###

#### kaptcha是Google提供的一个图形验证码插件，有了它，你可以通过简单的配置生成各种样式的验证码。 ####

### 1：SpringBoot引入kaptcha的依赖 ###

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

### 2：编写kaptcha配置类 ###

package simulationvirtual.VirtualExperiment.config;
     
    import com.google.code.kaptcha.Producer;
    import com.google.code.kaptcha.impl.DefaultKaptcha;
    import com.google.code.kaptcha.util.Config;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
     
    import java.util.Properties;
     
    @Configuration
    public class KaptchaConfig {
        
        /**
         * Kaptcha图形验证码工具配置类
         * @author: Xiongch
         * @param:
         * @return: com.google.code.kaptcha.Producer
         * @date: 2022/9/9 15:47
         */
        @Bean
        public Producer kaptchaProducer() {
        
            // 实例一个DefaultKaptcha
            DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
            // 创建配置对象
            Properties properties = new Properties();
            // 设置边框
            properties.setProperty("kaptcha.border", "yes");
            // 设置颜色
            properties.setProperty("kaptcha.border.color", "105,179,90");
            // 设置字体颜色
            properties.setProperty("kaptcha.textproducer.font.color", "blue");
            // 设置宽度
            properties.setProperty("kaptcha.image.width", "125");
            // 高度
            properties.setProperty("kaptcha.image.height", "50");
            // 设置session.key
            properties.setProperty("kaptcha.session.key", "code");
            // 设置文本长度
            properties.setProperty("kaptcha.textproducer.char.length", "4");
            // 设置字体
            properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
            // 将以上属性设置为实例一个DefaultKaptcha的属性
            Config config = new Config(properties);
            defaultKaptcha.setConfig(config);
            // 将defaultKaptcha返回
            return defaultKaptcha;
        }
    }

#### 2.1：Kaptcha详细配置 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">属性名</th> 
   <th align="left">描述</th> 
   <th align="left">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">kaptcha.width</td> 
   <td align="left">验证码宽度</td> 
   <td align="left">200</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">kaptcha.height</td> 
   <td align="left">验证码高度</td> 
   <td align="left">50</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">kaptcha.border.enabled</td> 
   <td align="left">是否显示边框</td> 
   <td align="left">false</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">kaptcha.border.color</td> 
   <td align="left">边框颜色</td> 
   <td align="left">black</td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">kaptcha.border.thickness</td> 
   <td align="left">边框厚度</td> 
   <td align="left">2</td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">kaptcha.content.length</td> 
   <td align="left">验证码文本长度</td> 
   <td align="left">5</td> 
  </tr> 
  <tr> 
   <td align="left">7</td> 
   <td align="left">kaptcha.content.source</td> 
   <td align="left">文本源</td> 
   <td align="left">abcde2345678gfynmnpwx</td> 
  </tr> 
  <tr> 
   <td align="left">8</td> 
   <td align="left">kaptcha.content.space</td> 
   <td align="left">文本间隔</td> 
   <td align="left">2</td> 
  </tr> 
  <tr> 
   <td align="left">9</td> 
   <td align="left">kaptcha.font.name</td> 
   <td align="left">字体名称</td> 
   <td align="left">Arial</td> 
  </tr> 
  <tr> 
   <td align="left">10</td> 
   <td align="left">kaptcha.font.size</td> 
   <td align="left">字体大小</td> 
   <td align="left">40</td> 
  </tr> 
  <tr> 
   <td align="left">11</td> 
   <td align="left">kaptcha.font.color</td> 
   <td align="left">字体颜色</td> 
   <td align="left">black</td> 
  </tr> 
  <tr> 
   <td align="left">12</td> 
   <td align="left">kaptcha.background-color.from</td> 
   <td align="left">背景颜色（开始渐变色）</td> 
   <td align="left">lightGray</td> 
  </tr> 
  <tr> 
   <td align="left">13</td> 
   <td align="left">kaptcha.background-color.to</td> 
   <td align="left">背景颜色（结束渐变色</td> 
   <td align="left">white</td> 
  </tr> 
 </tbody> 
</table>

### 3：编写Controller，实现验证码请求接口 ###

package simulationvirtual.VirtualExperiment.controller.tools;
     
    import com.google.code.kaptcha.Producer;
     
     
    import org.springframework.beans.factory.annotation.Autowired;
     
    import org.springframework.data.redis.core.RedisTemplate;
    import org.springframework.util.FastByteArrayOutputStream;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    import simulationvirtual.VirtualExperiment.util.AjaxResult;
    import simulationvirtual.VirtualExperiment.util.Base64;
    import simulationvirtual.VirtualExperiment.util.UUIDutil;
     
    import javax.imageio.ImageIO;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
     
    import java.util.concurrent.TimeUnit;
     
    @RestController
    public class KaptchaController {
        
        @Autowired
        private RedisTemplate<String,Object> redisTemplate;
        @Autowired
        private Producer kaptchaProduer;
        /**
         * 生成图形验证码
         * @author: Xiongch
         * @param:null
         * @return:Ajax_Result（统一返回工具）
         * @date: 2022/9/9 15:47
         */
        @GetMapping("/kaptcha")
        public AjaxResult getKaptcha(HttpServletResponse response, HttpSession session){
        
            AjaxResult Ajax_Result = AjaxResult.success();
            String imagecode = kaptchaProduer.createText();
            // 生成图片
            BufferedImage image = kaptchaProduer.createImage(imagecode);
            // 将验证码存入Session
            session.setAttribute("kaptcha",imagecode);
            //将图片输出给浏览器
            String uuid = UUIDutil.getUUID();//uuid-->验证码唯一标识
            FastByteArrayOutputStream os = new FastByteArrayOutputStream();
            try {
        
                response.setContentType("image/png");
     
                ImageIO.write(image,"png",os);
     
                //验证码实现redis缓存，过期时间2分钟
     
                session.setAttribute("uuid",imagecode);
            
                redisTemplate.opsForValue().set(uuid,imagecode,2, TimeUnit.MINUTES);
     
            } catch (IOException e) {
        
     
                return AjaxResult.error(e.getMessage());
            }
            Ajax_Result.put("uuid",uuid);
            Ajax_Result.put("img", Base64.encode(os.toByteArray()));
            return Ajax_Result;
        }
     
     
    }

### 4：vue前端展示代码 ###

#### 4.1:点击刷新方法 ####

methods: {
        
        getCode() {
        
              this.$axios({
        
    			       	  method:'GET',
    			      	  url:"/kaptcha",
    				        headers: {
        
                      "Content-Type": "application/json"
                    }
                }).then(res=>{
        
                  this.codeUrl = "data:image/gif;base64," + res.data.img;
                })
        },

### 5：效果如下 ###

![img][]

转自：https://blog.csdn.net/qq\_50954744/article/details/126810009

[Kaptcha]: https://img-blog.csdnimg.cn/img_convert/5c42127c211d34185228acdf1abe2d08.jpeg
[img]: https://img-blog.csdnimg.cn/8b8a2948d6fc4b2a977bf6aa129fd193.png