SpringBoot后端驗證碼的實現(xiàn)示例

更新時間：2024年08月16日 10:46:03 作者：Alphamilk

為了防止網(wǎng)站的用戶被通過密碼典爆破,引入驗證碼的功能是十分有必要的,本文主要介紹了SpringBoot后端驗證碼的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下

一、簡介

為了防止網(wǎng)站的用戶被通過密碼典爆破。引入驗證碼的功能是十分有必要的。而前端的驗證碼又僅僅是只防君子不防小人。通過burpsuit等工具很容易就會被繞過。所以后端實現(xiàn)的驗證碼才是對用戶信息安全的一大重要保障。

實現(xiàn)思路：

1.引入圖形生成的依賴

2.生成隨機4字符，并制作成圖片

3.對圖片進行Base64形式數(shù)據(jù)進行傳輸

4.前端顯示

二、引入依賴

<!--        驗證碼模塊-->
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.12.0</version>
</dependency>

三、驗證碼生成工具類

public class CaptchaUtil {

    private static final int WIDTH = 200;
    private static final int HEIGHT = 75;
    private static final int FONT_SIZE = 36;
    private static final String DEFAULT_FONT = "Arial";

    /**
     * 生成驗證碼圖像.
     *
     * @param captchaText 驗證碼原始文本
     * @return Base64編碼的圖像字符串
     */
    public static String generateCaptchaImage(String captchaText) {
        if (captchaText == null || captchaText.isEmpty()) {
            throw new IllegalArgumentException("Captcha text cannot be null or empty.");
        }

        // 創(chuàng)建圖像和圖形上下文
        BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = (Graphics2D) image.getGraphics();

        // 設置背景顏色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, WIDTH, HEIGHT);

        // 繪制驗證碼文本
        g.setFont(new Font(DEFAULT_FONT, Font.BOLD, FONT_SIZE));
        g.setColor(getRandomColor());
        g.drawString(captchaText, 45, 50);

        // 添加隨機線條作為干擾
        addNoiseLines(g);

        // 關閉圖形上下文
        g.dispose();

        // 將圖像轉(zhuǎn)換為Base64編碼的字符串
        try (ByteArrayOutputStream baos = new ByteArrayOutputStream()) {
            ImageIO.write(image, "png", baos);
            return Base64.getEncoder().encodeToString(baos.toByteArray());
        } catch (Exception e) {
            throw new RuntimeException("Error generating captcha image", e);
        }
    }

    private static void addNoiseLines(Graphics2D g) {
        for (int i = 0; i < 5; i++) {
            g.setColor(getRandomColor());
            g.drawLine(
                    getRandomNumber(WIDTH),
                    getRandomNumber(HEIGHT),
                    getRandomNumber(WIDTH),
                    getRandomNumber(HEIGHT)
            );
        }
    }

    private static Color getRandomColor() {
        return new Color((int) (Math.random() * 255),
                         (int) (Math.random() * 255),
                         (int) (Math.random() * 255));
    }

    private static int getRandomNumber(int bound) {
        return (int) (Math.random() * bound);
    }
}

四、通過Http Session存放驗證碼與驗證

獲取(a-z A-Z 0-9)隨機四位的驗證碼功能：

  // 登陸時候獲取驗證碼
    @ApiOperation("獲取驗證碼功能")
    @GetMapping("/GetCaptcha")
    public String GetCaptcha(HttpSession session) {

//        隨機生成四位驗證碼原始數(shù)據(jù)
        String allowedChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        String randomString = generateRandomString(allowedChars, 4);
        System.out.println("captchaCode " + randomString);

        // 將驗證碼保存到session中
        session.setAttribute("captcha", randomString); // 使用方法參數(shù)session
        String ImageByBase64 = CaptchaUtil.generateCaptchaImage(randomString);
        return ImageByBase64;
    }

用戶登陸時候校驗驗證碼功能：

// 實現(xiàn)登陸功能
    @ApiOperation("用戶登陸功能")
    @PostMapping("/login")
    public Result Login(@RequestBody LoginDTO loginDTO, HttpSession session) { // 使用同一個HttpSession參數(shù)

        String captcha = (String) session.getAttribute("captcha");

        log.info("用戶調(diào)用login方法");
        if (loginDTO.getCaptcha() == null || !loginDTO.getCaptcha().equalsIgnoreCase(captcha)) {
            session.removeAttribute("captcha");
            return Result.error("驗證碼出錯了噢!");
        }

        // 對密碼進行md5加密
        String encryptToMD5 = MD5Util.encryptToMD5(loginDTO.getPassword());

        LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(User::getAccount, loginDTO.getAccount())
                .eq(User::getPassword, encryptToMD5);

        User user = userService.getOne(lambdaQueryWrapper);
        if (user == null) {
            return Result.error("很抱歉，查不到此用戶");
        }
        user.setPassword("xxxxx");
        return Result.success(user);
    }

五、前端顯示Base64格式的圖片

前端實現(xiàn)注冊的表單

<el-tab-pane label="登陸" name="first">
                <el-form :model="loginForm" ref="loginFormRef" label-width="80px">
                  <el-form-item label="用戶名:">
                    <el-input v-model="loginForm.account"></el-input>
                  </el-form-item>
                  <el-form-item label="密碼:">
                    <el-input v-model="loginForm.password" show-password></el-input>
                  </el-form-item>
                  <el-form-item label="驗證碼">
                    <el-input v-model="loginForm.captcha" style="width: 20%;"></el-input>
                    <img :src="captchaImageUrl" alt="驗證碼" @click="refreshCaptcha" id="captchaImage">
                  </el-form-item>
                </el-form>
              </el-tab-pane>

先設置為空

export default {
  data() {
    return {
      captchaImageUrl: '', // 初始化為一個空字符串
    }
  },

在點擊登陸按鈕后，執(zhí)行getCaptcha函數(shù)并設置captchaImageUrl的回顯格式為Base64

  fetchCaptcha() {
      axios.get('/api/user/GetCaptcha')
        .then(response => {

          this.captchaImageUrl = 'data:image/png;base64,' + response.data;
        })
        .catch(error => {
          console.error('獲取驗證碼失敗:', error);
        });
    },

最后進行測試：