SpringBoot后端验证码的实现示例_Java

一、简介

为了防止网站的用户被通过密码典爆破。引入验证码的功能是十分有必要的。而前端的验证码又仅仅是只防君子不防小人。通过burpsuit等工具很容易就会被绕过。所以后端实现的验证码才是对用户信息安全的一大重要保障。

实现思路：

1.引入图形生成的依赖

2.生成随机4字符，并制作成图片

3.对图片进行base64形式数据进行传输

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.");
        }

        // 创建图像和图形上下文
        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();

        // 将图像转换为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) {

//        随机生成四位验证码原始数据
        string allowedchars = "0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz";
        string randomstring = generaterandomstring(allowedchars, 4);
        system.out.println("captchacode " + randomstring);

        // 将验证码保存到session中
        session.setattribute("captcha", randomstring); // 使用方法参数session
        string imagebybase64 = captchautil.generatecaptchaimage(randomstring);
        return imagebybase64;
    }

用户登陆时候校验验证码功能：

// 实现登陆功能
    @apioperation("用户登陆功能")
    @postmapping("/login")
    public result login(@requestbody logindto logindto, httpsession session) { // 使用同一个httpsession参数

        string captcha = (string) session.getattribute("captcha");

        log.info("用户调用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格式的图片

前端实现注册的表单

<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: '', // 初始化为一个空字符串
    }
  },

在点击登陆按钮后，执行getcaptcha函数并设置captchaimageurl的回显格式为base64

  fetchcaptcha() {
      axios.get('/api/user/getcaptcha')
        .then(response => {

          this.captchaimageurl = 'data:image/png;base64,' + response.data;
        })
        .catch(error => {
          console.error('获取验证码失败:', error);
        });
    },

最后进行测试：