java(Spring boot)实现获取验证码图片

一、工具类代码

创建CreateVerifiCodeImage类,将下面代码复制到该类中:

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

/**
 * @project: ssm_sms
 * @description: 绘制验证码图片
 */
public class CreateVerifiCodeImage {

    private static int WIDTH = 90;
    private static int HEIGHT = 35;
    private static int FONT_SIZE = 20; //字符大小
    private static char[] verifiCode; //验证码
    private static BufferedImage verifiCodeImage; //验证码图片

    /**
     * @description: 获取验证码图片
     * @param: no
     * @return: java.awt.image.BufferedImage
     */
    public static BufferedImage getVerifiCodeImage() {
        verifiCodeImage = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_BGR);// create a image
        Graphics graphics = verifiCodeImage.getGraphics();

        verifiCode = generateCheckCode();
        drawBackground(graphics);
        drawRands(graphics, verifiCode);

        graphics.dispose();

        return verifiCodeImage;
    }

    /**
     * @description: 获取验证码
     * @param: no
     * @return: char[]
     */
    public static char[] getVerifiCode() {
        return verifiCode;
    }

    /**
     * @description: 随机生成验证码
     * @param: no
     * @return: char[]
     */
    private static char[] generateCheckCode() {
        String chars = "0123456789abcdefghijklmnopqrstuvwxyz" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        char[] rands = new char[4];
        for (int i = 0; i < 4; i++) {
            int rand = (int) (Math.random() * (10 + 26 * 2));
            rands[i] = chars.charAt(rand);
        }
        return rands;
    }

    /**
     * @description: 绘制验证码
     * @param: g
     * @param: rands
     * @return: void
     */
    private static void drawRands(Graphics g, char[] rands) {
        g.setFont(new Font("Console", Font.BOLD, FONT_SIZE));

        for (int i = 0; i < rands.length; i++) {

            g.setColor(getRandomColor());
            g.drawString("" + rands[i], i * FONT_SIZE + 10, 25);
        }
    }

    /**
     * @description: 绘制验证码图片背景
     * @param: g
     * @return: void
     */
    private static void drawBackground(Graphics g) {

        g.setColor(Color.white);
        g.fillRect(0, 0, WIDTH, HEIGHT);

        // 绘制验证码干扰点
        for (int i = 0; i < 200; i++) {
            int x = (int) (Math.random() * WIDTH);
            int y = (int) (Math.random() * HEIGHT);
            g.setColor(getRandomColor());
            g.drawOval(x, y, 1, 1);

        }
    }


    /**
     * @description: 获取随机颜色
     * @param: no
     * @return: java.awt.Color
     */
    private static Color getRandomColor() {
        Random ran = new Random();
        return new Color(ran.nextInt(220), ran.nextInt(220), ran.nextInt(220));
    }
}

二、工具类调用

1、获取验证码接口

通过调用工具类getVerifiCodeImage 即可获取到验证码图片

	@GetMapping("/getVerifiCodeImage")
    public void getVerifiCodeImage(HttpServletRequest request, HttpServletResponse response){
        // 获取图片
        BufferedImage verifiCodeImage = CreateVerifiCodeImage.getVerifiCodeImage();
        
        // 将验证码图片响应给浏览器
        try {
            ImageIO.write(verifiCodeImage,"JPEG",response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

运行项目,打开浏览器访问该接口地址,页面就会显示生成的验证码图片,刷新验证码,获取的验证码也会随之更新:
在这里插入图片描述

2、获取验证码接口用于登录验证

获取验证码显示在前端后,但验证码功能如登录功能一般还要验证输入的验证码是否正确,即在获取验证码图片的同时,还需获取验证码图片上的值,并将其存储到HttpServletRequest的session域中,用于登录验证。

	@GetMapping("/getVerifiCodeImage")
    public void getVerifiCodeImage(HttpServletRequest request, HttpServletResponse response){
        // 获取图片
        BufferedImage verifiCodeImage = CreateVerifiCodeImage.getVerifiCodeImage();
        // 获取图片上的验证码
        String verifiCode =new String( CreateVerifiCodeImage.getVerifiCode());
        // 将验证码文本放入session域,为下一次验证做准备
        HttpSession session = request.getSession();
        session.setAttribute("verifiCode",verifiCode);
        // 将验证码图片响应给浏览器

        try {
            ImageIO.write(verifiCodeImage,"JPEG",response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

在登录接口从HttpServletRequest中获取session里存储的验证码值,并与用户输入的验证码进行校验,校验用户输入的验证码正确即再验证登录的账号即密码是否正确:

	@PostMapping("/login")
    public Result login(@RequestBody LoginForm loginForm, HttpServletRequest request){
        // 验证码校验
        HttpSession session = request.getSession();
        String sessionVerifiCode = (String)session.getAttribute("verifiCode");
        String loginVerifiCode = loginForm.getVerifiCode();
        if("".equals(sessionVerifiCode) || null == sessionVerifiCode){
            return Result.fail().message("验证码失效,请刷新后重试");
        }
        if (!sessionVerifiCode.equalsIgnoreCase(loginVerifiCode)){
            return Result.fail().message("验证码输入错误,请重新输入!");
        }
        // 从session域中移除现有验证码
        session.removeAttribute("verifiCode");
        
        // 以下可继续进行登录的账号密码等验证逻辑
        
    }
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Spring Boot和Vue实现验证码,可以按照以下步骤进行: 1. 首先在Spring Boot中添加依赖项,包括spring-boot-starter-web和spring-boot-starter-validation。 2. 创建一个验证码生成器类,该类可以使用Java的Graphics2D类在内存中生成图片。 3. 创建一个Spring Boot控制器,该控制器将生成的验证码图片返回给客户端。 4. 在Vue中创建一个组件,该组件将显示验证码图片,并允许用户输入验证码。 5. 在Vue中实现验证逻辑,将用户输入的验证码与后端生成的验证码进行比较。 以下是示例代码: Spring Boot控制器: ```java @RestController public class CaptchaController { @Autowired private CaptchaGenerator captchaGenerator; @GetMapping("/captcha") public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws Exception { // 获取验证码图片 BufferedImage image = captchaGenerator.generateCaptchaImage(); // 将图片写入响应流 response.setContentType("image/png"); ImageIO.write(image, "png", response.getOutputStream()); // 将验证码存储在session中 HttpSession session = request.getSession(); session.setAttribute("captcha", captchaGenerator.getCaptchaString()); } } ``` Vue组件: ```vue <template> <div> <img :src="captchaUrl" @click="refreshCaptcha"> <input v-model="captchaInput" @keyup.enter="submitCaptcha"> <button @click="submitCaptcha">Submit</button> </div> </template> <script> export default { data() { return { captchaUrl: '/captcha', captchaInput: '' } }, methods: { refreshCaptcha() { this.captchaUrl = '/captcha?' + Math.random() }, submitCaptcha() { axios.post('/validate-captcha', { captcha: this.captchaInput }).then(response => { if (response.data.success) { alert('验证码正确') } else { alert('验证码错误') } }) } } } </script> ``` 在上面的Vue组件中,我们使用axios发送POST请求到后端验证用户输入的验证码。在后端,我们可以将存储在session中的验证码与用户输入的验证码进行比较。 希望这可以帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值