vue+springboot实现登录验证码本⽂实例为⼤家分享了vue+springboot实现登录验证码的具体代码，供⼤家参考，具体内容如下
先看效果图
在login页⾯添加验证码html
在后端pom⽂件添加kaptcha依赖
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
创建KaptchaConfig⼯具类
package ller.util;
le.code.kaptcha.impl.DefaultKaptcha;
le.code.kaptcha.util.Config;
import t.annotation.Bean;
import t.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");
spring怎么读取properties
// 图⽚边框
properties.setProperty("kaptcha.border", "yes");
// 边框颜⾊
properties.setProperty("lor", "105,179,90");
// 字体颜⾊
properties.setProperty("lor", "blue");
// 字体⼤⼩
properties.setProperty("producer.font.size", "40");
// session key
properties.setProperty("kaptcha.session.key", "code");
// 验证码长度
properties.setProperty("producer.char.length", "4");
// 字体
properties.setProperty("producer.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 = ateText();
// ⽣成图⽚验证码
BufferedImage image = ateImage(text);
// 这⾥我们使⽤redis缓存验证码的值，并设置过期时间为60秒
redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS);
ServletOutputStream out = OutputStream();
ImageIO.write(image, "jpg", out);
out.flush();
out.close();
}
⽣成之后，在登录界⾯输⼊验证码需要进⾏校验输⼊的是否正确
在登录按钮外层加⼀次请求判断，验证输⼊的验证码是否正确，根据返回值提⽰错误信息
@PostMapping("/compareCode")
public RESULT compareCode(@RequestBody String verificationCode) {
if(!redisTemplate.hasKey("imageCode")) {
(500,"验证码已过期");
}
String code = redisTemplate.opsForValue().get("imageCode").toString();
if(StringUtils.equals(verificationCode,code)) {
return RESULT.ok();
} else {
(500,"验证码输⼊错误");
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。