Vue实现图片验证码生成 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@Componentpublic 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 {//返回 base64ByteArrayOutputStream 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 */@Servicepublic class ImgCaptchaServiceImpl implements ImgCaptchaService { private static final String IMG_CAPTCHA = "imgCaptcha:"; @Autowiredprivate RedisTemplate redisTemplate; @Autowiredprivate ImgCaptchaUtil imgCaptchaUtil; @Overridepublic 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; } @Overridepublic 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); }}

【Vue实现图片验证码生成】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。