uniapp中如何使用CryptoJS实现AES加密解密功能？

Question

在UniApp项目中使用CryptoJS实现AES加密解密时，常见的问题是：如何正确配置CryptoJS库并避免加密解密结果不一致？部分开发者可能直接引入CryptoJS却忽略了字符编码或密钥长度的问题，导致加密后在服务端无法正确解密。例如，未统一使用UTF-8编码或IV向量设置不一致，都会引发错误。解决方法是确保前端和服务端的加密配置完全同步，包括模式（如CBC）、填充方式（如PKCS7）以及正确的Key和IV格式。同时，需将CryptoJS通过npm安装或手动引入，并测试兼容性以防止打包后功能失效。

Answer 1

如何在 UniApp 中使用 CryptoJS 实现 AES 加密解密

为了在 UniApp 项目中正确配置 CryptoJS 库以实现 AES 的加密和解密功能，需注意以下几个方面：

1. 引入 CryptoJS

首先需要确保在 UniApp 项目中成功引入 CryptoJS。可以通过 npm 或者直接下载文件的方式引入。

通过 npm 方式安装：

npm install crypto-js

然后在代码中引入：

import CryptoJS from 'crypto-js';

如果选择手动引入，则可以将 crypto-js 文件放入项目的静态资源目录下，并通过 script 标签加载。

---

2. AES CBC 模式的加密

CBC 模式下的加密需要提供一个初始化向量 (IV) 和密钥 (Key)，两者都应满足特定的长度要求（通常为 16 字节）。以下是一个基于 CBC 模式的加密示例：

function encrypt(data, key, iv) {
    const parsedKey = CryptoJS.enc.Utf8.parse(key);
    const parsedIv = CryptoJS.enc.Utf8.parse(iv);

    const encrypted = CryptoJS.AES.encrypt(
        data,
        parsedKey,
        {
            iv: parsedIv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }
    );

    return encrypted.toString(); // 返回 Base64 编码的结果
}

此函数接受三个参数：待加密的数据 (data)、密钥 (key) 和 IV 向量 (iv)。其中，parsedKey 和 parsedIv 是通过 CryptoJS.enc.Utf8.parse() 方法解析成字节数组的形式。

---

3. AES CBC 模式的解密

解密的过程与加密类似，同样需要提供相同的 Key 和 IV 来还原原始数据：

function decrypt(encryptedData, key, iv) {
    const parsedKey = CryptoJS.enc.Utf8.parse(key);
    const parsedIv = CryptoJS.enc.Utf8.parse(iv);

    const decrypted = CryptoJS.AES.decrypt(
        encryptedData,
        parsedKey,
        {
            iv: parsedIv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }
    );

    return decrypted.toString(CryptoJS.enc.Utf8); // 将解密后的数据转回 UTF-8 字符串
}

在此过程中，decrypted.toString(CryptoJS.enc.Utf8) 将解密后的 WordArray 转换为可读的字符串形式。

---

4. UTF-8 编码处理

由于 JavaScript 默认使用的编码是 UTF-16，而许多服务端框架默认支持的是 UTF-8，因此需要注意输入和输出的字符集一致性。CryptoJS.enc.Utf8.parse() 可用于将字符串转换为 UTF-8 编码的字节数组，从而避免潜在的编码问题。

---

5. 前后端同步注意事项

当前端与服务端进行通信时，双方必须保持一致的加密算法、模式、填充方式以及密钥/IV 配置。例如，在 Java 环境中常用的 "AES/CBC/PKCS5Padding" 模式可以在前端通过如下设置匹配：

{
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
}

此外，Java 中可能使用 Bouncy Castle 提供商来实例化 Cipher 对象，而在 Node.js 中则可通过 createCipheriv 方法完成类似的配置。

---

6. 打包兼容性问题

在 UniApp 打包后运行环境中可能会遇到一些兼容性问题，特别是某些 Web 平台对全局变量的支持有限。建议始终通过模块化导入的方式来使用依赖库，而非依赖全局变量。另外，对于 HBuilderX 工具中的调试环境，也可以尝试调整构建选项以优化性能。

---

示例代码总结

完整的加密解密流程如下所示：

// 密钥和初始向量
const key = "1234567890abcdef";
const iv = "abcdef1234567890";

// 待加密数据
const originalText = "Hello, this is a secret message!";

// 加密
const encryptedText = encrypt(originalText, key, iv);
console.log("Encrypted:", encryptedText);

// 解密
const decryptedText = decrypt(encryptedText, key, iv);
console.log("Decrypted:", decryptedText);

/**
 * 加密函数
 */
function encrypt(data, key, iv) {
    const parsedKey = CryptoJS.enc.Utf8.parse(key);
    const parsedIv = CryptoJS.enc.Utf8.parse(iv);

    const encrypted = CryptoJS.AES.encrypt(
        data,
        parsedKey,
        {
            iv: parsedIv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }
    );
    return encrypted.toString();
}

/**
 * 解密函数
 */
function decrypt(encryptedData, key, iv) {
    const parsedKey = CryptoJS.enc.Utf8.parse(key);
    const parsedIv = CryptoJS.enc.Utf8.parse(iv);

    const decrypted = CryptoJS.AES.decrypt(
        encryptedData,
        parsedKey,
        {
            iv: parsedIv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }
    );
    return decrypted.toString(CryptoJS.enc.Utf8);
}

---