devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SpringBoot整合jwt+redis+随机验证码+Vue的登录功能_jwt 验证码

作者：我家小花儿 | 2024-03-02 20:40:28

赞

踩

jwt 验证码

一、运行效果展示

！注意：前端的Vue项目中要引入element-ui和axios

# npm安装element-ui、axios

npm insatll element-ui -S

npm install axios -S

# 在main中引入

// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 使用axios
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:'
Vue.prototype.$axios = axios

二、环境依赖准备

1、引入pom依赖

  1. <!-- jwt -->
  2. <dependency>
  3.   <groupId>com.auth0</groupId>
  4.   <artifactId>java-jwt</artifactId>
  5.   <version>3.18.2</version>
  6. </dependency>
  7. <!-- redis -->
  8. <dependency>
  9.   <groupId>org.springframework.boot</groupId>
  10.   <artifactId>spring-boot-starter-data-redis</artifactId>
  11. </dependency>
  12. <!-- lombok -->
  13. <dependency>
  14.   <groupId>org.projectlombok</groupId>
  15.   <artifactId>lombok</artifactId>
  16.   <optional>true</optional>
  17. </dependency>

2、配置yaml

  1. server:
  2.   port: 8080
  3. spring:
  4.   application:
  5.     name: login-service # 服务名称
  6.   redis:
  7.     host: 127.0.0.1
  8.     port: 6379
  9.     password: 123456
  10.     database: 0 #操作的是0号数据库
  11.     jedis:
  12.       #Redis连接池配置
  13.       pool:
  14.         max-active: 8 #最大连接数
  15.         max-wait: 1ms #连接池最大阻塞等待时间
  16.         max-idle: 4 #连接池中的最大空闲连接
  17.         min-idle: 0 #连接池中的最小空闲连接

三、jwt生成与验证token

1、编写token工具类TokenUtils

  1. import com.auth0.jwt.JWT;
  2. import com.auth0.jwt.JWTCreator;
  3. import com.auth0.jwt.algorithms.Algorithm;
  4. import com.auth0.jwt.exceptions.TokenExpiredException;
  5. import lombok.Data;
  6. import lombok.extern.slf4j.Slf4j;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.data.redis.core.StringRedisTemplate;
  9. import org.springframework.data.redis.core.ValueOperations;
  10. import org.springframework.stereotype.Component;
  11. import java.util.Calendar;
  12. import java.util.concurrent.TimeUnit;
  13.  
  14. @Component
  15. @Data
  16. @Slf4j
  17. public class TokenUtils {
  18.  
  19.     @Autowired
  20.     private StringRedisTemplate stringRedisTemplate;
  21.  
  22.     // 创建Token
  23.     public String createToken(String userName, String hostIp) {
  24.         //时间工具类
  25.         Calendar instance = Calendar.getInstance();
  26.         //设置过期时间  单位：SECOND秒  3个小时失效
  27.         instance.add(Calendar.SECOND, 3 * 60 * 60);
  28.         //签名（自定义）
  29.         Algorithm algorithm = Algorithm.HMAC256("buliangshuai");
  30.         // 创建token
  31.         JWTCreator.Builder builder = JWT.create()
  32.                 //添加键值对数据
  33.                 .withClaim("userName", userName)
  34.                 //添加过期时间
  35.                 .withExpiresAt(instance.getTime());
  36.         // 选择签名算法HMAC256，添加密钥字符串签名
  37.         String token = builder.sign(algorithm);
  38.         //输出token
  39.         System.out.println("用户" + userName + "的token是：" + token);
  40.         // 将token存入redis
  41.         ValueOperations<String, String> forValue = stringRedisTemplate.opsForValue();
  42.         // 存入主机IP和token，指定过期时间
  43.         forValue.set(hostIp+"token", token, 3 * 60 * 60, TimeUnit.SECONDS);
  44.         return token;
  45.     }
  46.  
  47.     // 验证Token
  48.     public boolean verifyToken(String token, String hostIp) {
  49.         try {
  50.             // 根据主机地址和redis中存储的值比对判断token是否正确
  51.             String redisToken = stringRedisTemplate.boundValueOps(hostIp + "token").get();
  52.             if(!token.equals(redisToken)){
  53.                 return false;
  54.             }
  55.         } catch (TokenExpiredException e) {
  56.             //令牌过期抛出异常
  57.             System.out.println("令牌过期");
  58.             return false;
  59.         } catch (Exception e) {
  60.             //token非法验证失败抛出异常
  61.             System.out.println("检验失败");
  62.             return false;
  63.         }
  64.         return true;
  65.     }
  66.  
  67.    // 解密token
  68.     public String decodeToken(String token){  
  69.         String userName = JWT.require(Algorithm.HMAC256("buliangshuai")).build().verify(token).getClaim("userName").asString();
  70.         return userName;
  71.     }
  72. }

2、编写token接口控制类

  1. import com.blywl.common.utils.TokenUtils;
  2. import lombok.extern.slf4j.Slf4j;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.web.bind.annotation.*;
  5. import javax.servlet.http.HttpServletRequest;
  6.  
  7. @RestController
  8. @RequestMapping("/test")
  9. @Slf4j
  10. @CrossOrigin // 跨域
  11. public class TestController {
  12.     @Autowired
  13.     private TokenUtils tokenUtils;
  14.  
  15.     // 创建token
  16.     @PostMapping("/token")
  17.     public String createToken(@RequestParam("userName") String userName, HttpServletRequest request){
  18.         return tokenUtils.createToken(userName, request.getRemoteAddr());
  19.     }
  20.  
  21.     // 验证token
  22.     @PostMapping("/verifyToken")
  23.     public boolean verifyToken(@RequestParam("token") String token, HttpServletRequest request){
  24.         return tokenUtils.verifyToken(token, request.getRemoteAddr());
  25.     }
  26. }

 3、前端api调用

  1. import axios from 'axios'
  2.  
  3. let hostIp= "http://127.0.0.1:"
  4. export default {
  5.     // 生成用户Token
  6.     createToken(data) {
  7.         return axios({
  8.             url: hostIp + '8080/test/token',
  9.             params: data,
  10.             method: 'post'
  11.         })
  12.     }
  13.  
  14. }

四、随机验证码

1、验证码工具类codeUtils

  1. import javax.imageio.ImageIO;
  2. import java.awt.*;
  3. import java.awt.image.BufferedImage;
  4. import java.io.IOException;
  5. import java.io.OutputStream;
  6. import java.util.Random;
  7.  
  8. /**
  9.  * code验证码生成工具类
  10.  */
  11. public class CodeUtils {
  12.     /**
  13.      * 生成验证码图片的宽度
  14.      */
  15.     private int width = 100;
  16.  
  17.     /**
  18.      * 生成验证码图片的高度
  19.      */
  20.     private int height = 30;
  21.  
  22.     /**
  23.      * 字符样式
  24.      */
  25.     private String[] fontNames = { "宋体", "楷体", "隶书", "微软雅黑" };
  26.  
  27.     /**
  28.      * 定义验证码图片的背景颜色为白色
  29.      */
  30.     private Color bgColor = new Color(255, 255, 255);
  31.  
  32.     /**
  33.      * 生成随机
  34.      */
  35.     private Random random = new Random();
  36.  
  37.     /**
  38.      * 定义code字符
  39.      */
  40.     private String codes = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  41.  
  42.     /**
  43.      * 记录随机字符串
  44.      */
  45.     private String text;
  46.  
  47.     /**
  48.      * 获取一个随意颜色
  49.      * @return
  50.      */
  51.     private Color randomColor() {
  52.         int red = random.nextInt(150);
  53.         int green = random.nextInt(150);
  54.         int blue = random.nextInt(150);
  55.         return new Color(red, green, blue);
  56.     }
  57.  
  58.     /**
  59.      * 获取一个随机字体
  60.      *
  61.      * @return
  62.      */
  63.     private Font randomFont() {
  64.         String name = fontNames[random.nextInt(fontNames.length)];
  65.         int style = random.nextInt(4);
  66.         int size = random.nextInt(5) + 24;
  67.         return new Font(name, style, size);
  68.     }
  69.  
  70.     /**
  71.      * 获取一个随机字符
  72.      *
  73.      * @return
  74.      */
  75.     private char randomChar() {
  76.         return codes.charAt(random.nextInt(codes.length()));
  77.     }
  78.  
  79.     /**
  80.      * 创建一个空白的BufferedImage对象
  81.      *
  82.      * @return
  83.      */
  84.     private BufferedImage createImage() {
  85.         BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  86.         Graphics2D g2 = (Graphics2D) image.getGraphics();
  87.         //设置验证码图片的背景颜色
  88.         g2.setColor(bgColor);
  89.         g2.fillRect(0, 0, width, height);
  90.         return image;
  91.     }
  92.  
  93.     public BufferedImage getImage() {
  94.         BufferedImage image = createImage();
  95.         Graphics2D g2 = (Graphics2D) image.getGraphics();
  96.         StringBuffer sb = new StringBuffer();
  97.         for (int i = 0; i < 4; i++) {
  98.             String s = randomChar() + "";
  99.             sb.append(s);
  100.             g2.setColor(randomColor());
  101.             g2.setFont(randomFont());
  102.             float x = i * width * 1.0f / 4;
  103.             g2.drawString(s, x, height - 8);
  104.         }
  105.         this.text = sb.toString();
  106.         drawLine(image);
  107.         return image;
  108.     }
  109.  
  110.     /**
  111.      * 绘制干扰线
  112.      *
  113.      * @param image
  114.      */
  115.     private void drawLine(BufferedImage image) {
  116.         Graphics2D g2 = (Graphics2D) image.getGraphics();
  117.         int num = 5;
  118.         for (int i = 0; i < num; i++) {
  119.             int x1 = random.nextInt(width);
  120.             int y1 = random.nextInt(height);
  121.             int x2 = random.nextInt(width);
  122.             int y2 = random.nextInt(height);
  123.             g2.setColor(randomColor());
  124.             g2.setStroke(new BasicStroke(1.5f));
  125.             g2.drawLine(x1, y1, x2, y2);
  126.         }
  127.     }
  128.  
  129.     public String getText() {
  130.         return text;
  131.     }
  132.  
  133.     public static void output(BufferedImage image, OutputStream out) throws IOException {
  134.         ImageIO.write(image, "JPEG", out);
  135.     }
  136. }
  137.

2、编写验证码接口控制类

  1. import com.blywl.common.utils.CodeUtils;
  2. import org.springframework.beans.factory.annotation.Autowired;
  3. import org.springframework.data.redis.core.StringRedisTemplate;
  4. import org.springframework.data.redis.core.ValueOperations;
  5. import org.springframework.web.bind.annotation.*;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.awt.image.BufferedImage;
  9. import java.io.IOException;
  10. import java.util.concurrent.TimeUnit;
  11.  
  12. @RestController
  13. @RequestMapping("/login")
  14. @CrossOrigin // 跨域
  15. public class LoginController {
  16.  
  17.     @Autowired
  18.     private StringRedisTemplate stringRedisTemplate;
  19.  
  20.     /**
  21.      * 生成验证码图片
  22.      */
  23.     @GetMapping("/code")
  24.     public void code(HttpServletRequest request, HttpServletResponse res) throws IOException {
  25.         CodeUtils code = new CodeUtils();
  26.         // 生成验证码图片
  27.         BufferedImage image = code.getImage();
  28.         // 将验证码text存入redis中
  29.         String text = code.getText();
  30.         ValueOperations<String, String> forValue = stringRedisTemplate.opsForValue();
  31.         String hostIp = request.getRemoteAddr() + "code";
  32.         // 主机,code,3分钟过期
  33.         forValue.set(hostIp, text, 3 * 60, TimeUnit.SECONDS);
  34.         // 响应验证码图片
  35.         CodeUtils.output(image, res.getOutputStream());
  36.     }
  37.  
  38.     /**
  39.      * 登录
  40.      */
  41.     @PostMapping("/login")
  42.     public String login(@RequestParam("code") String code, HttpServletRequest request) {
  43.         // 根据主机地址和redis中存储的值比对判断验证码是否正确
  44.         String hostIp = request.getRemoteAddr() + "code";
  45.         String redisCode = stringRedisTemplate.boundValueOps(hostIp).get();
  46.         System.out.println("redisValue:" + redisCode);
  47.         if (code.equalsIgnoreCase(redisCode)) {
  48.             return "登录成功！";
  49.         }
  50.         return "登录失败~";
  51.     }
  52.  
  53. }

3、前端api调用

  1. // 登录
  2. async login(data) {
  3.     return axios({
  4.         url: hostIp + '8080/login/login',
  5.         params: data,
  6.         method: 'post'
  7.     })
  8. },

 五、完整前端代码

Login.vue

  1. <template>
  2.   <div class="login">
  3.     <!-- 卡片 -->
  4.     <el-card class="box-card">
  5.       <h1 style="margin: 0 0 14px 100px">登录页面</h1>
  6.       <!-- 登录 or 注册 -->
  7.       <el-radio-group v-model="labelPosition" class="radioGroup" size="small">
  8.         <el-radio-button label="login">登录</el-radio-button>
  9.         <el-radio-button label="signIn">注册</el-radio-button>
  10.       </el-radio-group>
  11.       <!-- user输入表单 -->
  12.       <el-form label-position="right" label-width="80px" :model="user">
  13.         <el-form-item
  14.             label="用户名"
  15.             prop="name"
  16.             :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' } ]">
  17.           <el-input v-model="user.name"></el-input>
  18.         </el-form-item>
  19.         <el-form-item
  20.             label="密码"
  21.             prop="password"
  22.             :rules="[ { required: true, message: '请输入密码', trigger: 'blur' } ]">
  23.           <el-input type="password" v-model="user.password" show-password></el-input>
  24.         </el-form-item>
  25.         <el-form-item
  26.             v-if="labelPosition==='signIn'"
  27.             label="确认密码"
  28.             prop="checkPassword"
  29.             :rules="[ { required: true, message: '请输入再次输入密码', trigger: 'blur' } ]">
  30.           <el-input type="password" v-model="user.checkPassword" show-password></el-input>
  31.         </el-form-item>
  32.         <el-form-item
  33.             label="验证码"
  34.             prop="code"
  35.             :rules="[ { required: true, message: '请输入验证码', trigger: 'blur' } ]">
  36.           <el-input v-model="user.code" style="width: 120px"></el-input>
  37.           <el-image class="codeImg" :src="imgUrl" style="cursor: pointer" @click="resetImg"></el-image>
  38.         </el-form-item>
  39.         <!--按钮-->
  40.         <el-form-item class="button">
  41.           <el-button class="button1" v-if="labelPosition==='login'" type="warning" @click="login"
  42.                      :disabled="user.name===''||user.password===''||user.code===''" >登录
  43.           </el-button>
  44.           <el-button class="button1" v-if="labelPosition==='signIn'" type="warning" @click="signIn"
  45.                      :disabled="user.name===''||user.password===''||user.checkPassword===''||user.code===''">注册
  46.           </el-button>
  47.           <el-button class="button1" @click="resetForm">重置</el-button>
  48.         </el-form-item>
  49.       </el-form>
  50.     </el-card>
  51.   </div>
  52. </template>
  53.  
  54. <script>
  55. import logApi from "../assets/api/loginApi"
  56.  
  57. export default {
  58.   name: "Login",
  59.   data() {
  60.     return {
  61.       labelPosition: 'login',  // 开始先定位到登录
  62.       // 用户数据
  63.       user: {
  64.         name: '',
  65.         password: '',
  66.         checkPassword: '',
  67.         code: ''  // 验证码
  68.       },
  69.       imgUrl: '',
  70.     }
  71.   },
  72.   // 创建周期函数
  73.   created() {
  74.     // 获取验证码图片
  75.     this.imgUrl = this.$axios.defaults.baseURL + "8080/login/code"
  76.   },
  77.   methods: {
  78.     // 登录
  79.     login() {
  80.       // 生成token并存储在浏览器内存中(可以使用localStorage.getItem('token'))查看token)
  81.        logApi.createToken({"userName": this.user.name}).then( r =>
  82.            localStorage.setItem("token", r.data)
  83.       )
  84.       // 验证码校验
  85.       logApi.login({"code": this.user.code,}).then( r =>
  86.           this.$message.info(r.data)
  87.       )
  88.     },
  89.     // 注册
  90.     signIn() {
  91.       if (this.user.checkPassword !== this.user.password) {
  92.         this.$message.error("两次输入的密码不一致!")
  93.       }
  94.     },
  95.     // 点击刷新验证码图片
  96.     resetImg(){
  97.       this.imgUrl = this.$axios.defaults.baseURL + "8080/login/code?time="+new Date();
  98.     },
  99.     // 重置表单
  100.     resetForm() {
  101.       this.user.name = ""
  102.       this.user.password = ""
  103.       this.user.checkPassword = ""
  104.     }
  105.   }
  106. }
  107. </script>
  108.  
  109. <style>
  110. .login{
  111.     width: 100%;
  112.     height: 100%;
  113.     /*position: fixed;*/
  114.     /*background-image: url(~@/assets/images/login.png);*/
  115.     /*background-repeat: no-repeat;*/
  116.     /*background-size: cover;*/
  117. }
  118. .box-card {
  119.     width: 370px;
  120.     margin: 5% auto auto auto;
  121.     border: 1px solid #1f808c;
  122. }
  123. .radioGroup{
  124.     width: 100%;
  125.     margin: 0 0 10px 120px;
  126. }
  127. .codeImg{
  128.     width: 120px;
  129.     height: 35px;
  130.     position: relative;
  131.     top: 13px;
  132.     left: 10px;
  133.     border: 1px solid #b7b7b7;
  134. }
  135. .button{
  136.     width: 100%;
  137.     margin: 0 0 0 -25px;
  138. }
  139. .button1{
  140.     width: 120px;
  141. }
  142.  
  143. </style>

loginApi.js

  1. import axios from 'axios'
  2.  
  3. let hostIp= "http://127.0.0.1:"
  4. export default {
  5.     // 登录
  6.     async login(data) {
  7.         return axios({
  8.             url: hostIp + '8080/login/login',
  9.             params: data,
  10.             method: 'post'
  11.         })
  12.     },
  13.  
  14.     // 生成用户Token
  15.     createToken(data) {
  16.         return axios({
  17.             url: hostIp + '8080/test/token',
  18.             params: data,
  19.             method: 'post'
  20.         })
  21.     }
  22.  
  23. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/182339?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号