在各大項目中，為保證數(shù)據的安全性，通常在登錄頁面加入驗證碼校驗，以防止爬蟲帶來的數(shù)據泄露危機。本文將介紹在前后端分離的項目中，怎樣實現(xiàn)圖形驗證碼校驗。
實現(xiàn)思路
第一步：在后端創(chuàng)建一個生成隨機驗證碼的工具類和接收請求驗證碼的接口。工具類的主要作用生成隨機驗證碼和對應的圖片。接口的作用是將生成的隨機驗證碼保存到session，同時，將圖片進行base64編碼，然后返回給前端。
第二步：在登錄頁面創(chuàng)建的同時獲取驗證碼，并將后端傳回來得key和編碼后的字符串拼接，綁定img標簽的src屬性。此外，當用戶點擊驗證碼的img標簽時，重新獲取驗證碼，后端session更新驗證碼。
第三步：后端登錄接口接收登錄請求時，將用戶提交的驗證碼和session中的驗證碼進行比對，不相同則返回相應信息給前端進行提示，相同則進行賬號密碼的匹配。
測試案例
- 創(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(); // 設置背景色 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請求驗證碼的函數(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(“驗證碼錯誤!”); }
測試結果
- 前端頁面
- 輸入錯誤驗證碼
