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

1|0SpringBoot 版本

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

2|0 引入依赖

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

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

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

3|1 实现过程

新建验证码枚举类

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

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

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

// fhadmin.cn
@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 类的统一配置类

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

定义逻辑验证生成类

// fhadmin.cn
@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();}}
}

控制层定义验证生成接口

// fhadmin.cn
@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前后端分离后权限原理浅谈
1. 需求描述最近在梳理springboot前后端分离后的权限管理问题.前段时间,已经把shiro的实现和spring security 的实现进行了初步的了解.如果深入细节,一个篇幅怕是不够.本文 ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
SpringBoot后台管理+Uniapp（混合APP）前端之酒店住宿+景点下单管理系统（SpringBoot前后端分离）
酒店住宿+景点下单管理系统(SpringBoot前后端分离) 之 SpringBoot后台管理+Uniapp(混合APP)前端 SpringBoot前后端分离项目-Thymeleaf模板引擎景区旅游管 ...
前后端分离实现验证码
前后端分离实现验证码实现流程 1.前端登录页面加载时发送请求来请求验证码接口 2.服务器端接收到用户验证码的请求之后,使用工具类来生成验证码(base64) 3.将获取到的验证码对应的code ...
Android+SpringBoot前后端分离实现登录注册
Android+SpringBoot前后端分离实现登录注册一.登录 1.界面设计 2.Android端 (1)布局文件(activity_login) (2)java文件(LoginActivity ...
基于SpringBoot前后端分离的众筹系统（附源码）
基于SpringBoot前后端分离的众筹系统源码下载链接: https://download.csdn.net/download/weixin_47367099/85441573 一.运行步骤 1.环 ...
新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互
导语:路漫漫其修远兮,吾将上下而求索前篇: 新手摸爬滚打:vue+springboot前后端分离项目演示(一)--vue cli创建vue2项目新手摸爬滚打:vue+springboot前后端分离 ...
SpringBoot前后端分离项目中如何制作前端jar包（类似swaggerUI前端jar包制作方法）
SpringBoot前后端分离项目中如何制作前端jar包(类似swaggerUI前端jar包制作方法) 可用于SpringBoot引用的前端UI的Jar包,类似于SwaggerUI包 WABJAR介绍 ...
基于vue springboot 前后端分离的电影院会员管理系统
基于vue springboot 前后端分离的电影院会员管理系统文章目录基于vue springboot 前后端分离的电影院会员管理系统前言一.主要功能二.运行截图 1.前端package. ...

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

1|0SpringBoot 版本

2|0 引入依赖

3|1 实现过程

新建验证码枚举类

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

最新文章

热门文章

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

1|0SpringBoot 版本

2|0 引入依赖

3|1 实现过程

新建验证码枚举类

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

最新文章

热门文章

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

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