vue springboot登录验证码 vue+springboot实现登录验证码
天真吴邪xie 人气:0想了解vue+springboot实现登录验证码的相关内容吗,天真吴邪xie在本文为您仔细讲解vue springboot登录验证码的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue验证码,vue,springboot登录验证,vue登录验证码,下面大家一起来学习吧。
先看效果图
在login页面添加验证码html
在后端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(); }
生成之后,在登录界面输入验证码需要进行校验输入的是否正确
在登录按钮外层加一次请求判断,验证输入的验证码是否正确,根据返回值提示错误信息
@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,"验证码输入错误"); } }
加载全部内容