在各大项目中，为保证数据的安全性，通常在登录页面加入验证码校验，以防止爬虫带来的数据泄露危机。本文将介绍在前后端分离的项目中，怎样实现图形验证码校验。

实现思路

第一步：在后端创建一个生成随机验证码的工具类和接收请求验证码的接口。工具类的主要作用生成随机验证码和对应的图片。接口的作用是将生成的随机验证码保存到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 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 > 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 > 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”)@RestControllerpublic 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(“验证码错误!”); }