Vue实现图片验证码生成

图片验证码主要用于注册，登录等提交场景中，目的是防止脚本进行批量注册、登录、灌水，相比不带图片验证的安全度有所提高，不过目前也有自动识别图片验证码的程序出现，基本都是付费识别，随之又出现了滑动验证，选取正确选项验证等更加安全的验证方式。但图片验证码码仍用于大部分网站中。

一、前端图片验证码生成

前端逻辑大体就是进行图形绘制，取几个随机数放入图片中，加入干扰，进行验证

1.创建验证码组件identify.vue

2.父组件

前端生成验证码的校验是自己生成验证码，用户输入的值和生成的验证码字符串进行比对校验的，校验没有走后端，在真正发送请求到后端的时候也是不将验证码传给后台的。

二、后端生成图片验证码

后台思路很，利用BufferedImage类创建一张图片，再用Graphics对图片进行绘制(生成随机字符，添加噪点，干扰线)即可。

package com.hengtiansoft.gxrc.base.util;
 
import com.hengtiansoft.gxrc.common.constant.MagicNumConstant;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
 
import javax.imageio.ImageIO;
import java.awt.Font;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.util.Base64;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
 
@Slf4j
@Component
public class ImgCaptchaUtil {
 
 
    private Random random = new Random();
    /**
     * 验证码的宽
     */
    private final int width = 160;
    /**
     * 验证码的高
     */
    private final int height = 40;
    /**
     * 验证码的干扰线数量
     */
    private final int lineSize = 30;
    /**
     * 验证码词典
     */
    private final String randomString = "0123456789abcdefghijklmnopqrstuvwxyz";
 
    /**
     * 获取字体
     * @return
     */
    private Font getFont() {
        return new Font("Times New Roman", Font.ROMAN_BASELINE, MagicNumConstant.FORTY);
    }
 
    /**
     * 获取颜色
     * @param fc
     * @param bc
     * @return
     */
    private Color getRandomColor(int fc, int bc) {
 
        int fcc = Math.min(fc, MagicNumConstant.TWO_HUNDRED_FIFTY_FIVE);
        int bcc = Math.min(bc, MagicNumConstant.TWO_HUNDRED_FIFTY_FIVE);
 
        int r = fcc + random.nextInt(bcc - fcc - MagicNumConstant.SIXTEEN);
        int g = fcc + random.nextInt(bcc - fcc - MagicNumConstant.FOURTEEN);
        int b = fcc + random.nextInt(bcc - fcc - MagicNumConstant.TWELVE);
 
        return new Color(r, g, b);
    }
 
    /**
     * 绘制干扰线
     * @param g
     */
    private void drawLine(Graphics g) {
        int x = random.nextInt(width);
        int y = random.nextInt(height);
        int xl = random.nextInt(MagicNumConstant.TWENTY);
        int yl = random.nextInt(MagicNumConstant.TEN);
        g.drawLine(x, y, x + xl, y + yl);
    }
 
    /**
     * 获取随机字符
     * @param num
     * @return
     */
    private String getRandomString(int num) {
        int number = num > 0 ? num : randomString.length();
        return String.valueOf(randomString.charAt(random.nextInt(number)));
    }
 
    /**
     * 绘制字符串
     * @param g
     * @param randomStr
     * @param i
     * @return
     */
    private String drawString(Graphics g, String randomStr, int i) {
        g.setFont(getFont());
        g.setColor(getRandomColor(MagicNumConstant.ONE_HUNDRED_EIGHT, MagicNumConstant.ONE_HUNDRED_NINETY));
        String rand = getRandomString(random.nextInt(randomString.length()));
        String randomString = randomStr + rand;
        g.translate(random.nextInt(MagicNumConstant.THREE), random.nextInt(MagicNumConstant.SIX));
        g.drawString(rand, MagicNumConstant.FORTY * i + MagicNumConstant.TEN, MagicNumConstant.TWENTY_FIVE);
        return randomString;
    }
 
    /**
     * 生成随机图片，返回 base64 字符串
     * @param
     * @return
     */
    public Map getImgCodeBaseCode(int length) {
        Map result = new HashMap<>();
        // BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
        Graphics g = image.getGraphics();
        g.fillRect(0, 0, width, height);
        // 获取颜色
        g.setColor(getRandomColor(MagicNumConstant.ONE_HUNDRED_FIVE, MagicNumConstant.ONE_HUNDRED_EIGHTY_NINE));
        // 获取字体
        g.setFont(getFont());
        // 绘制干扰线
        for (int i = 0; i < lineSize; i++) {
            drawLine(g);
        }
 
        // 绘制随机字符
        String randomCode = "";
        for (int i = 0; i < length; i++) {
            randomCode = drawString(g, randomCode, i);
        }
        g.dispose();
 
        result.put("imgCode", randomCode);
 
        String base64Code = "";
        try {
            //返回 base64
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            ImageIO.write(image, "PNG", bos);
 
            byte[] bytes = bos.toByteArray();
            Base64.Encoder encoder = Base64.getEncoder();
            base64Code = encoder.encodeToString(bytes);
 
        } catch (Exception e) {
            log.debug(e.getMessage());
        }
        result.put("data", "data:image/png;base64," + base64Code);
        return result;
    }
 
}

后台生成图片base64，和一个唯一的key（通过这个key判断是哪张图片），后台可以通过接口传给前端图片base64和key，前端输入验证码，传给后台key和验证码去校验验证。

package com.hengtiansoft.gxrc.base.service.impl;
 
import com.hengtiansoft.gxrc.base.service.ImgCaptchaService;
import com.hengtiansoft.gxrc.base.util.ImgCaptchaUtil;
import com.hengtiansoft.gxrc.common.constant.MagicNumConstant;
import com.hengtiansoft.gxrc.common.entity.exception.BusinessException;
import com.hengtiansoft.gxrc.common.redis.RedisOperation;
import com.hengtiansoft.gxrc.common.util.UUIDUtils;
import org.apache.commons.lang3.ObjectUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;
 
import java.util.Map;
 
/**
 * @Description:
 * @Author: wu
 * @CreateDate: 2020/11/11 17:17
 */
@Service
public class ImgCaptchaServiceImpl implements ImgCaptchaService {
 
    private static final String IMG_CAPTCHA = "imgCaptcha:";
 
    @Autowired
    private RedisTemplate redisTemplate;
 
    @Autowired
    private ImgCaptchaUtil imgCaptchaUtil;
 
    @Override
    public Map getImgCaptcha() {
        RedisOperation redisOperation = new RedisOperation(redisTemplate);
        Map map = imgCaptchaUtil.getImgCodeBaseCode(MagicNumConstant.FOUR);
        String uuid = UUIDUtils.createUUID();
        redisOperation.set(IMG_CAPTCHA + uuid, map.get("imgCode"));
        redisOperation.expire(IMG_CAPTCHA + uuid, MagicNumConstant.THIRTY_THOUSAND);
        map.remove("imgCode");
        map.put("key", uuid);
        return map;
    }
 
    @Override
    public void checkImgCaptcha(String code, String key) {
        RedisOperation redisOperation = new RedisOperation(redisTemplate);
        String captcha = redisOperation.get(IMG_CAPTCHA + key);
        if (ObjectUtils.isEmpty(captcha) || !StringUtils.equals(captcha, code)) {
            throw new BusinessException("验证码错误");
        }
        redisOperation.del(IMG_CAPTCHA + key);
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。