當前位置：首頁 > 前端技术 > vue >内容正文

vue

SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效

發布時間：2025/3/19 vue 145 豆豆

生活随笔收集整理的這篇文章主要介紹了 SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

前端Vue的登錄頁面，驗證碼請求后臺，后臺生成驗證碼照片后使用Base64編碼后，

返回給前端，前端進行顯示。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先看前端頁面login.vue

????? <el-form-item prop="code"><el-inputv-model="loginForm.code"auto-complete="off"placeholder="驗證碼"style="width: 63%"@keyup.enter.native="handleLogin"><svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /></el-input><div class="login-code"><img :src="codeUrl" @click="getCode" /></div>

這里驗證碼的圖片的src屬性是綁定的codeUrl，此屬性來自于請求后臺，并且綁定點擊事件為getCode

此方法也是請求后臺獲取驗證碼。

所以需要提前聲明codeUrl屬性

? data() {return {codeUrl: "",

然后在頁面加載完時請求后臺接口獲取驗證碼圖片。

所以在created函數中執行請求驗證碼圖片的方法

? created() {this.getCode();},

此方法的具體實現

? methods: {getCode() {getCodeImg().then(res => {this.codeUrl = "data:image/gif;base64," + res.img;this.loginForm.uuid = res.uuid;});},

在此方法中調用了請求后臺接口獲取驗證碼圖片編碼后的代碼并在前面拼接上

"data:image/gif;base64,"

data:image/png;base64的用法詳解

網頁上有些圖片的src或css背景圖片的url后面跟了一大串字符，比如：

這是Data URI scheme。

Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。比如上面那串字符，其實是一張圖片。

在上面的Data URI中，data表示取得數據的協定名稱，image/jpg 是數據類型名稱，base64 是數據的編碼方法，逗號后面就是這個image/png文件base64編碼后的數據。目前，Data URI scheme支持的類型有：

data:,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/javascript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據

base64簡單地說，它把一些 8-bit 數據翻譯成標準 ASCII 字符。

我們把圖像文件的內容直接寫在了HTML 文件中，這樣做的好處是，節省了一個HTTP 請求。壞處呢，就是瀏覽器不會緩存這種圖像。

我們可以找一些在線網站將圖片進行Base64編碼。

https://tool.oschina.net/encrypt?type=4

所以在上面的請求圖片驗證的圖片的src綁定的codeUrl中的路徑是如下這種拼接的，所以后臺SpringBoot只需要生成圖片驗證碼并將其使用Base64b編碼并返回即可。就是這里的res.img。

除了返回了img還返回了uuid這個屬性，這就是用來控制驗證碼是否生效的字段。

UUID 是指Universally Unique Identifier，翻譯為中文是通用唯一識別碼，UUID 的目的是讓分布式系統中的所有元素都能有唯一的識別信息

??? getCode() {getCodeImg().then(res => {this.codeUrl = "data:image/gif;base64," + res.img;this.loginForm.uuid = res.uuid;});

將獲取的uuid賦值給登錄表單的uuid屬性，所以需要提前聲明uuid屬性

? data() {return {codeUrl: "",loginForm: {username: "",password: "",rememberMe: false,code: "",uuid: ""},

使驗證碼在2分鐘有效的邏輯是

在每次請求驗證碼的接口時會生成一個uuid,并且將這個uuid存儲進Redis緩存中并設置2分鐘有效期。

然后驗證碼接口將驗證碼和uuid一起返回給前端，前端將其接受并將其存儲進表單對象的uuid屬性。

在登錄接口中接收前端提交過來的表單對象的uuid屬性然后去Redis緩存中去查詢，如果為空則證明已經過了2分鐘則是驗證碼失效。

上面的請求驗證碼的接口方法 getCodeImg()是引用的外部js的方法

import { getCodeImg } from "@/api/login";

在login.js中

// 獲取驗證碼 export function getCodeImg() {return request({url: '/captchaImage',method: 'get'}) }

實現向后臺指定的url發動get請求，這里的request是封裝的axios請求的對象，不再細講。

下面看驗證碼接口的SpringBoot代碼

??? @GetMapping("/captchaImage")public AjaxResult getCode(HttpServletResponse response) throws IOException{// 生成隨機字串String verifyCode = VerifyCodeUtils.generateVerifyCode(4);// 唯一標識String uuid = IdUtils.simpleUUID();String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;redisCache.setCacheObject(verifyKey, verifyCode, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);// 生成圖片int w = 111, h = 36;ByteArrayOutputStream stream = new ByteArrayOutputStream();VerifyCodeUtils.outputImage(w, h, stream, verifyCode);try{AjaxResult ajax = AjaxResult.success();ajax.put("uuid", uuid);ajax.put("img", Base64.encode(stream.toByteArray()));return ajax;}catch (Exception e){e.printStackTrace();return AjaxResult.error(e.getMessage());}finally{stream.close();}}

首先是生成隨機字符串verifyCode ，這里調用了一個工具類的方法generateVerifyCode，參數4代表驗證碼的長度。

??? /*** 使用系統默認字符源生成驗證碼** @param verifySize 驗證碼長度* @return*/public static String generateVerifyCode(int verifySize){return generateVerifyCode(verifySize, VERIFY_CODES);}

此方法調用了generateVerifyCode，并增加了一個驗證碼的取值范圍的參數。

VERIFY_CODES聲明

public static final String VERIFY_CODES = "123456789ABCDEFGHJKLMNPQRSTUVWXYZ";

去掉了1,0,i,o幾個容易混淆的字符

生成字符串的方法實現為

??? /*** 使用指定源生成驗證碼** @param verifySize 驗證碼長度* @param sources 驗證碼字符源* @return*/public static String generateVerifyCode(int verifySize, String sources){if (sources == null || sources.length() == 0){sources = VERIFY_CODES;}int codesLen = sources.length();Random rand = new Random(System.currentTimeMillis());StringBuilder verifyCode = new StringBuilder(verifySize);for (int i = 0; i < verifySize; i++){verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1)));}return verifyCode.toString();}

再回到接口Controller

生成字符串之后生成UUID即唯一標識

??????? String uuid = IdUtils.simpleUUID();String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

這里也調用了一個工具類的方法

??? /*** 簡化的UUID，去掉了橫線** @return 簡化的UUID，去掉了橫線*/public static String simpleUUID(){return UUID.randomUUID().toString(true);}

此工具類方法又調用了UUID的randomUUID方法

UUID.java全部代碼

import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.security.SecureRandom; import java.util.Random; import java.util.concurrent.ThreadLocalRandom; import com.ruoyi.common.exception.UtilException;/*** 提供通用唯一識別碼（universally unique identifier）（UUID）實現**/ public final class UUID implements java.io.Serializable, Comparable<UUID> {private static final long serialVersionUID = -1185015143654744140L;/*** SecureRandom 的單例**/private static class Holder{static final SecureRandom numberGenerator = getSecureRandom();}/** 此UUID的最高64有效位 */private final long mostSigBits;/** 此UUID的最低64有效位 */private final long leastSigBits;/*** 私有構造* * @param data 數據*/private UUID(byte[] data){long msb = 0;long lsb = 0;assert data.length == 16 : "data must be 16 bytes in length";for (int i = 0; i < 8; i++){msb = (msb << 8) | (data[i] & 0xff);}for (int i = 8; i < 16; i++){lsb = (lsb << 8) | (data[i] & 0xff);}this.mostSigBits = msb;this.leastSigBits = lsb;}/*** 使用指定的數據構造新的 UUID。** @param mostSigBits 用于 {@code UUID} 的最高有效 64 位* @param leastSigBits 用于 {@code UUID} 的最低有效 64 位*/public UUID(long mostSigBits, long leastSigBits){this.mostSigBits = mostSigBits;this.leastSigBits = leastSigBits;}/*** 獲取類型 4（偽隨機生成的）UUID 的靜態工廠。使用加密的本地線程偽隨機數生成器生成該 UUID。* * @return 隨機生成的 {@code UUID}*/public static UUID fastUUID(){return randomUUID(false);}/*** 獲取類型 4（偽隨機生成的）UUID 的靜態工廠。使用加密的強偽隨機數生成器生成該 UUID。* * @return 隨機生成的 {@code UUID}*/public static UUID randomUUID(){return randomUUID(true);}/*** 獲取類型 4（偽隨機生成的）UUID 的靜態工廠。使用加密的強偽隨機數生成器生成該 UUID。* * @param isSecure 是否使用{@link SecureRandom}如果是可以獲得更安全的隨機碼，否則可以得到更好的性能* @return 隨機生成的 {@code UUID}*/public static UUID randomUUID(boolean isSecure){final Random ng = isSecure ? Holder.numberGenerator : getRandom();byte[] randomBytes = new byte[16];ng.nextBytes(randomBytes);randomBytes[6] &= 0x0f; /* clear version */randomBytes[6] |= 0x40; /* set to version 4 */randomBytes[8] &= 0x3f; /* clear variant */randomBytes[8] |= 0x80; /* set to IETF variant */return new UUID(randomBytes);}/*** 根據指定的字節數組獲取類型 3（基于名稱的）UUID 的靜態工廠。** @param name 用于構造 UUID 的字節數組。** @return 根據指定數組生成的 {@code UUID}*/public static UUID nameUUIDFromBytes(byte[] name){MessageDigest md;try{md = MessageDigest.getInstance("MD5");}catch (NoSuchAlgorithmException nsae){throw new InternalError("MD5 not supported");}byte[] md5Bytes = md.digest(name);md5Bytes[6] &= 0x0f; /* clear version */md5Bytes[6] |= 0x30; /* set to version 3 */md5Bytes[8] &= 0x3f; /* clear variant */md5Bytes[8] |= 0x80; /* set to IETF variant */return new UUID(md5Bytes);}/*** 根據 {@link #toString()} 方法中描述的字符串標準表示形式創建{@code UUID}。** @param name 指定 {@code UUID} 字符串* @return 具有指定值的 {@code UUID}* @throws IllegalArgumentException 如果 name 與 {@link #toString} 中描述的字符串表示形式不符拋出此異常**/public static UUID fromString(String name){String[] components = name.split("-");if (components.length != 5){throw new IllegalArgumentException("Invalid UUID string: " + name);}for (int i = 0; i < 5; i++){components[i] = "0x" + components[i];}long mostSigBits = Long.decode(components[0]).longValue();mostSigBits <<= 16;mostSigBits |= Long.decode(components[1]).longValue();mostSigBits <<= 16;mostSigBits |= Long.decode(components[2]).longValue();long leastSigBits = Long.decode(components[3]).longValue();leastSigBits <<= 48;leastSigBits |= Long.decode(components[4]).longValue();return new UUID(mostSigBits, leastSigBits);}/*** 返回此 UUID 的 128 位值中的最低有效 64 位。** @return 此 UUID 的 128 位值中的最低有效 64 位。*/public long getLeastSignificantBits(){return leastSigBits;}/*** 返回此 UUID 的 128 位值中的最高有效 64 位。** @return 此 UUID 的 128 位值中最高有效 64 位。*/public long getMostSignificantBits(){return mostSigBits;}/*** 與此 {@code UUID} 相關聯的版本號. 版本號描述此 {@code UUID} 是如何生成的。* <p>* 版本號具有以下含意:* <ul>* <li>1 基于時間的 UUID* <li>2 DCE 安全 UUID* <li>3 基于名稱的 UUID* <li>4 隨機生成的 UUID* </ul>** @return 此 {@code UUID} 的版本號*/public int version(){// Version is bits masked by 0x000000000000F000 in MS longreturn (int) ((mostSigBits >> 12) & 0x0f);}/*** 與此 {@code UUID} 相關聯的變體號。變體號描述 {@code UUID} 的布局。* <p>* 變體號具有以下含意：* <ul>* <li>0 為 NCS 向后兼容保留* <li>2 <a href="http://www.ietf.org/rfc/rfc4122.txt">IETF RFC 4122</a>(Leach-Salz), 用于此類* <li>6 保留，微軟向后兼容* <li>7 保留供以后定義使用* </ul>** @return 此 {@code UUID} 相關聯的變體號*/public int variant(){// This field is composed of a varying number of bits.// 0 - - Reserved for NCS backward compatibility// 1 0 - The IETF aka Leach-Salz variant (used by this class)// 1 1 0 Reserved, Microsoft backward compatibility// 1 1 1 Reserved for future definition.return (int) ((leastSigBits >>> (64 - (leastSigBits >>> 62))) & (leastSigBits >> 63));}/*** 與此 UUID 相關聯的時間戳值。** <p>* 60 位的時間戳值根據此 {@code UUID} 的 time_low、time_mid 和 time_hi 字段構造。<br>* 所得到的時間戳以 100 毫微秒為單位，從 UTC（通用協調時間） 1582 年 10 月 15 日零時開始。** <p>* 時間戳值僅在在基于時間的 UUID（其 version 類型為 1）中才有意義。<br>* 如果此 {@code UUID} 不是基于時間的 UUID，則此方法拋出 UnsupportedOperationException。** @throws UnsupportedOperationException 如果此 {@code UUID} 不是 version 為 1 的 UUID。*/public long timestamp() throws UnsupportedOperationException{checkTimeBase();return (mostSigBits & 0x0FFFL) << 48//| ((mostSigBits >> 16) & 0x0FFFFL) << 32//| mostSigBits >>> 32;}/*** 與此 UUID 相關聯的時鐘序列值。** <p>* 14 位的時鐘序列值根據此 UUID 的 clock_seq 字段構造。clock_seq 字段用于保證在基于時間的 UUID 中的時間唯一性。* <p>* {@code clockSequence} 值僅在基于時間的 UUID（其 version 類型為 1）中才有意義。如果此 UUID 不是基于時間的 UUID，則此方法拋出* UnsupportedOperationException。** @return 此 {@code UUID} 的時鐘序列** @throws UnsupportedOperationException 如果此 UUID 的 version 不為 1*/public int clockSequence() throws UnsupportedOperationException{checkTimeBase();return (int) ((leastSigBits & 0x3FFF000000000000L) >>> 48);}/*** 與此 UUID 相關的節點值。** <p>* 48 位的節點值根據此 UUID 的 node 字段構造。此字段旨在用于保存機器的 IEEE 802 地址，該地址用于生成此 UUID 以保證空間唯一性。* <p>* 節點值僅在基于時間的 UUID（其 version 類型為 1）中才有意義。<br>* 如果此 UUID 不是基于時間的 UUID，則此方法拋出 UnsupportedOperationException。** @return 此 {@code UUID} 的節點值** @throws UnsupportedOperationException 如果此 UUID 的 version 不為 1*/public long node() throws UnsupportedOperationException{checkTimeBase();return leastSigBits & 0x0000FFFFFFFFFFFFL;}/*** 返回此{@code UUID} 的字符串表現形式。** <p>* UUID 的字符串表示形式由此 BNF 描述：* * <pre>* {@code* UUID = <time_low>-<time_mid>-<time_high_and_version>-<variant_and_sequence>-<node>* time_low = 4*<hexOctet>* time_mid = 2*<hexOctet>* time_high_and_version = 2*<hexOctet>* variant_and_sequence = 2*<hexOctet>* node = 6*<hexOctet>* hexOctet = <hexDigit><hexDigit>* hexDigit = [0-9a-fA-F]* }* </pre>* * </blockquote>** @return 此{@code UUID} 的字符串表現形式* @see #toString(boolean)*/@Overridepublic String toString(){return toString(false);}/*** 返回此{@code UUID} 的字符串表現形式。** <p>* UUID 的字符串表示形式由此 BNF 描述：* * <pre>* {@code* UUID = <time_low>-<time_mid>-<time_high_and_version>-<variant_and_sequence>-<node>* time_low = 4*<hexOctet>* time_mid = 2*<hexOctet>* time_high_and_version = 2*<hexOctet>* variant_and_sequence = 2*<hexOctet>* node = 6*<hexOctet>* hexOctet = <hexDigit><hexDigit>* hexDigit = [0-9a-fA-F]* }* </pre>* * </blockquote>** @param isSimple 是否簡單模式，簡單模式為不帶'-'的UUID字符串* @return 此{@code UUID} 的字符串表現形式*/public String toString(boolean isSimple){final StringBuilder builder = new StringBuilder(isSimple ? 32 : 36);// time_lowbuilder.append(digits(mostSigBits >> 32, 8));if (false == isSimple){builder.append('-');}// time_midbuilder.append(digits(mostSigBits >> 16, 4));if (false == isSimple){builder.append('-');}// time_high_and_versionbuilder.append(digits(mostSigBits, 4));if (false == isSimple){builder.append('-');}// variant_and_sequencebuilder.append(digits(leastSigBits >> 48, 4));if (false == isSimple){builder.append('-');}// nodebuilder.append(digits(leastSigBits, 12));return builder.toString();}/*** 返回此 UUID 的哈希碼。** @return UUID 的哈希碼值。*/@Overridepublic int hashCode(){long hilo = mostSigBits ^ leastSigBits;return ((int) (hilo >> 32)) ^ (int) hilo;}/*** 將此對象與指定對象比較。* <p>* 當且僅當參數不為 {@code null}、而是一個 UUID 對象、具有與此 UUID 相同的 varriant、包含相同的值（每一位均相同）時，結果才為 {@code true}。** @param obj 要與之比較的對象** @return 如果對象相同，則返回 {@code true}；否則返回 {@code false}*/@Overridepublic boolean equals(Object obj){if ((null == obj) || (obj.getClass() != UUID.class)){return false;}UUID id = (UUID) obj;return (mostSigBits == id.mostSigBits && leastSigBits == id.leastSigBits);}// Comparison Operations/*** 將此 UUID 與指定的 UUID 比較。** <p>* 如果兩個 UUID 不同，且第一個 UUID 的最高有效字段大于第二個 UUID 的對應字段，則第一個 UUID 大于第二個 UUID。** @param val 與此 UUID 比較的 UUID** @return 在此 UUID 小于、等于或大于 val 時，分別返回 -1、0 或 1。**/@Overridepublic int compareTo(UUID val){// The ordering is intentionally set up so that the UUIDs// can simply be numerically compared as two numbersreturn (this.mostSigBits < val.mostSigBits ? -1 : //(this.mostSigBits > val.mostSigBits ? 1 : //(this.leastSigBits < val.leastSigBits ? -1 : //(this.leastSigBits > val.leastSigBits ? 1 : //0))));}// -------------------------------------------------------------------------------------------------------------------// Private method start/*** 返回指定數字對應的hex值* * @param val 值* @param digits 位* @return 值*/private static String digits(long val, int digits){long hi = 1L << (digits * 4);return Long.toHexString(hi | (val & (hi - 1))).substring(1);}/*** 檢查是否為time-based版本UUID*/private void checkTimeBase(){if (version() != 1){throw new UnsupportedOperationException("Not a time-based UUID");}}/*** 獲取{@link SecureRandom}，類提供加密的強隨機數生成器 (RNG)* * @return {@link SecureRandom}*/public static SecureRandom getSecureRandom(){try{return SecureRandom.getInstance("SHA1PRNG");}catch (NoSuchAlgorithmException e){throw new UtilException(e);}}/*** 獲取隨機數生成器對象<br>* ThreadLocalRandom是JDK 7之后提供并發產生隨機數，能夠解決多個線程發生的競爭爭奪。* * @return {@link ThreadLocalRandom}*/public static ThreadLocalRandom getRandom(){return ThreadLocalRandom.current();} }

這樣就能生成UUID作為唯一標志。在將其存進Redi緩存時添加一個常量類中定義的指定前綴

String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

常量

public static final String CAPTCHA_CODE_KEY = "captcha_codes:";

然后將其存儲進redis中并設置2分鐘有效

redisCache.setCacheObject(verifyKey, verifyCode, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);

有效期也是在常量類中定義

public static final Integer CAPTCHA_EXPIRATION = 2;

然后下面就是生成圖片的操作，調用了驗證碼工具類VerifyCodeUtils的方法outputImage

工具類全部代碼

import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.security.SecureRandom; import java.util.Arrays; import java.util.Random; import javax.imageio.ImageIO;/*** 驗證碼工具類**/ public class VerifyCodeUtils {// 使用到Algerian字體，系統里沒有的話需要安裝字體，字體只顯示大寫，去掉了1,0,i,o幾個容易混淆的字符public static final String VERIFY_CODES = "123456789ABCDEFGHJKLMNPQRSTUVWXYZ";private static Random random = new SecureRandom();/*** 使用系統默認字符源生成驗證碼** @param verifySize 驗證碼長度* @return*/public static String generateVerifyCode(int verifySize){return generateVerifyCode(verifySize, VERIFY_CODES);}/*** 使用指定源生成驗證碼** @param verifySize 驗證碼長度* @param sources 驗證碼字符源* @return*/public static String generateVerifyCode(int verifySize, String sources){if (sources == null || sources.length() == 0){sources = VERIFY_CODES;}int codesLen = sources.length();Random rand = new Random(System.currentTimeMillis());StringBuilder verifyCode = new StringBuilder(verifySize);for (int i = 0; i < verifySize; i++){verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1)));}return verifyCode.toString();}/*** 輸出指定驗證碼圖片流** @param w* @param h* @param os* @param code* @throws IOException*/public static void outputImage(int w, int h, OutputStream os, String code) throws IOException{int verifySize = code.length();BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);Random rand = new Random();Graphics2D g2 = image.createGraphics();g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);Color[] colors = new Color[5];Color[] colorSpaces = new Color[] { Color.WHITE, Color.CYAN, Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA,Color.ORANGE, Color.PINK, Color.YELLOW };float[] fractions = new float[colors.length];for (int i = 0; i < colors.length; i++){colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)];fractions[i] = rand.nextFloat();}Arrays.sort(fractions);g2.setColor(Color.GRAY);// 設置邊框色g2.fillRect(0, 0, w, h);Color c = getRandColor(200, 250);g2.setColor(c);// 設置背景色g2.fillRect(0, 2, w, h - 4);// 繪制干擾線Random random = new Random();g2.setColor(getRandColor(160, 200));// 設置線條的顏色for (int i = 0; i < 20; i++){int x = random.nextInt(w - 1);int y = random.nextInt(h - 1);int xl = random.nextInt(6) + 1;int yl = random.nextInt(12) + 1;g2.drawLine(x, y, x + xl + 40, y + yl + 20);}// 添加噪點float yawpRate = 0.05f;// 噪聲率int area = (int) (yawpRate * w * h);for (int i = 0; i < area; i++){int x = random.nextInt(w);int y = random.nextInt(h);int rgb = getRandomIntColor();image.setRGB(x, y, rgb);}shear(g2, w, h, c);// 使圖片扭曲g2.setColor(getRandColor(100, 160));int fontSize = h - 4;Font font = new Font("Algerian", Font.ITALIC, fontSize);g2.setFont(font);char[] chars = code.toCharArray();for (int i = 0; i < verifySize; i++){AffineTransform affine = new AffineTransform();affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1),(w / verifySize) * i + fontSize / 2, h / 2);g2.setTransform(affine);g2.drawChars(chars, i, 1, ((w - 10) / verifySize) * i + 5, h / 2 + fontSize / 2 - 10);}g2.dispose();ImageIO.write(image, "jpg", os);}private static 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 static int getRandomIntColor(){int[] rgb = getRandomRgb();int color = 0;for (int c : rgb){color = color << 8;color = color | c;}return color;}private static int[] getRandomRgb(){int[] rgb = new int[3];for (int i = 0; i < 3; i++){rgb[i] = random.nextInt(255);}return rgb;}private static void shear(Graphics g, int w1, int h1, Color color){shearX(g, w1, h1, color);shearY(g, w1, h1, color);}private static 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 static 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);}}} }

然后就是將圖片使用Base64編碼，這里也調用了Base64工具類,全部代碼

/*** Base64工具類**/ public final class Base64 {static private final int???? BASELENGTH?????????? = 128;static private final int???? LOOKUPLENGTH???????? = 64;static private final int???? TWENTYFOURBITGROUP?? = 24;static private final int???? EIGHTBIT???????????? = 8;static private final int???? SIXTEENBIT?????????? = 16;static private final int???? FOURBYTE???????????? = 4;static private final int???? SIGN???????????????? = -128;static private final char??? PAD????????????????? = '=';static final private byte[]? base64Alphabet?????? = new byte[BASELENGTH];static final private char[]? lookUpBase64Alphabet = new char[LOOKUPLENGTH];static{for (int i = 0; i < BASELENGTH; ++i){base64Alphabet[i] = -1;}for (int i = 'Z'; i >= 'A'; i--){base64Alphabet[i] = (byte) (i - 'A');}for (int i = 'z'; i >= 'a'; i--){base64Alphabet[i] = (byte) (i - 'a' + 26);}for (int i = '9'; i >= '0'; i--){base64Alphabet[i] = (byte) (i - '0' + 52);}base64Alphabet['+'] = 62;base64Alphabet['/'] = 63;for (int i = 0; i <= 25; i++){lookUpBase64Alphabet[i] = (char) ('A' + i);}for (int i = 26, j = 0; i <= 51; i++, j++){lookUpBase64Alphabet[i] = (char) ('a' + j);}for (int i = 52, j = 0; i <= 61; i++, j++){lookUpBase64Alphabet[i] = (char) ('0' + j);}lookUpBase64Alphabet[62] = (char) '+';lookUpBase64Alphabet[63] = (char) '/';}private static boolean isWhiteSpace(char octect){return (octect == 0x20 || octect == 0xd || octect == 0xa || octect == 0x9);}private static boolean isPad(char octect){return (octect == PAD);}private static boolean isData(char octect){return (octect < BASELENGTH && base64Alphabet[octect] != -1);}/*** Encodes hex octects into Base64** @param binaryData Array containing binaryData* @return Encoded Base64 array*/public static String encode(byte[] binaryData){if (binaryData == null){return null;}int lengthDataBits = binaryData.length * EIGHTBIT;if (lengthDataBits == 0){return "";}int fewerThan24bits = lengthDataBits % TWENTYFOURBITGROUP;int numberTriplets = lengthDataBits / TWENTYFOURBITGROUP;int numberQuartet = fewerThan24bits != 0 ? numberTriplets + 1 : numberTriplets;char encodedData[] = null;encodedData = new char[numberQuartet * 4];byte k = 0, l = 0, b1 = 0, b2 = 0, b3 = 0;int encodedIndex = 0;int dataIndex = 0;for (int i = 0; i < numberTriplets; i++){b1 = binaryData[dataIndex++];b2 = binaryData[dataIndex++];b3 = binaryData[dataIndex++];l = (byte) (b2 & 0x0f);k = (byte) (b1 & 0x03);byte val1 = ((b1 & SIGN) == 0) ? (byte) (b1 >> 2) : (byte) ((b1) >> 2 ^ 0xc0);byte val2 = ((b2 & SIGN) == 0) ? (byte) (b2 >> 4) : (byte) ((b2) >> 4 ^ 0xf0);byte val3 = ((b3 & SIGN) == 0) ? (byte) (b3 >> 6) : (byte) ((b3) >> 6 ^ 0xfc);encodedData[encodedIndex++] = lookUpBase64Alphabet[val1];encodedData[encodedIndex++] = lookUpBase64Alphabet[val2 | (k << 4)];encodedData[encodedIndex++] = lookUpBase64Alphabet[(l << 2) | val3];encodedData[encodedIndex++] = lookUpBase64Alphabet[b3 & 0x3f];}// form integral number of 6-bit groupsif (fewerThan24bits == EIGHTBIT){b1 = binaryData[dataIndex];k = (byte) (b1 & 0x03);byte val1 = ((b1 & SIGN) == 0) ? (byte) (b1 >> 2) : (byte) ((b1) >> 2 ^ 0xc0);encodedData[encodedIndex++] = lookUpBase64Alphabet[val1];encodedData[encodedIndex++] = lookUpBase64Alphabet[k << 4];encodedData[encodedIndex++] = PAD;encodedData[encodedIndex++] = PAD;}else if (fewerThan24bits == SIXTEENBIT){b1 = binaryData[dataIndex];b2 = binaryData[dataIndex + 1];l = (byte) (b2 & 0x0f);k = (byte) (b1 & 0x03);byte val1 = ((b1 & SIGN) == 0) ? (byte) (b1 >> 2) : (byte) ((b1) >> 2 ^ 0xc0);byte val2 = ((b2 & SIGN) == 0) ? (byte) (b2 >> 4) : (byte) ((b2) >> 4 ^ 0xf0);encodedData[encodedIndex++] = lookUpBase64Alphabet[val1];encodedData[encodedIndex++] = lookUpBase64Alphabet[val2 | (k << 4)];encodedData[encodedIndex++] = lookUpBase64Alphabet[l << 2];encodedData[encodedIndex++] = PAD;}return new String(encodedData);}/*** Decodes Base64 data into octects** @param encoded string containing Base64 data* @return Array containind decoded data.*/public static byte[] decode(String encoded){if (encoded == null){return null;}char[] base64Data = encoded.toCharArray();// remove white spacesint len = removeWhiteSpace(base64Data);if (len % FOURBYTE != 0){return null;// should be divisible by four}int numberQuadruple = (len / FOURBYTE);if (numberQuadruple == 0){return new byte[0];}byte decodedData[] = null;byte b1 = 0, b2 = 0, b3 = 0, b4 = 0;char d1 = 0, d2 = 0, d3 = 0, d4 = 0;int i = 0;int encodedIndex = 0;int dataIndex = 0;decodedData = new byte[(numberQuadruple) * 3];for (; i < numberQuadruple - 1; i++){if (!isData((d1 = base64Data[dataIndex++])) || !isData((d2 = base64Data[dataIndex++]))|| !isData((d3 = base64Data[dataIndex++])) || !isData((d4 = base64Data[dataIndex++]))){return null;} // if found "no data" just return nullb1 = base64Alphabet[d1];b2 = base64Alphabet[d2];b3 = base64Alphabet[d3];b4 = base64Alphabet[d4];decodedData[encodedIndex++] = (byte) (b1 << 2 | b2 >> 4);decodedData[encodedIndex++] = (byte) (((b2 & 0xf) << 4) | ((b3 >> 2) & 0xf));decodedData[encodedIndex++] = (byte) (b3 << 6 | b4);}if (!isData((d1 = base64Data[dataIndex++])) || !isData((d2 = base64Data[dataIndex++]))){return null;// if found "no data" just return null}b1 = base64Alphabet[d1];b2 = base64Alphabet[d2];d3 = base64Data[dataIndex++];d4 = base64Data[dataIndex++];if (!isData((d3)) || !isData((d4))){// Check if they are PAD charactersif (isPad(d3) && isPad(d4)){if ((b2 & 0xf) != 0)// last 4 bits should be zero{return null;}byte[] tmp = new byte[i * 3 + 1];System.arraycopy(decodedData, 0, tmp, 0, i * 3);tmp[encodedIndex] = (byte) (b1 << 2 | b2 >> 4);return tmp;}else if (!isPad(d3) && isPad(d4)){b3 = base64Alphabet[d3];if ((b3 & 0x3) != 0)// last 2 bits should be zero{return null;}byte[] tmp = new byte[i * 3 + 2];System.arraycopy(decodedData, 0, tmp, 0, i * 3);tmp[encodedIndex++] = (byte) (b1 << 2 | b2 >> 4);tmp[encodedIndex] = (byte) (((b2 & 0xf) << 4) | ((b3 >> 2) & 0xf));return tmp;}else{return null;}}else{ // No PAD e.g 3cQlb3 = base64Alphabet[d3];b4 = base64Alphabet[d4];decodedData[encodedIndex++] = (byte) (b1 << 2 | b2 >> 4);decodedData[encodedIndex++] = (byte) (((b2 & 0xf) << 4) | ((b3 >> 2) & 0xf));decodedData[encodedIndex++] = (byte) (b3 << 6 | b4);}return decodedData;}/*** remove WhiteSpace from MIME containing encoded Base64 data.** @param data the byte array of base64 data (with WS)* @return the new length*/private static int removeWhiteSpace(char[] data){if (data == null){return 0;}// count characters that's not whitespaceint newSize = 0;int len = data.length;for (int i = 0; i < len; i++){if (!isWhiteSpace(data[i])){data[newSize++] = data[i];}}return newSize;} }

這樣驗證碼接口就會把UUID和驗證碼都返回給前端。

其中AjaxResult是自定義響應結果類

import java.util.HashMap; import com.ruoyi.common.constant.HttpStatus; import com.ruoyi.common.utils.StringUtils;/*** 操作消息提醒**/ public class AjaxResult extends HashMap<String, Object> {private static final long serialVersionUID = 1L;/** 狀態碼 */public static final String CODE_TAG = "code";/** 返回內容 */public static final String MSG_TAG = "msg";/** 數據對象 */public static final String DATA_TAG = "data";/*** 初始化一個新創建的 AjaxResult 對象，使其表示一個空消息。*/public AjaxResult(){}/*** 初始化一個新創建的 AjaxResult 對象** @param code 狀態碼* @param msg 返回內容*/public AjaxResult(int code, String msg){super.put(CODE_TAG, code);super.put(MSG_TAG, msg);}/*** 初始化一個新創建的 AjaxResult 對象** @param code 狀態碼* @param msg 返回內容* @param data 數據對象*/public AjaxResult(int code, String msg, Object data){super.put(CODE_TAG, code);super.put(MSG_TAG, msg);if (StringUtils.isNotNull(data)){super.put(DATA_TAG, data);}}/*** 返回成功消息** @return 成功消息*/public static AjaxResult success(){return AjaxResult.success("操作成功");}/*** 返回成功數據** @return 成功消息*/public static AjaxResult success(Object data){return AjaxResult.success("操作成功", data);}/*** 返回成功消息** @param msg 返回內容* @return 成功消息*/public static AjaxResult success(String msg){return AjaxResult.success(msg, null);}/*** 返回成功消息** @param msg 返回內容* @param data 數據對象* @return 成功消息*/public static AjaxResult success(String msg, Object data){return new AjaxResult(HttpStatus.SUCCESS, msg, data);}/*** 返回錯誤消息** @return*/public static AjaxResult error(){return AjaxResult.error("操作失敗");}/*** 返回錯誤消息** @param msg 返回內容* @return 警告消息*/public static AjaxResult error(String msg){return AjaxResult.error(msg, null);}/*** 返回錯誤消息** @param msg 返回內容* @param data 數據對象* @return 警告消息*/public static AjaxResult error(String msg, Object data){return new AjaxResult(HttpStatus.ERROR, msg, data);}/*** 返回錯誤消息** @param code 狀態碼* @param msg 返回內容* @return 警告消息*/public static AjaxResult error(int code, String msg){return new AjaxResult(code, msg, null);} }

然后在登錄接口中

????????String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;String captcha = redisCache.getCacheObject(verifyKey);redisCache.deleteObject(verifyKey);if (captcha == null){AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));throw new CaptchaExpireException();}

獲取前端傳遞的uuid并加上同樣的前綴，去緩存中查詢，并且從緩存中刪除，如果查不出來則返回驗證碼失效。

總結

以上是生活随笔為你收集整理的SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue中使用js-cookie插件实现登
下一篇： Java中使用Base64进行编码解码的

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

vue

SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效

場景

實現

data:image/png;base64的用法詳解

總結