微信小程序中Crypto.js加密解密详细示例代码
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">前言</a></li><li><a href="#_label1">一、crypto-js的引入</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_0">1. 使用npm安装</a></li><ul class="third_class_ul"><li><a href="#_label3_1_0_0">1.1 检查 package.json 文件</a></li><li><a href="#_label3_1_0_1">1.2 安装 crypto-js</a></li><li><a href="#_label3_1_0_2">1.3 构建 npm</a></li></ul><li><a href="#_lab2_1_1">2. 直接引入crypto-js</a></li><ul class="third_class_ul"></ul></ul><li><a href="#_label2">二、AES加密解密的实现</a></li><ul class="second_class_ul"></ul><li><a href="#_label3">三、注意事项</a></li><ul class="second_class_ul"></ul><li><a href="#_label4">总结 </a></li><ul class="second_class_ul"></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>前言</h2><p>在微信小程序开发中，数据安全至关重要。<code>crypto-js</code>作为一个强大的<code>JavaScript</code>加密库，为小程序提供了可靠的加密解密功能。本文将详细介绍如何在微信小程序中使用<code>crypto-js</code>进行<code>AES</code>加密解密，并分析其中的疑难点和注意事项。</p>
<p class="maodian"><a name="_label1"></a></p><h2>一、crypto-js的引入</h2>
<p class="maodian"><a name="_lab2_1_0"></a></p><h3>1. 使用npm安装</h3>
<p class="maodian"><a name="_label3_1_0_0"></a></p><h4>1.1 检查 package.json 文件</h4>
<p>首先检查小程序根目录下是否有 <code>package.json</code> 文件。如果没有该文件，则需要执行<code>npm init</code> 进行初始化。</p>
<p class="maodian"><a name="_label3_1_0_1"></a></p><h4>1.2 安装 crypto-js</h4>
<p>执行下面命令，如果不行可以换<code>yarn</code>试试。</p>
<div class="jb51code"><pre class="brush:ps;">npm install crypto-js
</pre></div>
<p class="maodian"><a name="_label3_1_0_2"></a></p><h4>1.3 构建 npm</h4>
<p>安装<code>crypto-js</code>后直接构建，会出现错误，这个时候需要在微信开发者工具的<code>工具</code>菜单中，点击 <code>构建 npm</code>。这一步骤将把安装的<code>crypto-js</code>库进行构建，使其能够在小程序中使用。构建完成后，就可以在小程序中引入和使用<code>crypto-js</code>进行加解密操作了。</p>
<p class="maodian"><a name="_lab2_1_1"></a></p><h3>2. 直接引入crypto-js</h3>
<p>此方法需要手动下载<code>crypto-js</code>的源码，并将其放置在项目的合适位置，如<code>/utils/</code>目录下，<a href="https://download.csdn.net/download/qq_27829333/92418113" rel="external nofollow">crypto-js下载</a>。</p>
<p>在需要使用<code>crypto-js</code>的页面或组件中，通过<code>require</code>方式引入<code>crypto-js</code>：</p>
<div class="jb51code"><pre class="brush:js;">const CryptoJS = require('../../utils/crypto-js');
</pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>二、AES加密解密的实现</h2>
<ol><li><p><strong>密钥和初始向量的设置</strong>：AES加密需要密钥（Key）和初始向量（IV）。这些参数可以自定义，但通常建议与后端开发人员沟通后保持一致，以确保加密解密的正确性。密钥和IV的长度应满足算法要求，例如AES算法通常使用16字节（128位）的密钥和IV。</p></li><li><p><strong>加密解密函数封装</strong>：创建一个加密函数，使用<code>crypto-js</code>的AES模块对数据进行加密，使用相同的密钥和配置参数创建解密函数。</p></li></ol>
<div class="jb51code"><pre class="brush:js;">// 如果是手动导入的，可以这样写
// const CryptoJS = require("./crypto-js");
// npm 安装
import CryptoJS from "crypto-js";
// 密钥16字节
// 配置密钥和IV（与Java完全一致）
const KEY = "123456789abcdefg"; // 16字节密钥
const IV = "987654321abcdefg"; // 16字节固定IV
// 密钥和IV转换为WordArray（CryptoJS要求的格式）
const key = CryptoJS.enc.Utf8.parse(KEY);
const iv = CryptoJS.enc.Utf8.parse(IV);
// 加密函数，包含配置项
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加密数据转换为CryptoJS格式
const encryptedHex = CryptoJS.enc.Base64.parse(encryptedBase64);
// 2. 执行解密（模式CBC，填充PKCS7）
const decrypted = CryptoJS.AES.decrypt(
{ ciphertext: encryptedHex }, // 加密数据
key, // 密钥
{
iv: iv, // 初始化向量
mode: CryptoJS.mode.CBC, // 模式必须与Java一致
padding: CryptoJS.pad.Pkcs7, // PKCS5Padding与PKCS7Padding兼容
}
);
// 3. 将解密结果转换为UTF-8字符串
return decrypted.toString(CryptoJS.enc.Utf8);
} catch (err) {
console.error("AES解密失败：", err);
return null; // 解密失败返回null
}
};
</pre></div>
<ol start="3"><li><strong>使用示例</strong>：在需要加密解密的地方调用上述函数即可。<br /><a href="https://www.btool.cn/encryption" rel="external nofollow" target="_blank">在线加密加密工具</a></li></ol>
<div class="jb51code"><pre class="brush:js;">import { decrypt, encryptAES } from "../../utils/util";
Page({
onLoad() {
const originalData = { id: 1, name: "exampleName" }; // 待加密的数据
console.log("加密后的数据:", encryptAES(JSON.stringify(originalData)));
console.log("解密后的数据:", JSON.parse(decrypt("KdWWnjeoE5RQQ8JN+WAWJj0rnkzvaLkRSweOoGb2cqQ=")));
},
});
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/2026011108293091.png" /></p>
<p>和在线工具加密一直</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202601/2026011108293047.png" /></p>
<p class="maodian"><a name="_label3"></a></p><h2>三、注意事项</h2>
<ol><li><p><strong>密钥和IV的管理</strong>：密钥和IV是加密解密的关键，必须妥善保管。</p></li><li><p><strong>加密模式的选择</strong>：<code>crypto-js</code>支持多种加密模式，如<code>ECB</code>、<code>CBC</code>等。每种模式都有其特点和适用场景。例如，<code>CBC</code>模式相比<code>ECB</code>模式更安全，因为它使用了初始向量（IV）来增加加密的随机性。</p></li><li><p><strong>数据的编码和解码</strong>：在加密前，需要将数据转换为适合加密的格式。通常使用<code>UTF-8</code>编码将字符串转换为字节数组。同样地，在解密后，也需要将字节数组转换回原始的字符串格式。</p></li><li><p><strong>错误处理</strong>：在使用<code>crypto-js</code>进行加密解密时，可能会遇到各种错误，如密钥不匹配、数据格式不正确等。因此，在编写代码时，应该添加适当的错误处理逻辑，以确保程序的稳定性和可靠性。</p></li><li><p>如果遇到<code>random</code>，可以重写<code>random</code>方法，示例如下：</p>
<div class="jb51code"><pre class="brush:js;">const CryptoJS = require("./crypto-js");
CryptoJS.lib.WordArray.random = function (nBytes) {
const uint8Array = new Uint8Array(nBytes);
wx.getRandomValues(uint8Array); // 使用小程序原生API生成随机数
const hexStr = Array.from(uint8Array)
.map((byte) => ("0" + (byte & 0xff).toString(16)).slice(-2))
.join("");
return CryptoJS.enc.Hex.parse(hexStr);
};
</pre></div></li></ol>
<p class="maodian"><a name="_label4"></a></p><h2>总结 </h2>
頁:
[1]