微信小程序中Crypto.js加密解密詳細(xì)示例代碼
前言
在微信小程序開(kāi)發(fā)中,數(shù)據(jù)安全至關(guān)重要。crypto-js作為一個(gè)強(qiáng)大的JavaScript加密庫(kù),為小程序提供了可靠的加密解密功能。本文將詳細(xì)介紹如何在微信小程序中使用crypto-js進(jìn)行AES加密解密,并分析其中的疑難點(diǎn)和注意事項(xiàng)。
一、crypto-js的引入
1. 使用npm安裝
1.1 檢查 package.json 文件
首先檢查小程序根目錄下是否有 package.json 文件。如果沒(méi)有該文件,則需要執(zhí)行npm init 進(jìn)行初始化。
1.2 安裝 crypto-js
執(zhí)行下面命令,如果不行可以換yarn試試。
npm install crypto-js
1.3 構(gòu)建 npm
安裝crypto-js后直接構(gòu)建,會(huì)出現(xiàn)錯(cuò)誤,這個(gè)時(shí)候需要在微信開(kāi)發(fā)者工具的工具菜單中,點(diǎn)擊 構(gòu)建 npm。這一步驟將把安裝的crypto-js庫(kù)進(jìn)行構(gòu)建,使其能夠在小程序中使用。構(gòu)建完成后,就可以在小程序中引入和使用crypto-js進(jìn)行加解密操作了。
2. 直接引入crypto-js
此方法需要手動(dòng)下載crypto-js的源碼,并將其放置在項(xiàng)目的合適位置,如/utils/目錄下,crypto-js下載。
在需要使用crypto-js的頁(yè)面或組件中,通過(guò)require方式引入crypto-js:
const CryptoJS = require('../../utils/crypto-js');
二、AES加密解密的實(shí)現(xiàn)
密鑰和初始向量的設(shè)置:AES加密需要密鑰(Key)和初始向量(IV)。這些參數(shù)可以自定義,但通常建議與后端開(kāi)發(fā)人員溝通后保持一致,以確保加密解密的正確性。密鑰和IV的長(zhǎng)度應(yīng)滿足算法要求,例如AES算法通常使用16字節(jié)(128位)的密鑰和IV。
加密解密函數(shù)封裝:創(chuàng)建一個(gè)加密函數(shù),使用
crypto-js的AES模塊對(duì)數(shù)據(jù)進(jìn)行加密,使用相同的密鑰和配置參數(shù)創(chuàng)建解密函數(shù)。
// 如果是手動(dòng)導(dǎo)入的,可以這樣寫(xiě)
// const CryptoJS = require("./crypto-js");
// npm 安裝
import CryptoJS from "crypto-js";
// 密鑰16字節(jié)
// 配置密鑰和IV(與Java完全一致)
const KEY = "123456789abcdefg"; // 16字節(jié)密鑰
const IV = "987654321abcdefg"; // 16字節(jié)固定IV
// 密鑰和IV轉(zhuǎn)換為WordArray(CryptoJS要求的格式)
const key = CryptoJS.enc.Utf8.parse(KEY);
const iv = CryptoJS.enc.Utf8.parse(IV);
// 加密函數(shù),包含配置項(xiàng)
export const encryptAES = (message) => {
let config = {
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
iv: iv,
};
return CryptoJS.AES.encrypt(message, key, config).toString();
};
// 解密
export const decrypt = (encryptedBase64) => {
try {
// 1. 將Base64加密數(shù)據(jù)轉(zhuǎn)換為CryptoJS格式
const encryptedHex = CryptoJS.enc.Base64.parse(encryptedBase64);
// 2. 執(zhí)行解密(模式CBC,填充PKCS7)
const decrypted = CryptoJS.AES.decrypt(
{ ciphertext: encryptedHex }, // 加密數(shù)據(jù)
key, // 密鑰
{
iv: iv, // 初始化向量
mode: CryptoJS.mode.CBC, // 模式必須與Java一致
padding: CryptoJS.pad.Pkcs7, // PKCS5Padding與PKCS7Padding兼容
}
);
// 3. 將解密結(jié)果轉(zhuǎn)換為UTF-8字符串
return decrypted.toString(CryptoJS.enc.Utf8);
} catch (err) {
console.error("AES解密失?。?, err);
return null; // 解密失敗返回null
}
};
- 使用示例:在需要加密解密的地方調(diào)用上述函數(shù)即可。
在線加密加密工具
import { decrypt, encryptAES } from "../../utils/util";
Page({
onLoad() {
const originalData = { id: 1, name: "exampleName" }; // 待加密的數(shù)據(jù)
console.log("加密后的數(shù)據(jù):", encryptAES(JSON.stringify(originalData)));
console.log("解密后的數(shù)據(jù):", JSON.parse(decrypt("KdWWnjeoE5RQQ8JN+WAWJj0rnkzvaLkRSweOoGb2cqQ=")));
},
});

和在線工具加密一直

三、注意事項(xiàng)
密鑰和IV的管理:密鑰和IV是加密解密的關(guān)鍵,必須妥善保管。
加密模式的選擇:
crypto-js支持多種加密模式,如ECB、CBC等。每種模式都有其特點(diǎn)和適用場(chǎng)景。例如,CBC模式相比ECB模式更安全,因?yàn)樗褂昧顺跏枷蛄浚↖V)來(lái)增加加密的隨機(jī)性。數(shù)據(jù)的編碼和解碼:在加密前,需要將數(shù)據(jù)轉(zhuǎn)換為適合加密的格式。通常使用
UTF-8編碼將字符串轉(zhuǎn)換為字節(jié)數(shù)組。同樣地,在解密后,也需要將字節(jié)數(shù)組轉(zhuǎn)換回原始的字符串格式。錯(cuò)誤處理:在使用
crypto-js進(jìn)行加密解密時(shí),可能會(huì)遇到各種錯(cuò)誤,如密鑰不匹配、數(shù)據(jù)格式不正確等。因此,在編寫(xiě)代碼時(shí),應(yīng)該添加適當(dāng)?shù)腻e(cuò)誤處理邏輯,以確保程序的穩(wěn)定性和可靠性。如果遇到
random,可以重寫(xiě)random方法,示例如下:const CryptoJS = require("./crypto-js"); CryptoJS.lib.WordArray.random = function (nBytes) { const uint8Array = new Uint8Array(nBytes); wx.getRandomValues(uint8Array); // 使用小程序原生API生成隨機(jī)數(shù) const hexStr = Array.from(uint8Array) .map((byte) => ("0" + (byte & 0xff).toString(16)).slice(-2)) .join(""); return CryptoJS.enc.Hex.parse(hexStr); };
總結(jié)
到此這篇關(guān)于微信小程序中Crypto.js加密解密的文章就介紹到這了,更多相關(guān)微信小程序Crypto.js加密解密內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何用Driver.js輕松打造完美頁(yè)面引導(dǎo)體驗(yàn)
Driver.js是一個(gè)頁(yè)面引導(dǎo)插件,封裝完美,只需引入實(shí)例化、綁定類名即可實(shí)現(xiàn)頁(yè)面引導(dǎo),這篇文章主要介紹了如何用Driver.js輕松打造完美頁(yè)面引導(dǎo)體驗(yàn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制...2007-06-06
JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解
這篇文章主要介紹了JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼,幫助大家學(xué)習(xí)理解此部分知識(shí),需要的朋友可以參考下2016-11-11
IE8 內(nèi)存泄露(內(nèi)存一直增長(zhǎng) )的原因及解決辦法
最近開(kāi)發(fā)的時(shí)候?qū)?yè)面使用了定時(shí)的局部更新,結(jié)果在ie6,7和Firefox下,一切正常,而在ie8下過(guò)上幾個(gè)小時(shí)就瀏覽器就崩潰了,顯示是內(nèi)存溢出,下面由腳本之家小編給大家介紹ie8下內(nèi)存一直增長(zhǎng)內(nèi)存泄漏的原因及解決辦法,需要的朋友一起學(xué)習(xí)吧2016-04-04
前端項(xiàng)目npm?install?安裝依賴報(bào)錯(cuò)的解決方案(三種問(wèn)題解決方案)
本文給大家介紹前端項(xiàng)目npm?install?安裝依賴報(bào)錯(cuò)的解決方案(三種問(wèn)題解決方案),給大家總結(jié)了前端項(xiàng)目安裝依賴,遇到過(guò)的問(wèn)題,每一種問(wèn)題給大家完美解決方案,感興趣的朋友一起看看吧2023-12-12
JS小數(shù)運(yùn)算出現(xiàn)多為小數(shù)問(wèn)題的解決方法
這篇文章主要介紹了JS小數(shù)運(yùn)算出現(xiàn)多為小數(shù)問(wèn)題的解決方法,需要的朋友可以參考下2016-06-06
javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08

