0712-2888027 189-8648-0214
                                                                                    微信公眾號

                                                                                    孝感風信網絡科技有限公司微信公眾號

                                                                                    當前位置:主頁 > 技術支持 > PHP > 前端Vue中使用crypto-js對數據進行加密,后端php解密

                                                                                    前端Vue中使用crypto-js對數據進行加密,后端php解密

                                                                                    時間:2024-06-01來源:風信官網 點擊: 7381次

                                                                                    風信建站在項目開發中使用前后端分離技術,前端采用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 的默認的 "\0" 自動填充算法進行了數據加密,那 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 模式。
                                                                                    *
                                                                                    */

                                                                                    欄目列表
                                                                                    推薦內容
                                                                                    熱點內容
                                                                                    展開
                                                                                    亚洲AV秘 无码不卡一区二区,天天一本大道久久,亚洲污视频在线观看,97超碰国产精品无码