vue+springboot实现登录验证码


Posted in Vue.js onMay 27, 2021

本文实例为大家分享了vue+springboot实现登录验证码的具体代码,供大家参考,具体内容如下

先看效果图

vue+springboot实现登录验证码

在login页面添加验证码html

vue+springboot实现登录验证码

在后端pom文件添加kaptcha依赖

<dependency>
     <groupId>com.github.penggle</groupId>
     <artifactId>kaptcha</artifactId>
     <version>2.3.2</version>
</dependency>

创建KaptchaConfig工具类

package com.brilliance.module.system.controller.util;
 
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
 
import java.util.Properties;
 
@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 图片宽
        properties.setProperty("kaptcha.image.width", "180");
        // 图片高
        properties.setProperty("kaptcha.image.height", "50");
        // 图片边框
        properties.setProperty("kaptcha.border", "yes");
        // 边框颜色
        properties.setProperty("kaptcha.border.color", "105,179,90");
        // 字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        // 字体大小
        properties.setProperty("kaptcha.textproducer.font.size", "40");
        // session key
        properties.setProperty("kaptcha.session.key", "code");
        // 验证码长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        // 字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

Controller中,生成的验证码存储在了redis中, 用于以后作校验(redis的配置以及依赖自行百度)

@RestController
@RequestMapping("/api/user")
@Api(tags = "系统用户管理")
public class SysUserController extends AbstractController{
 @Autowired
 private SysUserService sysUserService;
 @Autowired
 private DefaultKaptcha defaultKaptcha;
 
 @Autowired
 RedisTemplate redisTemplate;
 
 @GetMapping("/createImageCode")
 public void createImageCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
  response.setHeader("Cache-Control", "no-store, no-cache");
  response.setContentType("image/jpeg");
  // 生成文字验证码
  String text = defaultKaptcha.createText();
  // 生成图片验证码
  BufferedImage image = defaultKaptcha.createImage(text);
  // 这里我们使用redis缓存验证码的值,并设置过期时间为60秒
  redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS);
  ServletOutputStream out = response.getOutputStream();
  ImageIO.write(image, "jpg", out);
  out.flush();
  out.close();
 }

生成之后,在登录界面输入验证码需要进行校验输入的是否正确

vue+springboot实现登录验证码

在登录按钮外层加一次请求判断,验证输入的验证码是否正确,根据返回值提示错误信息

vue+springboot实现登录验证码

@PostMapping("/compareCode")
public RESULT compareCode(@RequestBody String verificationCode) {
    if(!redisTemplate.hasKey("imageCode")) {
  return RESULT.error(500,"验证码已过期");
 }
 String code = redisTemplate.opsForValue().get("imageCode").toString();
 if(StringUtils.equals(verificationCode,code)) {
  return RESULT.ok();
 } else {
  return RESULT.error(500,"验证码输入错误");
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue+spring boot实现校验码功能
May 27 #Vue.js
vue-cropper组件实现图片切割上传
May 27 #Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 #Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
Vue实现动态查询规则生成组件
详解vue身份认证管理和租户管理
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
You might like
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
JS常见算法详解
2017/02/28 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
原生js实现购物车
2020/09/23 Javascript
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python制作exe文件简单流程
2019/01/24 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python实现自动签到脚本功能
2020/08/20 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
MYSQL支持事务吗
2013/08/09 面试题
党支部书记岗位责任制
2014/02/11 职场文书
现场施工员岗位职责
2014/03/10 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2014年加油站工作总结
2014/12/04 职场文书
民政工作个人总结
2015/02/28 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
太空授课观后感
2015/06/17 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript