SpringBootVue项目中实现登录验证码校验

　　在各大项目中，为保证数据的安全性，通常在登录页面加入验证码校验，以防止爬虫带来的数据泄露危机。本文将介绍在前后端分离的项目中，怎样实现图形验证码校验。 实现思路
　　第一步：在后端创建一个生成随机验证码的工具类和接收请求验证码的接口。工具类的主要作用生成随机验证码和对应的图片。接口的作用是将生成的随机验证码保存到session，同时，将图片进行base64编码，然后返回给前端。
　　第二步：在登录页面创建的同时获取验证码，并将后端传回来得key和编码后的字符串拼接，绑定img标签的src属性。此外，当用户点击验证码的img标签时，重新获取验证码，后端session更新验证码。
　　第三步：后端登录接口接收登录请求时，将用户提交的验证码和session中的验证码进行比对，不相同则返回相应信息给前端进行提示，相同则进行账号密码的匹配。 测试案例创建验证码生成的工具类 package com.check.utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Random;  import javax.imageio.ImageIO;  public class CreateImageCode {     // 图片的宽度。     private int width = 160;     // 图片的高度。     private int height = 40;     // 验证码字符个数     private int codeCount = 4;     // 验证码干扰线数     private int lineCount = 20;     // 验证码     private String code = null;     // 验证码图片Buffer     private BufferedImage buffImg = null;     Random random = new Random();      public CreateImageCode() {         creatImage();     }      public CreateImageCode(int width, int height) {         this.width = width;         this.height = height;         creatImage();     }      public CreateImageCode(int width, int height, int codeCount) {         this.width = width;         this.height = height;         this.codeCount = codeCount;         creatImage();     }      public CreateImageCode(int width, int height, int codeCount, int lineCount) {         this.width = width;         this.height = height;         this.codeCount = codeCount;         this.lineCount = lineCount;         creatImage();     }      // 生成图片     private void creatImage() {         int fontWidth = width / codeCount;// 字体的宽度         int fontHeight = height - 5;// 字体的高度         int codeY = height - 8;          // 图像buffer         buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);         Graphics g = buffImg.getGraphics();         //Graphics2D g = buffImg.createGraphics();         // 设置背景色         g.setColor(getRandColor(200, 250));         g.fillRect(0, 0, width, height);          // 设置字体         //Font font1 = getFont(fontHeight);         Font font = new Font(＂Fixedsys＂, Font.BOLD, fontHeight);         g.setFont(font);          // 设置干扰线         for (int i = 0; i < lineCount; i++) {             int xs = random.nextInt(width);             int ys = random.nextInt(height);             int xe = xs + random.nextInt(width);             int ye = ys + random.nextInt(height);             g.setColor(getRandColor(1, 255));             g.drawLine(xs, ys, xe, ye);         }          // 添加噪点         float yawpRate = 0.01f;// 噪声率         int area = (int) (yawpRate * width * height);         for (int i = 0; i < area; i++) {             int x = random.nextInt(width);             int y = random.nextInt(height);              buffImg.setRGB(x, y, random.nextInt(255));         }         String str1 = randomStr(codeCount);// 得到随机字符         this.code = str1;         for (int i = 0; i < codeCount; i++) {             String strRand = str1.substring(i, i + 1);             g.setColor(getRandColor(1, 255));             // g.drawString(a,x,y);             // a为要画出来的东西，x和y表示要画的东西最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处             g.drawString(strRand, i*fontWidth+3, codeY);         }     }      // 得到随机字符     private String randomStr(int n) {         String str1 = ＂ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890＂;         String str2 = ＂＂;         int len = str1.length() - 1;         double r;         for (int i = 0; i < n; i++) {             r = (Math.random()) * len;             str2 = str2 + str1.charAt((int) r);         }         return str2;     }      // 得到随机颜色     private Color getRandColor(int fc, int bc) {// 给定范围获得随机颜色         if (fc > 255)             fc = 255;         if (bc > 255)             bc = 255;         int r = fc + random.nextInt(bc - fc);         int g = fc + random.nextInt(bc - fc);         int b = fc + random.nextInt(bc - fc);         return new Color(r, g, b);     }      /**      * 产生随机字体      */     private Font getFont(int size) {         Random random = new Random();         Font font[] = new Font[5];         font[0] = new Font(＂Ravie＂, Font.PLAIN, size);         font[1] = new Font(＂Antique Olive Compact＂, Font.PLAIN, size);         font[2] = new Font(＂Fixedsys＂, Font.PLAIN, size);         font[3] = new Font(＂Wide Latin＂, Font.PLAIN, size);         font[4] = new Font(＂Gill Sans Ultra Bold＂, Font.PLAIN, size);         return font[random.nextInt(5)];     }      // 扭曲方法     private void shear(Graphics g, int w1, int h1, Color color) {         shearX(g, w1, h1, color);         shearY(g, w1, h1, color);     }      private void shearX(Graphics g, int w1, int h1, Color color) {         int period = random.nextInt(2);         boolean borderGap = true;         int frames = 1;         int phase = random.nextInt(2);         for (int i = 0; i < h1; i++) {             double d = (double) (period >> 1)                     * Math.sin((double) i / (double) period                     + (6.2831853071795862D * (double) phase)                     / (double) frames);             g.copyArea(0, i, w1, 1, (int) d, 0);             if (borderGap) {                 g.setColor(color);                 g.drawLine((int) d, i, 0, i);                 g.drawLine((int) d + w1, i, w1, i);             }         }     }     private void shearY(Graphics g, int w1, int h1, Color color) {         int period = random.nextInt(40) + 10; // 50;         boolean borderGap = true;         int frames = 20;         int phase = 7;         for (int i = 0; i < w1; i++) {             double d = (double) (period >> 1)                     * Math.sin((double) i / (double) period                     + (6.2831853071795862D * (double) phase)                     / (double) frames);             g.copyArea(i, 0, 1, h1, 0, (int) d);             if (borderGap) {                 g.setColor(color);                 g.drawLine(i, (int) d, i, 0);                 g.drawLine(i, (int) d + h1, i, h1);             }         }     }     public void write(OutputStream sos) throws IOException {         ImageIO.write(buffImg, ＂png＂, sos);         sos.close();     }      public BufferedImage getBuffImg() {         return buffImg;     }      public String getCode() {         return code.toLowerCase();     }  } 编写获取验证码的接口  @RequestMapping(＂/login＂) @RestController public class LoginController {     @GetMapping(＂/getImage＂)     public Result getImage(HttpServletRequest request) throws IOException {         Map result = new HashMap<>();         CreateImageCode createImageCode = new CreateImageCode();         //获取验证码         String securityCode = createImageCode.getCode();         //验证码存入session         String key = new SimpleDateFormat(＂yyyyMMddHHmmss＂).format(new Date());         request.getServletContext().setAttribute(key, securityCode);         //生成图片         BufferedImage image = createImageCode.getBuffImg();         //进行base64编码         ByteArrayOutputStream bos = new ByteArrayOutputStream();         ImageIO.write(image, ＂png＂, bos);         String string = Base64Utils.encodeToString(bos.toByteArray());         result.put(＂key＂, key);         result.put(＂image＂, string);         return ResultUtils.success(＂请求成功＂,result);     } } 编写axios请求验证码的函数  import requests from ＂./request＂; export const GetImage=()=>requests({     url: ＂/login/getImage＂,     method: ＂get＂ })vuex中编写异步方法  import {GetImage} from ＂../api/login＂ const state={}; const mutations={}; const actions={     async getImage(){         let result=await GetImage().then();         return result.dataset;     } }; const getters={}; export default{     state,     mutations,     actions,     getters }将验证码绑定给img的src  async getimage() {       let result = await this.$store.dispatch(＂getImage＂);       this.imageurl = ＂data:image/png;base64,＂ + result.image;       this.adminInfo.key = result.key;  },编写登录接口  @PostMapping(＂/login＂)     public Result login(@RequestBody Login login, HttpServletRequest request){         System.out.println(login);         String keyCode = (String) 		request.getServletContext().getAttribute(login.getKey());         if(keyCode.equals(login.getCode().toLowerCase())){             Admin admin = new Admin();             admin.setUsername(login.getUsername());             admin.setPassword(login.getPassword());             Admin admin1 = adminService.login(admin);             if(admin1!=null){                return ResultUtils.success(＂登录成功＂,admin1);             }else {                 return ResultUtils.error(＂账号或密码错误!＂);             }         }else {             return ResultUtils.error(＂验证码错误!＂);         }测试结果前端页面
　　输入错误验证码