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 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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动态生成javascript文件的2个例子
2014/04/11 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
记录Django开发心得
2014/07/16 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
基于Python的接口测试框架实例
2016/11/04 Python
分析Python中解析构建数据知识
2018/01/20 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
服务承诺书范文
2014/05/19 职场文书
民主生活会剖析材料
2014/09/30 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
奖励通知
2015/04/22 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python