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

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

验证码的作用

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

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

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

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

Kaptcha 简介

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

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

Kaptcha详细配置表

  1. 配置项：kaptcha.border
  2. 描述：图片边框，合法值：yes , no
  3. 默认值：yes
  5. 配置项：kaptcha.border.color
  6. 描述：边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.
  7. 默认值：black
  9. 配置项：kaptcha.image.width
  10. 描述：图片宽
  11. 默认值：200
  13. 配置项：kaptcha.image.height
  14. 描述：图片高
  15. 默认值：50
  17. 配置项：kaptcha.producer.impl
  18. 描述：图片实现类
  19. 默认值：com.google.code.kaptcha.impl.DefaultKaptcha
  21. 配置项：kaptcha.textproducer.impl
  22. 描述：文本实现类
  23. 默认值：com.google.code.kaptcha.text.impl.DefaultTextCreator
  25. 配置项：kaptcha.textproducer.char.string
  26. 描述：文本集合，验证码值从此集合中获取
  27. 默认值：abcde2345678gfynmnpwx
  29. 配置项：kaptcha.textproducer.char.length
  30. 描述：验证码长度
  31. 默认值：5
  33. 配置项：kaptcha.textproducer.font.names
  34. 描述：字体
  35. 默认值：Arial, Courier
  37. 配置项：kaptcha.textproducer.font.size
  38. 描述：字体大小
  39. 默认值：40px.
  41. 配置项：kaptcha.textproducer.font.color
  42. 描述：字体颜色，合法值： r,g,b  或者 white,black,blue.
  43. 默认值：black
  45. 配置项：kaptcha.textproducer.char.space
  46. 描述：文字间隔
  47. 默认值：2
  49. 配置项：kaptcha.noise.impl
  50. 描述：干扰实现类
  51. 默认值：com.google.code.kaptcha.impl.DefaultNoise
  53. 配置项：kaptcha.noise.color
  54. 描述：干扰 颜色，合法值： r,g,b 或者 white,black,blue.
  55. 默认值：black
  57. 配置项：kaptcha.obscurificator.impl
  58. 描述：图片样式，
  59.    水纹 com.google.code.kaptcha.impl.WaterRipple 
  60.    鱼眼 com.google.code.kaptcha.impl.FishEyeGimpy 
  61.    阴影 com.google.code.kaptcha.impl.ShadowGimpy
  62. 默认值：com.google.code.kaptcha.impl.WaterRipple
  64. 配置项：kaptcha.background.impl
  65. 描述：背景实现类
  66. 默认值：com.google.code.kaptcha.impl.DefaultBackground
  68. 配置项：kaptcha.background.clear.from
  69. 描述：背景颜色渐变，开始颜色
  70. 默认值：light grey
  72. 配置项：kaptcha.background.clear.to
  73. 描述：背景颜色渐变， 结束颜色
  74. 默认值：white
  76. 配置项：kaptcha.word.impl
  77. 描述：文字渲染器
  78. 默认值：com.google.code.kaptcha.text.impl.DefaultWordRenderer
  80. 配置项：kaptcha.session.key
  81. 描述：session key
  82. 默认值：KAPTCHA_SESSION_KEY
  84. 配置项：kaptcha.session.date
  85. 描述：session date
  86. 默认值：KAPTCHA_SESSION_DATE

SpringBoot整合 Kaptcha

1、pom.xml文件中引入

  1. <!-- https://mvnrepository.com/artifact/com.oopsguy.kaptcha/kaptcha-spring-boot-autoconfigure -->
  2. <dependency>
  3.     <groupId>com.oopsguy.kaptcha</groupId>
  4.     <artifactId>kaptcha-spring-boot-autoconfigure</artifactId>
  5.     <version>1.0.0-beta-2</version>
  6. </dependency>

2、配置DefaultKaptcha

  1. import java.util.Properties;
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  6. import com.google.code.kaptcha.impl.DefaultKaptcha;
  7. import com.google.code.kaptcha.util.Config;
  9. @Configuration
  10. public class ConfigBean {
  13.     @Bean
  14.     public DefaultKaptcha getDefaultKaptcha(){
  16.         DefaultKaptcha dk = new DefaultKaptcha();
  17.         Properties properties = new Properties();
  18.         properties.put("kaptcha.border", "yes");
  19.         properties.put("kaptcha.border.color","105,179,90");
  20.         properties.put("kaptcha.textproducer.font.color","blue");
  21.         properties.put("kaptcha.image.width","125");
  22.         properties.put("kaptcha.image.height","45");
  23.         properties.put("kaptcha.textproducer.font.size","45");
  24.         properties.put("kaptcha.session.key","code");
  25.         properties.put("kaptcha.textproducer.char.length","4");
  26.         properties.put("kaptcha.textproducer.font.names","宋体,楷体,微软雅黑");
  27.         Config config = new Config(properties );
  28.         dk.setConfig(config);
  29.         return dk;
  30.     }
  32. }

3、编写controller

  1. package com.piano.student.controller;
  3. import java.awt.image.BufferedImage;
  4. import java.io.IOException;
  6. import javax.imageio.ImageIO;
  7. import javax.servlet.ServletOutputStream;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  11. import org.springframework.beans.factory.annotation.Autowired;
  12. import org.springframework.stereotype.Controller;
  13. import org.springframework.web.bind.annotation.RequestMapping;
  14. import org.springframework.web.bind.annotation.RequestMethod;
  15. import org.springframework.web.servlet.ModelAndView;
  17. import com.google.code.kaptcha.Constants;
  18. import com.google.code.kaptcha.impl.DefaultKaptcha;
  20. @Controller
  21. public class KaptchaController {
  24.     @Autowired
  25.     private DefaultKaptcha captchaProducer;
  27.     @RequestMapping(value = "verification", method = RequestMethod.GET)
  28.     public ModelAndView verification(HttpServletRequest request, HttpServletResponse response) throws IOException {
  30.         response.setDateHeader("Expires", 0);
  31.         // Set standard HTTP/1.1 no-cache headers.
  32.         response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
  33.         // Set IE extended HTTP/1.1 no-cache headers (use addHeader).
  34.         response.addHeader("Cache-Control", "post-check=0, pre-check=0");
  35.         // Set standard HTTP/1.0 no-cache header.
  36.         response.setHeader("Pragma", "no-cache");
  37.         // return a jpeg
  38.         response.setContentType("image/jpeg");
  39.         // create the text for the image
  40.         String capText = captchaProducer.createText();
  41.         // store the text in the session
  42.         request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
  43.         // create the image with the text
  44.         BufferedImage bi = captchaProducer.createImage(capText);
  45.         ServletOutputStream out = response.getOutputStream();
  46.         // write the data out
  47.         ImageIO.write(bi, "jpg", out);
  48.         try {
  50.             out.flush();
  51.         } finally {
  53.             out.close();
  54.         }
  55.         return null;
  56.     }
  57. }

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

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

介绍：

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

1：SpringBoot引入kaptcha的依赖

  1. <dependency>
  2.             <groupId>com.github.penggle</groupId>
  3.             <artifactId>kaptcha</artifactId>
  4.             <version>2.3.2</version>
  5.         </dependency>

2：编写kaptcha配置类

  1. package simulationvirtual.VirtualExperiment.config;
  3. import com.google.code.kaptcha.Producer;
  4. import com.google.code.kaptcha.impl.DefaultKaptcha;
  5. import com.google.code.kaptcha.util.Config;
  6. import org.springframework.context.annotation.Bean;
  7. import org.springframework.context.annotation.Configuration;
  9. import java.util.Properties;
  11. @Configuration
  12. public class KaptchaConfig {
  14.     /**
  15.      * Kaptcha图形验证码工具配置类
  16.      * @author: Xiongch
  17.      * @param:
  18.      * @return: com.google.code.kaptcha.Producer
  19.      * @date: 2022/9/9 15:47
  20.      */
  21.     @Bean
  22.     public Producer kaptchaProducer() {
  24.         // 实例一个DefaultKaptcha
  25.         DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
  26.         // 创建配置对象
  27.         Properties properties = new Properties();
  28.         // 设置边框
  29.         properties.setProperty("kaptcha.border", "yes");
  30.         // 设置颜色
  31.         properties.setProperty("kaptcha.border.color", "105,179,90");
  32.         // 设置字体颜色
  33.         properties.setProperty("kaptcha.textproducer.font.color", "blue");
  34.         // 设置宽度
  35.         properties.setProperty("kaptcha.image.width", "125");
  36.         // 高度
  37.         properties.setProperty("kaptcha.image.height", "50");
  38.         // 设置session.key
  39.         properties.setProperty("kaptcha.session.key", "code");
  40.         // 设置文本长度
  41.         properties.setProperty("kaptcha.textproducer.char.length", "4");
  42.         // 设置字体
  43.         properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
  44.         // 将以上属性设置为实例一个DefaultKaptcha的属性
  45.         Config config = new Config(properties);
  46.         defaultKaptcha.setConfig(config);
  47.         // 将defaultKaptcha返回
  48.         return defaultKaptcha;
  49.     }
  50. }

2.1：Kaptcha详细配置


























































































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

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

  1. package simulationvirtual.VirtualExperiment.controller.tools;
  3. import com.google.code.kaptcha.Producer;
  6. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.data.redis.core.RedisTemplate;
  9. import org.springframework.util.FastByteArrayOutputStream;
  10. import org.springframework.web.bind.annotation.GetMapping;
  11. import org.springframework.web.bind.annotation.RestController;
  12. import simulationvirtual.VirtualExperiment.util.AjaxResult;
  13. import simulationvirtual.VirtualExperiment.util.Base64;
  14. import simulationvirtual.VirtualExperiment.util.UUIDutil;
  16. import javax.imageio.ImageIO;
  17. import javax.servlet.http.HttpServletResponse;
  18. import javax.servlet.http.HttpSession;
  19. import java.awt.image.BufferedImage;
  20. import java.io.IOException;
  22. import java.util.concurrent.TimeUnit;
  24. @RestController
  25. public class KaptchaController {
  27.     @Autowired
  28.     private RedisTemplate<String,Object> redisTemplate;
  29.     @Autowired
  30.     private Producer kaptchaProduer;
  31.     /**
  32.      * 生成图形验证码
  33.      * @author: Xiongch
  34.      * @param:null
  35.      * @return:Ajax_Result（统一返回工具）
  36.      * @date: 2022/9/9 15:47
  37.      */
  38.     @GetMapping("/kaptcha")
  39.     public AjaxResult getKaptcha(HttpServletResponse response, HttpSession session){
  41.         AjaxResult Ajax_Result = AjaxResult.success();
  42.         String imagecode = kaptchaProduer.createText();
  43.         // 生成图片
  44.         BufferedImage image = kaptchaProduer.createImage(imagecode);
  45.         // 将验证码存入Session
  46.         session.setAttribute("kaptcha",imagecode);
  47.         //将图片输出给浏览器
  48.         String uuid = UUIDutil.getUUID();//uuid-->验证码唯一标识
  49.         FastByteArrayOutputStream os = new FastByteArrayOutputStream();
  50.         try {
  52.             response.setContentType("image/png");
  54.             ImageIO.write(image,"png",os);
  56.             //验证码实现redis缓存，过期时间2分钟
  58.             session.setAttribute("uuid",imagecode);
  60.             redisTemplate.opsForValue().set(uuid,imagecode,2, TimeUnit.MINUTES);
  62.         } catch (IOException e) {
  65.             return AjaxResult.error(e.getMessage());
  66.         }
  67.         Ajax_Result.put("uuid",uuid);
  68.         Ajax_Result.put("img", Base64.encode(os.toByteArray()));
  69.         return Ajax_Result;
  70.     }
  73. }

4：vue前端展示代码

  1. <div class="login-code">
  2.           <img :src="codeUrl" @click="getCode" class="login-code-img"/>
  3.         </div>

4.1:点击刷新方法

  1. methods: {
  3.     getCode() {
  5.           this.$axios({
  7.                          method:'GET',
  8.                         url:"/kaptcha",
  9.                         headers: {
  11.                   "Content-Type": "application/json"
  12.                 }
  13.             }).then(res=>{
  15.               this.codeUrl = "data:image/gif;base64," + res.data.img;
  16.             })
  17.     },

5：效果如下

img

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

发表评论

表情：
评论列表 （有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Kaptcha生成图片验证码

    Kaptcha简介 kaptcha 是一个很有用的验证码生成工具。由于它是可配置的，有了它，你能够生成各种样式的验证码。 Kaptcha 是一个可高度配置的实用验证码

    傷城~傷城~/ 0 赞/ 504 阅读