在各大項目中，為保證數(shù)據(jù)的安全性，通常在登錄頁面加入驗證碼校驗，以防止爬蟲帶來的數(shù)據(jù)泄露危機。本文將介紹在前后端分離的項目中，怎樣實現(xiàn)圖形驗證碼校驗。

實現(xiàn)思路

第一步：在后端創(chuàng)建一個生成隨機驗證碼的工具類和接收請求驗證碼的接口。工具類的主要作用生成隨機驗證碼和對應(yīng)的圖片。接口的作用是將生成的隨機驗證碼保存到session，同時，將圖片進(jìn)行base64編碼，然后返回給前端。

第二步：在登錄頁面創(chuàng)建的同時獲取驗證碼，并將后端傳回來得key和編碼后的字符串拼接，綁定img標(biāo)簽的src屬性。此外，當(dāng)用戶點擊驗證碼的img標(biāo)簽時，重新獲取驗證碼，后端session更新驗證碼。

第三步：后端登錄接口接收登錄請求時，將用戶提交的驗證碼和session中的驗證碼進(jìn)行比對，不相同則返回相應(yīng)信息給前端進(jìn)行提示，相同則進(jìn)行賬號密碼的匹配。

測試案例

• 創(chuàng)建驗證碼生成的工具類

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; // 驗證碼字符個數(shù) private int codeCount = 4; // 驗證碼干擾線數(shù) 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(); // 設(shè)置背景色 g.setColor(getRandColor(200, 250)); g.fillRect(0, 0, width, height); // 設(shè)置字體 //Font font1 = getFont(fontHeight); Font font = new Font(“Fixedsys”, Font.BOLD, fontHeight); g.setFont(font); // 設(shè)置干擾線 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); } /** * 產(chǎn)生隨機字體 */ 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(); //進(jìn)行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請求驗證碼的函數(shù)

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(“驗證碼錯誤!”); }

測試結(jié)果

• 前端頁面

• 輸入錯誤驗證碼