SpringBoot 前后端分离 实现验证码操作

560阅读　0评论2022-05-24　fhadmin
分类：Java


点击(此处)折叠或打开



  3. 1|0SpringBoot 版本
  4. 本文基于的 Spring Boot 的版本是 2.6.7 。

  6. 2|0 引入依赖
  7. captcha 一款超简单的验证码生成，还挺好玩的。还有中文验证码，动态验证码. 。在项目中 pom.xml 配置文件中添加依赖，如下：

  9. <!--验证码-->
  10. <dependency>
  11.     <groupId>com.github.whvcse</groupId>
  12.     <artifactId>easy-captcha</artifactId>
  13.     <version>1.6.2</version>
  14. </dependency>
  15. 把生成的验证码结果保存到 redis 缓存中，并设置过期时间。
  16. 前端通过提交验证码和 key，其中 key 就是保存到 redis 中的键，通过这个键获取到对应的值，再与前端提交的值对比，相同就通过验证。
  17. 3|1 实现过程
  18. 新建验证码枚举类
  19. 由于 captcha 这款验证码提供了好几种验证码方法，有中文验证码，动态验证码，算术验证码等等，新建一个验证码每周类存放这几种验证码类型。代码如下：

  21. // fhadmin.cn
  22. public enum LoginCodeEnum {
  23.     /**
  24.      * 算数
  25.      */
  26.     ARITHMETIC,
  27.     /**
  28.      * 中文
  29.      */
  30.     CHINESE,
  31.     /**
  32.      * 中文闪图
  33.      */
  34.     CHINESE_GIF,
  35.     /**
  36.      * 闪图
  37.      */
  38.     GIF,
  39.     SPEC
  40. }
  41. 该类是定义验证码的基本信息，例如高度、宽度、字体类型、验证码类型等等、并且我们把它转成通过 SpringBoot 配置文件类型来定义更加方便。

  43. // fhadmin.cn
  44. @Data
  45. public class LoginCode {

  47.     /**
  48.      * 验证码配置
  49.      */
  50.     private LoginCodeEnum codeType;
  51.     /**
  52.      * 验证码有效期 分钟
  53.      */
  54.     private Long expiration = 2L;
  55.     /**
  56.      * 验证码内容长度
  57.      */
  58.     private int length = 2;
  59.     /**
  60.      * 验证码宽度
  61.      */
  62.     private int width = 111;
  63.     /**
  64.      * 验证码高度
  65.      */
  66.     private int height = 36;
  67.     /**
  68.      * 验证码字体
  69.      */
  70.     private String fontName;
  71.     /**
  72.      * 字体大小
  73.      */
  74.     private int fontSize = 25;

  76.     /**
  77.      * 验证码前缀
  78.      * @return
  79.      */
  80.     private String codeKey;


  83.     public LoginCodeEnum getCodeType() {
  84.         return codeType;
  85.     }
  86. }
  87. 把配置文件转换 Pojo 类的统一配置类

  89. // fhadmin.cn
  90. @Configuration
  91. public class ConfigBeanConfiguration {

  93.     @Bean
  94.     @ConfigurationProperties(prefix = "login")
  95.     public LoginProperties loginProperties() {
  96.         return new LoginProperties();
  97.     }
  98. }
  99. 定义逻辑验证生成类

  101. // fhadmin.cn
  102. @Data
  103. public class LoginProperties {

  105.     private LoginCode loginCode;


  108.     /**
  109.      * 获取验证码生产类
  110.      * @return
  111.      */
  112.     public Captcha getCaptcha(){
  113.         if(Objects.isNull(loginCode)){
  114.             loginCode = new LoginCode();
  115.             if(Objects.isNull(loginCode.getCodeType())){
  116.                 loginCode.setCodeType(LoginCodeEnum.ARITHMETIC);
  117.             }

  119.         }
  120.         return switchCaptcha(loginCode);
  121.     }

  123.     /**
  124.      * 依据配置信息生产验证码
  125.      * @param loginCode
  126.      * @return
  127.      */
  128.     private Captcha switchCaptcha(LoginCode loginCode){
  129.         Captcha captcha = null;
  130.         synchronized (this){
  131.             switch (loginCode.getCodeType()){
  132.                 case ARITHMETIC:
  133.                     captcha = new FixedArithmeticCaptcha(loginCode.getWidth(),loginCode.getHeight());
  134.                     captcha.setLen(loginCode.getLength());
  135.                     break;
  136.                 case CHINESE:
  137.                     captcha = new ChineseCaptcha(loginCode.getWidth(),loginCode.getHeight());
  138.                     captcha.setLen(loginCode.getLength());
  139.                     break;
  140.                 case CHINESE_GIF:
  141.                     captcha = new ChineseGifCaptcha(loginCode.getWidth(),loginCode.getHeight());
  142.                     captcha.setLen(loginCode.getLength());
  143.                     break;
  144.                 case GIF:
  145.                     captcha = new GifCaptcha(loginCode.getWidth(),loginCode.getHeight());
  146.                     captcha.setLen(loginCode.getLength());
  147.                     break;
  148.                 case SPEC:
  149.                     captcha = new SpecCaptcha(loginCode.getWidth(),loginCode.getHeight());
  150.                     captcha.setLen(loginCode.getLength());
  151.                 default:
  152.                     System.out.println("验证码配置信息错误！正确配置查看 LoginCodeEnum ");

  154.             }
  155.         }
  156.         if(StringUtils.isNotBlank(loginCode.getFontName())){
  157.             captcha.setFont(new Font(loginCode.getFontName(),Font.PLAIN,loginCode.getFontSize()));
  158.         }
  159.         return captcha;
  160.     }

  162.     static class FixedArithmeticCaptcha extends ArithmeticCaptcha{
  163.         public FixedArithmeticCaptcha(int width,int height){
  164.             super(width,height);
  165.         }

  167.         @Override
  168.         protected char[] alphas() {
  169.             // 生成随机数字和运算符
  170.             int n1 = num(1, 10), n2 = num(1, 10);
  171.             int opt = num(3);

  173.             // 计算结果
  174.             int res = new int[]{n1 + n2, n1 - n2, n1 * n2}[opt];
  175.             // 转换为字符运算符
  176.             char optChar = "+-x".charAt(opt);

  178.             this.setArithmeticString(String.format("%s%c%s=?", n1, optChar, n2));
  179.             this.chars = String.valueOf(res);

  181.             return chars.toCharArray();
  182.         }
  183.     }
  184. }

  186. 控制层定义验证生成接口

  188. // fhadmin.cn
  189. @ApiOperation(value = "获取验证码", notes = "获取验证码")
  190.     @GetMapping("/code")
  191.     public Object getCode(){

  193.         Captcha captcha = loginProperties.getCaptcha();
  194.         String uuid = "code-key-"+IdUtil.simpleUUID();
  195.         //当验证码类型为 arithmetic时且长度 >= 2 时，captcha.text()的结果有几率为浮点型
  196.         String captchaValue = captcha.text();
  197.         if(captcha.getCharType()-1 == LoginCodeEnum.ARITHMETIC.ordinal() && captchaValue.contains(".")){
  198.             captchaValue = captchaValue.split("\\.")[0];
  199.         }
  200.         // 保存
  201.         redisUtils.set(uuid,captchaValue,loginProperties.getLoginCode().getExpiration(), TimeUnit.MINUTES);
  202.         // 验证码信息
  203.         Map<String,Object> imgResult = new HashMap<String,Object>(2){{
  204.             put("img",captcha.toBase64());
  205.             put("uuid",uuid);
  206.         }};
  207.         return imgResult;

  209.     }
  210. 前端调用接口

  212. <template>
  213. <div class="login-code">
  214.   <img :src="codeUrl" @click="getCode">
  215. </div>
  216. </template>
  217. <script>
  218.     methods: {
  219.     getCode() {
  220.       getCodeImg().then(res => {
  221.         this.codeUrl = res.data.img
  222.         this.loginForm.uuid = res.data.uuid
  223.       })
  224.     },
  225.     }
  226.     created() {
  227.     // 获取验证码
  228.     this.getCode()
  229.   },
  230.  </script>



点击(此处)折叠或打开



  3. 1|0SpringBoot 版本
  4. 本文基于的 Spring Boot 的版本是 2.6.7 。

  6. 2|0 引入依赖
  7. captcha 一款超简单的验证码生成，还挺好玩的。还有中文验证码，动态验证码. 。在项目中 pom.xml 配置文件中添加依赖，如下：

  9. <!--验证码-->
  10. <dependency>
  11.     <groupId>com.github.whvcse</groupId>
  12.     <artifactId>easy-captcha</artifactId>
  13.     <version>1.6.2</version>
  14. </dependency>
  15. 把生成的验证码结果保存到 redis 缓存中，并设置过期时间。
  16. 前端通过提交验证码和 key，其中 key 就是保存到 redis 中的键，通过这个键获取到对应的值，再与前端提交的值对比，相同就通过验证。
  17. 3|1 实现过程
  18. 新建验证码枚举类
  19. 由于 captcha 这款验证码提供了好几种验证码方法，有中文验证码，动态验证码，算术验证码等等，新建一个验证码每周类存放这几种验证码类型。代码如下：

  21. // fhadmin.cn
  22. public enum LoginCodeEnum {
  23.     /**
  24.      * 算数
  25.      */
  26.     ARITHMETIC,
  27.     /**
  28.      * 中文
  29.      */
  30.     CHINESE,
  31.     /**
  32.      * 中文闪图
  33.      */
  34.     CHINESE_GIF,
  35.     /**
  36.      * 闪图
  37.      */
  38.     GIF,
  39.     SPEC
  40. }
  41. 该类是定义验证码的基本信息，例如高度、宽度、字体类型、验证码类型等等、并且我们把它转成通过 SpringBoot 配置文件类型来定义更加方便。

  43. // fhadmin.cn
  44. @Data
  45. public class LoginCode {

  47.     /**
  48.      * 验证码配置
  49.      */
  50.     private LoginCodeEnum codeType;
  51.     /**
  52.      * 验证码有效期 分钟
  53.      */
  54.     private Long expiration = 2L;
  55.     /**
  56.      * 验证码内容长度
  57.      */
  58.     private int length = 2;
  59.     /**
  60.      * 验证码宽度
  61.      */
  62.     private int width = 111;
  63.     /**
  64.      * 验证码高度
  65.      */
  66.     private int height = 36;
  67.     /**
  68.      * 验证码字体
  69.      */
  70.     private String fontName;
  71.     /**
  72.      * 字体大小
  73.      */
  74.     private int fontSize = 25;

  76.     /**
  77.      * 验证码前缀
  78.      * @return
  79.      */
  80.     private String codeKey;


  83.     public LoginCodeEnum getCodeType() {
  84.         return codeType;
  85.     }
  86. }
  87. 把配置文件转换 Pojo 类的统一配置类

  89. // fhadmin.cn
  90. @Configuration
  91. public class ConfigBeanConfiguration {

  93.     @Bean
  94.     @ConfigurationProperties(prefix = "login")
  95.     public LoginProperties loginProperties() {
  96.         return new LoginProperties();
  97.     }
  98. }
  99. 定义逻辑验证生成类

  101. // fhadmin.cn
  102. @Data
  103. public class LoginProperties {

  105.     private LoginCode loginCode;


  108.     /**
  109.      * 获取验证码生产类
  110.      * @return
  111.      */
  112.     public Captcha getCaptcha(){
  113.         if(Objects.isNull(loginCode)){
  114.             loginCode = new LoginCode();
  115.             if(Objects.isNull(loginCode.getCodeType())){
  116.                 loginCode.setCodeType(LoginCodeEnum.ARITHMETIC);
  117.             }

  119.         }
  120.         return switchCaptcha(loginCode);
  121.     }

  123.     /**
  124.      * 依据配置信息生产验证码
  125.      * @param loginCode
  126.      * @return
  127.      */
  128.     private Captcha switchCaptcha(LoginCode loginCode){
  129.         Captcha captcha = null;
  130.         synchronized (this){
  131.             switch (loginCode.getCodeType()){
  132.                 case ARITHMETIC:
  133.                     captcha = new FixedArithmeticCaptcha(loginCode.getWidth(),loginCode.getHeight());
  134.                     captcha.setLen(loginCode.getLength());
  135.                     break;
  136.                 case CHINESE:
  137.                     captcha = new ChineseCaptcha(loginCode.getWidth(),loginCode.getHeight());
  138.                     captcha.setLen(loginCode.getLength());
  139.                     break;
  140.                 case CHINESE_GIF:
  141.                     captcha = new ChineseGifCaptcha(loginCode.getWidth(),loginCode.getHeight());
  142.                     captcha.setLen(loginCode.getLength());
  143.                     break;
  144.                 case GIF:
  145.                     captcha = new GifCaptcha(loginCode.getWidth(),loginCode.getHeight());
  146.                     captcha.setLen(loginCode.getLength());
  147.                     break;
  148.                 case SPEC:
  149.                     captcha = new SpecCaptcha(loginCode.getWidth(),loginCode.getHeight());
  150.                     captcha.setLen(loginCode.getLength());
  151.                 default:
  152.                     System.out.println("验证码配置信息错误！正确配置查看 LoginCodeEnum ");

  154.             }
  155.         }
  156.         if(StringUtils.isNotBlank(loginCode.getFontName())){
  157.             captcha.setFont(new Font(loginCode.getFontName(),Font.PLAIN,loginCode.getFontSize()));
  158.         }
  159.         return captcha;
  160.     }

  162.     static class FixedArithmeticCaptcha extends ArithmeticCaptcha{
  163.         public FixedArithmeticCaptcha(int width,int height){
  164.             super(width,height);
  165.         }

  167.         @Override
  168.         protected char[] alphas() {
  169.             // 生成随机数字和运算符
  170.             int n1 = num(1, 10), n2 = num(1, 10);
  171.             int opt = num(3);

  173.             // 计算结果
  174.             int res = new int[]{n1 + n2, n1 - n2, n1 * n2}[opt];
  175.             // 转换为字符运算符
  176.             char optChar = "+-x".charAt(opt);

  178.             this.setArithmeticString(String.format("%s%c%s=?", n1, optChar, n2));
  179.             this.chars = String.valueOf(res);

  181.             return chars.toCharArray();
  182.         }
  183.     }
  184. }

  186. 控制层定义验证生成接口

  188. // fhadmin.cn
  189. @ApiOperation(value = "获取验证码", notes = "获取验证码")
  190.     @GetMapping("/code")
  191.     public Object getCode(){

  193.         Captcha captcha = loginProperties.getCaptcha();
  194.         String uuid = "code-key-"+IdUtil.simpleUUID();
  195.         //当验证码类型为 arithmetic时且长度 >= 2 时，captcha.text()的结果有几率为浮点型
  196.         String captchaValue = captcha.text();
  197.         if(captcha.getCharType()-1 == LoginCodeEnum.ARITHMETIC.ordinal() && captchaValue.contains(".")){
  198.             captchaValue = captchaValue.split("\\.")[0];
  199.         }
  200.         // 保存
  201.         redisUtils.set(uuid,captchaValue,loginProperties.getLoginCode().getExpiration(), TimeUnit.MINUTES);
  202.         // 验证码信息
  203.         Map<String,Object> imgResult = new HashMap<String,Object>(2){{
  204.             put("img",captcha.toBase64());
  205.             put("uuid",uuid);
  206.         }};
  207.         return imgResult;

  209.     }
  210. 前端调用接口

  212. <template>
  213. <div class="login-code">
  214.   <img :src="codeUrl" @click="getCode">
  215. </div>
  216. </template>
  217. <script>
  218.     methods: {
  219.     getCode() {
  220.       getCodeImg().then(res => {
  221.         this.codeUrl = res.data.img
  222.         this.loginForm.uuid = res.data.uuid
  223.       })
  224.     },
  225.     }
  226.     created() {
  227.     // 获取验证码
  228.     this.getCode()
  229.   },
  230.  </script>


上一篇：springcloud Alibaba 2021.0.1.0 springboot 2.7.0 整合 Swagger3.0 报错解决方案
下一篇：java 生成 zip格式 压缩文件