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 = {"\u5b8b\u4f53", "\u65b0\u5b8b\u4f53", "\u9ed1\u4f53", "\u6977\u4f53", "\u96b6\u4e66"};

    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="width: 60%" clearable></el-input>
            <el-image
                    style="width: 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>

效果：