cocosCreator 之 crypto-es数据加密

版本： 3.8.0

语言： TypeScript

环境： Mac

简介

---

项目开发中，针对于一些明文数据，比如本地存储和Http数据请求等，进行加密保护，是有必要的。

关于加密手段主要有：

• 对称加密 使用相同的密钥来加密和解密数据，常用的有AES、DES、3DES等
• 非对称加密 使用公钥加密，私钥解密，常用的有RSA、DSA等
• 哈希函数 将任意长度的数据映射为固定长度的哈希值，特点是不可逆，常用的有MD5、SHA-1、SHA-256 等
• 消息认证码(MAC) 使用密钥对消息进行加密，并附加在消息中，以确保消息的完整性和真实性 常用的有HMAC
• 数字签名 用于对数据进行签名，以验证数据的来源和完整性，常用的有 RSA、DSA等

有些时候为了数据的安全，也会使用base64的策略。

它只是一种将二进制数据转换为可打印字符的编码方式，属于编码算法而非加密算法。

该篇文章并非讲述加密算法的各种使用，主要说明内容: 在cocosCreator 3.x中对于明文数据的保护。

crypto-es

---

crypto-es 是 npm提供的用于加密和解密的包。

它提供了各种加密算法和工具，包括对称加密、哈希函数、数字签名和公钥加密等。此外，它还支持生成随机数、密码学密钥管理等。

在cocosCreator中使用crypto-es，需要npm进行下载。打开终端，进入项目目录，然后运行命令：

npm install crypto-es

需要了解更多NPM，可参考文档：NPM的使用介绍

下载成功后，crypto-es 会放到项目目录 ./node_modules中。

然后在脚本中直接引用即可。

import CryptoES from "crypto-es";

简单的示例：

const key = "encrypt";
const value = "Hello Encrypt";
console.log("加密前的数据:", value);
let value_1 = CryptoES.AES.encrypt(value, key).toString();
console.log("加密后的数据:", value_1);
let value_2 = CryptoES.AES.decrypt(value_1, key).toString(CryptoES.enc.Utf8);
console.log("解密后的数据:", value_2);

/*
加密前的数据: Hello Encrypt
加密后的数据: U2FsdGVkX1/cqGU/G7xGVONeYS4R6sRjZYkMeAmUcdQ=
解密后的数据: Hello Encrypt
*/

更多内容可参考: npm crypto-es

封装

---

在此感谢oops-framework开源框架的作者，对加密相关进行了封装。

主要文件实现在：EncryptUtil.ts

import CryptoES from "crypto-es";

export class EncryptUtil {
    private static _key: string = "";
    private static _iv: CryptoES.lib.WordArray = null;

    // 初始化加密库
    static initCrypto(key: string, iv: string) {
        this._key = key;
        this._iv = CryptoES.enc.Hex.parse(iv);
    }
    
    // MD5加密
    static md5(msg: string) {
        return CryptoES.MD5(msg).toString();
    }

    // AES加密
    static aesEncrypt(msg: string, key?: string, iv?: string): string {
        return CryptoES.AES.encrypt(
            msg,
            this._key,
            {
                iv: this._iv,
                format: this.JsonFormatter
            },
        ).toString();
    }

    // AES解密
    static aesDecrypt(str: string, key?: string, iv?: string): string {
        const decrypted = CryptoES.AES.decrypt(
            str,
            this._key,
            {
                iv: this._iv,
                format: this.JsonFormatter
            },
        );
        return decrypted.toString(CryptoES.enc.Utf8);
    }

    private static JsonFormatter = {
        stringify: function (cipherParams: any) {
            const jsonObj: any = { ct: cipherParams.ciphertext.toString(CryptoES.enc.Base64) };
            if (cipherParams.iv) {
                jsonObj.iv = cipherParams.iv.toString();
            }
            if (cipherParams.salt) {
                jsonObj.s = cipherParams.salt.toString();
            }
            return JSON.stringify(jsonObj);
        },
        parse: function (jsonStr: any) {
            const jsonObj = JSON.parse(jsonStr);
            const cipherParams = CryptoES.lib.CipherParams.create(
                { ciphertext: CryptoES.enc.Base64.parse(jsonObj.ct) },
            );
            if (jsonObj.iv) {
                cipherParams.iv = CryptoES.enc.Hex.parse(jsonObj.iv)
            }
            if (jsonObj.s) {
                cipherParams.salt = CryptoES.enc.Hex.parse(jsonObj.s)
            }
            return cipherParams;
        },
    };
}

简单的示例：

import { EncryptUtil } from './EncryptUtil';

const key = "encrypt";
const value = "Thank you oops-framework";
EncryptUtil.initCrypto("key", "vi");
console.log("加密前的数据:", value);
let value_1 = EncryptUtil.aesEncrypt(value);
console.log("加密后的数据:", value_1);
let value_2 = EncryptUtil.aesDecrypt(value_1);
console.log("解密后的数据:", value_2);

/*
加密前的数据: Thank you oops-framework
加密后的数据: 
{"ct":"Vb2dOMFJ/7LCdPVa/VnpCj9+7cF3u48FuqRGhOlexmU=","iv":"0ed38252b2cde8ee545bd527853dd6be","s":"b7368ad0d8714ec7"}
解密后的数据: Thank you oops-framework
*/

结语

---

主要参考内容：

• npm crypto-es
• oops-framework

关于oops-framework的其他内容可参考原作者博客分享：

dgflash_game 优快云

我个人也汇总了一篇关于oops的博客，可参考：

oops Framework Creator游戏开发框架

最后，祝大家学习生活愉快!