前后端分离验证码方案,springboot前后端分离登录怎么做
00-1010 1.Spring Boot第二版。引入依赖关系3。实现思路创建新的验证码枚举类定义验证码配置信息定义验证逻辑生成类定义验证码生成接口效果体验在前端的控制层调用接口。
目录
基于本文的Spring Boot版本是2.6.7。
1.SpringBoot版本
captcha是一个超级简单的验证码生成，相当好玩。还有中文验证码和动态验证码。在项目的pom.xml配置文件中添加一个依赖项，如下所示：
!-验证码-依赖性groupIdcom.github.whvcse/groupId工件简易-验证码/工件ID版本1 . 6 . 2/版本/依赖性
00-1010将生成的验证码结果保存到redis缓存，并设置过期时间。
前端提交验证码和密钥，其中密钥是redis中保存的密钥。通过这个键，得到对应的值，然后与前端提交的值进行比较，验证相同的值。
00-1010由于captcha提供了几种验证码方式，包括中文验证码、动态验证码、算术验证码等。每周都会创建一个新的验证码来存储这些验证码类型。代码如下：
公共枚举LoginCodeEnum {/** *算术*/算术，/** *中文*/中文，/** *中文flash */中文_GIF，/** * flash */GIF，SPEC}
00-1010该类是定义验证码的基本信息，如高度、宽度、字体类型、验证码类型等。而且我们更方便的把它改成用SpringBoot profile type来定义。
@Datapublic class LoginCode {/** *验证码配置*/privatelogincodeanum codetype；/* * *验证码有效期分钟*/私长过期=2L；/* * *验证码内容长度*/private int length=2；/* * *验证码宽度*/private int宽度=111；/* * *验证码高度*/private int高度=36；/* * *验证码font */私有字符串fontName/* * * font size */private int font size=25；/* * *验证码前缀* @return */私有字符串codeKeypublic LoginCodeEnum getCodeType(){ return codeType；}}将配置文件转换为Pojo类的统一配置类。
@Configurationpublic类configbean configuration { @ Bean @ configuration properties(prefix= log in )public log in properties log in properties(){ return new log in properties()；}}
2.引入依赖
@ data public class log in properties { private log in code log in code；/* * *获取验证码生产类* @ return */public captcha Get captcha(){ if(objects . is null(log in code)){ log in code=new log in code()；
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); } @Override protected 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.img this.loginForm.uuid = res.data.uuid }) }, } created() { // 获取验证码 this.getCode() }, </script>
到此这篇关于SpringBoot前后端分离实现验证码操作的文章就介绍到这了,更多相关SpringBoot验证码内容请搜索盛行IT以前的文章或继续浏览下面的相关文章希望大家以后多多支持盛行IT！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。