SpringBoot及Vue3.0 登录验证码实现

实现的效果：

后端：

1、中间用到了org.apache.commons.lang3.RandomUtils工具类，需要pom配置：

<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.4</version>
</dependency>

2、验证码实体类：

import lombok.Data;

/**
* 验证码类
*/
@Data
public class VerifyCode {
    private String code;
    private byte[] imgBytes;
    private long expireTime;
}

3、随机验证码工具类

import org.apache.commons.lang3.RandomUtils;

import java.awt.*;
import java.util.Random;

public class VerifyCodeRandomUtils extends RandomUtils {

    private static final char[] CODE_SEQ = {'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
            'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
            'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9'};

    private static final char[] NUMBER_ARRAY = {'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'};

    private static Random random = new Random();

    public static String randomString(int length) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < length; i++) {
            sb.append(String.valueOf(CODE_SEQ[random.nextInt(CODE_SEQ.length)]));
        }
        return sb.toString();
    }

    public static String randomNumberString(int length) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < length; i++) {
            sb.append(String.valueOf(NUMBER_ARRAY[random.nextInt(NUMBER_ARRAY.length)]));
        }
        return sb.toString();
    }

    public static Color randomColor(int fc, int bc) {
        int f = fc;
        int b = bc;
        Random random = new Random();
        if (f > 255) {
            f = 255;
        }
        if (b > 255) {
            b = 255;
        }
        return new Color(f + random.nextInt(b - f), f + random.nextInt(b - f), f + random.nextInt(b - f));
    }

    public static int nextInt(int bound) {
        return random.nextInt(bound);
    }
}

4、生成验证码工具类

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * 验证码实现类
 */
@Service
public class VerifyCodeGenUtils {

    private static final Logger logger = LoggerFactory.getLogger(VerifyCodeGenUtils.class);

    private static final String[] FONT_TYPES = {"u5b8bu4f53", "u65b0u5b8bu4f53", "u9ed1u4f53", "u6977u4f53", "u96b6u4e66"};

    private static final int VALICATE_CODE_LENGTH = 4;

    /**
     * 设置背景颜色及大小，干扰线
     *
     * @param graphics
     * @param width
     * @param height
     */
    private static void fillBackground(Graphics graphics, int width, int height) {
        // 填充背景
        graphics.setColor(Color.WHITE);
        //设置矩形坐标x y 为0
        graphics.fillRect(0, 0, width, height);

        // 加入干扰线条
        for (int i = 0; i < 8; i++) {
            //设置随机颜色算法参数
            graphics.setColor(VerifyCodeRandomUtils.randomColor(40, 150));
            Random random = new Random();
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int x1 = random.nextInt(width);
            int y1 = random.nextInt(height);
            graphics.drawLine(x, y, x1, y1);
        }
    }

    /**
     * 生成随机字符
     *
     * @param width
     * @param height
     * @param os
     * @return
     * @throws IOException
     */
    public String generate(int width, int height, OutputStream os) throws IOException {
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics graphics = image.getGraphics();
        fillBackground(graphics, width, height);
        String randomStr = VerifyCodeRandomUtils.randomString(VALICATE_CODE_LENGTH);
        createCharacter(graphics, randomStr);
        graphics.dispose();
        //设置JPEG格式
        ImageIO.write(image, "JPEG", os);
        return randomStr;
    }

    /**
     * 验证码生成
     *
     * @param width
     * @param height
     * @return
     */
    public VerifyCode generate(int width, int height) {
        VerifyCode verifyCode = null;
        try (
                //将流的初始化放到这里就不需要手动关闭流
                ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ) {
            String code = generate(width, height, baos);
            verifyCode = new VerifyCode();
            verifyCode.setCode(code);
            verifyCode.setImgBytes(baos.toByteArray());
        } catch (IOException e) {
            logger.error(e.getMessage(), e);
            verifyCode = null;
        }
        return verifyCode;
    }

    /**
     * 设置字符颜色大小
     *
     * @param g
     * @param randomStr
     */
    private void createCharacter(Graphics g, String randomStr) {
        char[] charArray = randomStr.toCharArray();
        for (int i = 0; i < charArray.length; i++) {
            //设置RGB颜色算法参数
            g.setColor(new Color(50 + VerifyCodeRandomUtils.nextInt(100),
                    50 + VerifyCodeRandomUtils.nextInt(100), 50 + VerifyCodeRandomUtils.nextInt(100)));
            //设置字体大小，类型
            g.setFont(new Font(FONT_TYPES[VerifyCodeRandomUtils.nextInt(FONT_TYPES.length)], Font.BOLD, 26));
            //设置x y 坐标
            g.drawString(String.valueOf(charArray[i]), 15 * i + 5, 19 + VerifyCodeRandomUtils.nextInt(8));
        }
    }
}

5、获取验证码接口

import com.financial.config.jwt.JwtIgnore;
import com.financial.config.redis.RedisUtils;
import com.financial.util.verify.VerifyCode;
import com.financial.util.verify.VerifyCodeGenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * -
 * All rights reserved.
 *
 * @author： Zhiyong Yang
 * Description：
 * Changelog:
 * Reversion 1.0 2020-05-08 Zhiyong Yang
 * -
 */
@RestController
@RequestMapping(value = "verify", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public class VerifyCodeController {

    @Autowired
    private VerifyCodeGenUtils verifyCodeGenUtils;
    @Autowired
    private RedisUtils redisUtils;

    /**
     * 显示单张图片
     *
     * @return
     */
    @GetMapping("/getCode")
    public void verifyCode(HttpServletRequest request, HttpServletResponse response) {
        try {
            //设置长宽
            VerifyCode verifyCode = verifyCodeGenUtils.generate(80, 36);
            String code = verifyCode.getCode();
            // 方式一：（session）将VerifyCode绑定session
            // request.getSession().setAttribute("VerifyCode", code);

            // 待提交登录时候获取服务器存储的验证码作为比较
            // String verifyCode1 = (String) request.getSession().getAttribute("VerifyCode");

            // 方式二：（redis）获取session id 作为key,时间存5分钟
            redisUtils.set("VerifyCode_" + request.getSession().getId(), code, 300);

            //设置响应头
            response.setHeader("Pragma", "no-cache");
            //设置响应头
            response.setHeader("Cache-Control", "no-cache");
            //在代理服务器端防止缓冲
            response.setDateHeader("Expires", 0);
            //设置响应内容类型
            response.setContentType("image/jpeg");
            response.getOutputStream().write(verifyCode.getImgBytes());
            response.getOutputStream().flush();
        } catch (IOException e) {

        }
    }

}

6、测试获取验证码：

　　http://127.0.0.1:8081/verify/getCode?timestamp=1614305656908

　　

　　注意：使用localhost会使获取验证码和提交登录时候session id不一致。

前端：

登录页：

<div class="login-right-form">
    <div class="login-right-form-title">
        <h4 class="login-right-form-title-login">登录：</h4>
        <p class="login-right-form-title-tips">登录到后台管理系统</p>
    </div>
    <el-form class="login-right-form-item" ref="form" :model="form" :rules="rules">
        <el-form-item label="" prop="username">
            <el-input placeholder="用户名" v-model="form.username" maxlength="64" clearable>
                <i class="el-icon-user-solid el-input__icon" slot="suffix"></i>
            </el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
            <el-input placeholder="密码" v-model="form.password" @keyup.enter.native="onSubmit"
                      show-password
                      maxlength="32" clearable></el-input>
        </el-form-item>
        <el-form-item label="" prop="verify">
            <el-input placeholder="验证码" v-model="form.verify" @keyup.enter.native="onSubmit"
                      maxlength="4"
                      style=" 60%" clearable></el-input>
            <el-image
                    style=" 80px; height: 36px; float: right; border-radius: 4px;margin-top: 1px;"
                    :src="verifyUrl"
                    @click="refresh"
                    fit="fit">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </el-form-item>
        <el-form-item>
            <el-button class="login-right-form-item-btn" type="primary" @click="onSubmit">
                登录
            </el-button>
        </el-form-item>
    </el-form>
</div>

js:

<script>
    export default {
        // 当前的名称
        name: "Login",
        // 组件，有引入组件时，放置组件名称。
        comments: {},
        // 数据，v-model绑定数据使用
        data() {
            return {
                // 后面加时间戳，可以避免验证码缓存，只要时间戳改变，验证码会重新加载
                verifyUrl: process.env.VUE_APP_URL + '/verify/getCode?timestamp=' + new Date().getTime(),
            };
        },
        // 定义函数
        methods: {
            // 点击验证码，时间戳改变，重新加载验证码
            refresh() {
                this.verifyUrl = process.env.VUE_APP_URL + '/verify/getCode?timestamp=' + new Date().getTime()
            }
        },
    };
</script>

效果：