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

验证码的功能是防止非法用户恶意去访问登录接口而设置的一个功能，今天我们就来看看在前后端分离的项目中，SpringBoot是如何提供服务的。

SpringBoot版本

本文基于的Spring Boot的版本是2.6.7 。

引入依赖

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

<!--验证码-->
<dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId><version>1.6.2</version>
</dependency>

实现思路

把生成的验证码结果保存到redis缓存中，并设置过期时间。
前端通过提交验证码和key，其中key就是保存到redis中的键，通过这个键获取到对应的值，再与前端提交的值对比，相同就通过验证。

实现过程

新建验证码枚举类

由于captcha这款验证码提供了好几种验证码方法，有中文验证码,动态验证码，算术验证码等等，新建一个验证码每周类存放这几种验证码类型。代码如下：

public enum LoginCodeEnum {/*** 算数*/ARITHMETIC,/*** 中文*/CHINESE,/*** 中文闪图*/CHINESE_GIF,/*** 闪图*/GIF,SPEC
}

定义验证码配置信息

该类是定义验证码的基本信息，例如高度、宽度、字体类型、验证码类型等等、并且我们把它转成通过SpringBoot配置文件类型来定义更加方便。

@Data
public class LoginCode {/*** 验证码配置*/private LoginCodeEnum codeType;/*** 验证码有效期 分钟*/private Long expiration = 2L;/*** 验证码内容长度*/private int length = 2;/*** 验证码宽度*/private int width = 111;/*** 验证码高度*/private int height = 36;/*** 验证码字体*/private String fontName;/*** 字体大小*/private int fontSize = 25;/*** 验证码前缀* @return*/private  String   codeKey;public LoginCodeEnum getCodeType() {return codeType;}
}

把配置文件转换Pojo类的统一配置类

@Configuration
public class ConfigBeanConfiguration {@Bean@ConfigurationProperties(prefix = "login")public LoginProperties loginProperties() {return new LoginProperties();}
}

定义验证逻辑生成类

@Data
public class LoginProperties {private LoginCode loginCode;/*** 获取验证码生产类* @return*/public Captcha getCaptcha(){if(Objects.isNull(loginCode)){loginCode = new LoginCode();if(Objects.isNull(loginCode.getCodeType())){loginCode.setCodeType(LoginCodeEnum.ARITHMETIC);}}return switchCaptcha(loginCode);}/*** 依据配置信息生产验证码* @param loginCode* @return*/private Captcha switchCaptcha(LoginCode loginCode){Captcha captcha = null;synchronized (this){switch (loginCode.getCodeType()){case ARITHMETIC:captcha = new FixedArithmeticCaptcha(loginCode.getWidth(),loginCode.getHeight());captcha.setLen(loginCode.getLength());break;case CHINESE:captcha = new ChineseCaptcha(loginCode.getWidth(),loginCode.getHeight());captcha.setLen(loginCode.getLength());break;case CHINESE_GIF:captcha = new ChineseGifCaptcha(loginCode.getWidth(),loginCode.getHeight());captcha.setLen(loginCode.getLength());break;case GIF:captcha = new GifCaptcha(loginCode.getWidth(),loginCode.getHeight());captcha.setLen(loginCode.getLength());break;case SPEC:captcha = new SpecCaptcha(loginCode.getWidth(),loginCode.getHeight());captcha.setLen(loginCode.getLength());default:System.out.println("验证码配置信息错误！正确配置查看 LoginCodeEnum ");}}if(StringUtils.isNotBlank(loginCode.getFontName())){captcha.setFont(new Font(loginCode.getFontName(),Font.PLAIN,loginCode.getFontSize()));}return captcha;}static  class FixedArithmeticCaptcha extends ArithmeticCaptcha{public FixedArithmeticCaptcha(int width,int height){super(width,height);}@Overrideprotected char[] alphas() {// 生成随机数字和运算符int n1 = num(1, 10), n2 = num(1, 10);int opt = num(3);// 计算结果int res = new int[]{n1 + n2, n1 - n2, n1 * n2}[opt];// 转换为字符运算符char optChar = "+-x".charAt(opt);this.setArithmeticString(String.format("%s%c%s=?", n1, optChar, n2));this.chars = String.valueOf(res);return chars.toCharArray();}}
}

在控制层上定义验证码生成接口

@ApiOperation(value = "获取验证码", notes = "获取验证码")@GetMapping("/code")public Object getCode(){Captcha captcha = loginProperties.getCaptcha();String uuid = "code-key-"+IdUtil.simpleUUID();//当验证码类型为 arithmetic时且长度 >= 2 时，captcha.text()的结果有几率为浮点型String captchaValue = captcha.text();if(captcha.getCharType()-1 == LoginCodeEnum.ARITHMETIC.ordinal() && captchaValue.contains(".")){captchaValue = captchaValue.split("\\.")[0];}// 保存redisUtils.set(uuid,captchaValue,loginProperties.getLoginCode().getExpiration(), TimeUnit.MINUTES);// 验证码信息Map<String,Object> imgResult = new HashMap<String,Object>(2){{put("img",captcha.toBase64());put("uuid",uuid);}};return imgResult;}

效果体验

在前端调用接口

<template>
<div class="login-code"><img :src="codeUrl" @click="getCode">
</div>
</template>
<script>methods: {getCode() {getCodeImg().then(res => {this.codeUrl = res.data.imgthis.loginForm.uuid = res.data.uuid})},}created() {// 获取验证码this.getCode()},</script>

前后端分离，SpringBoot如何实现验证码操作相关推荐

前后端分离(SpringBoot+Vue)-基础的权限管理系统
前后端分离(SpringBoot+Vue)-基础的权限管理系统简介前端项目代码地址:前端代码后端项目代码地址:后端代码最后的附录记录了自己在开发过程遇到问题及实现.部分文件的介绍采用前后端分 ...
笔记合并_.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）学习笔记（上）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作我们先来看一下静态文件中间件有哪些能力 1.支持指定相对路径 2.支持目录的浏览 3.支持设置默认文档 4.支持多目录映射源码链接: http ...
.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（下）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作这里还有一个比较特殊的用法一般情况下,我们前后端分离的架构,前端会编译成一个 index.html 文件和若干个 CSS 文件和 JavaSc ...
.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（上）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作我们先来看一下静态文件中间件有哪些能力 1.支持指定相对路径 2.支持目录的浏览 3.支持设置默认文档 4.支持多目录映射源码链接: http ...
网易音乐网站系统|前后端分离springboot+vue实现在线音乐网站
作者主页:编程千纸鹤作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享收藏点赞不迷路关注作者有好处 ...
前后端分离 springboot shiro+jwt token认证权限校验
项目源码国涛/springboot-shiro-jwthttps://gitee.com/dugt/springboot-shiro-jwt GitHub - dugt-1998/springboo ...
前后端分离:vue项目部署服务器操作步骤详细
部署前端项目vue到服务器首对应的是找到项目进入对应的目录下进行 npm run build 会生成一个dist文件将整个dist文件上传到服务器就可以了然后就是首先就是安装node.js ...
前后端分离springboot+vue社区志愿者招募管理系统idea
社区志愿者招募管理系统采用Spring.SpringMVC和MyBatis作为主体框架,系统设计遵循界面层.业务逻辑层和数据访问层的Web开发三层架构.采用B/S结构,使得系统更加容易维护.社区志愿者 ...
疫苗预约|疫苗管理|前后端分离Springboot+Vue儿童疫苗预约系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.毕业设计.简历模板.学习资料.面试题库.技术互助 ...
若依前后端分离框架——生成数字验证码功能源码学习
使用版本:Ruo-Vue 3.8.0 项目地址:https://gitee.com/y_project/RuoYi-Vue 0.1:验证码生成流程图 0.2:验证码生成时序图 0.3:验证码的配置项 ...