使用前后端分离技术，前端采用Vue，后端使用php，在开发过程中因某些数据需要进行加密与解密，我们采用前端插件crypto-js应用于项目中。
安装crypto-js
npm install crypto-js
在Vue项目中编写前端加密工具类/tools/crypto.js
/*
* crypto.js
**/
// npm install crypto-js
/**
* AES 对称加密（不安全）
*/
let CryptoJS = require('crypto-js');
export default {
/**
* 接口数据加密函数
* @param str string 需加密的json字符串
* @param key string 加密key(16位)
* @param iv string 加密向量(16位)
* @return string 加密密文字符串
*/
encrypt(str, key, iv) {
//密钥16位
var key = CryptoJS.enc.Utf8.parse(key);
//加密向量16位
var iv = CryptoJS.enc.Utf8.parse(iv);
var encrypted = CryptoJS.AES.encrypt(str, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
},
/**
* 接口数据解密函数
* @param str string 已加密密文
* @param key string 加密key(16位)
* @param iv string 加密向量(16位)
* @returns {*|string} 解密之后的json字符串
*/
decrypt(str, KEY, IV) {
var key = CryptoJS.enc.Utf8.parse(KEY);
var iv = CryptoJS.enc.Utf8.parse(IV);
var decrypt = CryptoJS.AES.decrypt(str, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return decrypt.toString(CryptoJS.enc.Utf8);
}
}
在Vue页面中使用
import crypto from '@/tools/crypto.js';
//获取当前时间戳13位 + 3位字符
var timestamp = new Date().getTime().toString() + "ithov.net";//密码
//加密密钥16位
// var encrypt_key = timestamp;
var encrypt_key = '1234567890123456';//长度必须为16位
console.log(encrypt_key);
//加密向量16位
var iv = '1234567890abcde';
//要加密的数据
var encrypt_string = '{"username":"888","password":"123456","terminal":"PC"}';
var encrypted_string = crypto.encrypt(encrypt_string, encrypt_key, iv);
console.log(encrypted_string);
// 解密
try{
var decrypted_string = crypto.decrypt(encrypted_string, encrypt_key, iv);
console.log(decrypted_string);//{"username":"1001","password":"123456","terminal":"PC"}
}catch(exception){//密码错误
console.log(exception.message);//Malformed UTF-8 data
}
PHP后端的使用
/**
* 加密
*/
public function encode(){
//加密向量16位
$iv = "1234567890abcde";
//PHP加密秘钥16位
$encrypt_key = date("YmdHis") . "WB";
//$encrypt_key = '1234567890123456';//长度必须为16位 //前后端密码必须一直
//PHP加密数据
$arr = array('username' => '1001', 'password' => '12345678', 'terminal' => 'PC');
//转换成json字符串
$encrypt_data = json_encode($arr);
$encrypted = $this->encrypt($encrypt_data, $encrypt_key, $iv);
//加密结果
var_dump($encrypted);
}
/*
* 解密
*/
public function decode(){
$encrypt_data = 'StaJnWWpHJ7Gx0lDTPKCT4s4Jg3s8wunBVBdMJlKvJqAVd/F3zQ7lOfyV8pdvgmGlkusv0tkoSEhw+/6U6vEkg=='; //加密的字符串
$encrypt_key = '1234567890123456';
$iv = "1234567890abcde";
//$decode = $this->decrypt($encrypt_data,$encrypt_key,$iv);
$decode = $this->decryptToJs($encrypt_data,$encrypt_key,$iv);
var_dump($decode);
}
/**
* 加密字符串
* @param string $data 字符串
* @param string $key 加密key
* @param string $iv 加密向量
* @return string
*/
public function encrypt($data, $key, $iv)
{
return base64_encode(openssl_encrypt($data, "AES-128-CBC", $key, true, $iv));
}
/**
* 解密字符串
* @param string $data 字符串
* @param string $key 加密key
* @param string $iv 加密向量
* @return false|object|string
*/
public function decrypt($data, $key, $iv)
{
return openssl_decrypt( $data, 'AES-128-CBC', $key, 0 , $iv );
}
/**
* 解密字符串 兼容crypto-js 如果是通过crypto-js加密 options:2
* @param string $data 字符串
* @param string $key 加密key
* @param string $iv 加密向量
* @return false|object|string
*/
public function decryptToJs($data, $key, $iv)
{
return openssl_decrypt( $data, 'AES-128-CBC', $key, 2 , $iv );
}
/**
* options 参数极为重要，它是兼容 mcrpty 算法的关键：
options = 0: 默认模式，自动对明文进行 pkcs7 padding，且数据做 base64 编码处理。
options = 1: OPENSSL_RAW_DATA，自动对明文进行 pkcs7 padding， 且数据未经 base64 编码处理。
options = 2: OPENSSL_ZERO_PADDING，要求待加密的数据长度已按 "0" 填充与加密算法数据块长度对齐，即同 mcrpty 默认填充的方式一致，且对数据做 base64 编码处理。注意，此模式下 openssl 要求待加密数据已按 "0" 填充好，其并不会自动帮你填充数据，如果未填充对齐，则会报错。
故可以得出 mcrpty簇 与 openssl簇 的兼容条件如下：
1、如果 A 系统使用了 mcrypt 的默认的 " " 自动填充算法进行了数据加密，那 B 系统使用 openssl 进行解密时，需要选择 OPENSSL_ZERO_PADDING 模式。这里同时要特别注意，OPENSSL_ZERO_PADDING 模式是认为数据是做了 base64 编码处理的，如果 A 系统 mcrpty 没有对数据做 base64_encode 处理，则 B 解密数据时还需要将数据 base64_encode 后再传递给 openssl_decrypt。
2、如果 A 系统手动使用了 PKCS7 对待加密数据做了处理，那 B 系统只需根据 A 系统是否对数据做了 base64 编码处理选择 0或 OPENSSL_ZERO_PADDING 模式即可。如果对 A 使用了 base64 编码，则 B 使用 0 模式；如果 A 没有使用 base64 编码，则使用 OPENSSL_RAW_DATA 模式。
*
*/