当前位置:编程学习 > > 正文

springboot vue 异地登录(vue+springboot实现登录验证码)

时间:2022-01-23 02:23:46类别:编程学习

springboot vue 异地登录

vue+springboot实现登录验证码

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

先看效果图

springboot vue 异地登录(vue+springboot实现登录验证码)

在login页面添加验证码html

springboot vue 异地登录(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.jpg" alt="springboot vue 异地登录(vue+springboot实现登录验证码)" border="0" />
    
  • 生成之后,在登录界面输入验证码需要进行校验输入的是否正确

    springboot vue 异地登录(vue+springboot实现登录验证码)

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

    springboot vue 异地登录(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,"验证码输入错误");
     }
    }
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐