【React Native】AES+Base64加密

語言: CN / TW / HK

在移動端App開發中, AES 加密非常常用,本文主要講解如何在 React Native 中封裝自己的 AES 加密工具類及會遇到的坑。這裡的 AES 加密是基於前端常用的加密庫 crypto-js

安裝crypto-js

使用 NPM 或者 Yarn 安裝 crypto-js

# NPM
npm install crypto-js
# Yarn
yarn add crypto-js

注意:使用 crypto-js 4.0.0 及以上的版本會報找不到Crypto.js的錯,這可能是新版本的Bug,需要在 package.json 中找到 crypto-js 並把版本號指定為 ^3.3.0 (與3.3.0版本相容,相當於3.X.X, 即>=3.3.0 < 4.0.0,不改變大版本號),然後重新執行 npm install

"crypto-js": "^3.3.0",   //

建立加密工具類

新建 AESTool.js 檔案,新增如下程式碼:

import CryptoJS from 'crypto-js'

const key = CryptoJS.enc.Utf8.parse('abcdef0123456789');
const iv = CryptoJS.enc.Utf8.parse("0123456789abcdef");

export const AESTool = {

    encrypt: (message) => {
        let sendData = CryptoJS.enc.Utf8.parse(message);
        let encrypted =CryptoJS.AES.encrypt(sendData,key,{
            iv: iv,
            mode:CryptoJS.mode.CBC,
            padding:CryptoJS.pad.Pkcs7
        });
        return encrypted.toString(); //Base64字串
    },

    decrypt: (message) => {
        let decrypt = CryptoJS.AES.decrypt(message, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        return decrypt.toString(CryptoJS.enc.Utf8);
    }

}

這裡使用的是 CBC 加密模式,使用了 Pkcs7 補碼方式。需要注意的是加密方法裡傳的明文、偏移量、金鑰等引數都需要使用 CryptoJS.enc.Utf8.parse() 方法解析之後使用。

注意:這裡 CryptoJS 加密後的字串就是 Base64 編碼的,不需要重複進行Base64編碼。解密的時候也直接傳 Base64 字串即可。