您好,登錄后才能下訂單哦!
這篇文章主要講解了“前端vue+element使用SM4國(guó)密加密解密的方法是什么”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“前端vue+element使用SM4國(guó)密加密解密的方法是什么”吧!
vue2+element進(jìn)行開發(fā),看懂了下文,其他框架使用該功能,也是同理了。
國(guó)密即國(guó)家密碼局認(rèn)定的國(guó)產(chǎn)密碼算法。主要有SM1,SM2,SM3,SM4。密鑰長(zhǎng)度和分組長(zhǎng)度均為128位。
SM1 為對(duì)稱加密。其加密強(qiáng)度與AES相當(dāng)。該算法不公開,調(diào)用該算法時(shí),需要通過加密芯片的接口進(jìn)行調(diào)用。
SM2為非對(duì)稱加密,基于ECC。該算法已公開。由于該算法基于ECC,故其簽名速度與秘鑰生成速度都快于RSA。ECC 256位(SM2采用的就是ECC 256位的一種)安全強(qiáng)度比RSA 2048位高,但運(yùn)算速度快于RSA。
SM3 消息摘要??梢杂肕D5作為對(duì)比理解。該算法已公開。校驗(yàn)結(jié)果為256位。
SM4 無線局域網(wǎng)標(biāo)準(zhǔn)的分組數(shù)據(jù)算法。對(duì)稱加密,密鑰長(zhǎng)度和分組長(zhǎng)度均為128位。
ECB:是一種基礎(chǔ)的加密方式,密文被分割成分組長(zhǎng)度相等的塊(不足補(bǔ)齊),然后單獨(dú)一個(gè)個(gè)加密,一個(gè)個(gè)輸出組成密文。
CBC:是一種循環(huán)模式(鏈?zhǔn)剑?,前一個(gè)分組的密文和當(dāng)前分組的明文操作后再加密,這樣做的目的是增強(qiáng)破解難度。(不容易主動(dòng)攻擊,安全性好于ECB,是SSL、IPSec的標(biāo)準(zhǔn))
一、優(yōu)bai點(diǎn)不同:
ECB模式:1、簡(jiǎn)單;2、有利于并行計(jì)算;3、誤差不會(huì)bai被傳送;
CBC模式:1、不容易主動(dòng)攻擊,安全性好于baiECB,適合傳輸長(zhǎng)度長(zhǎng)的報(bào)文,是SSL、IPSec的標(biāo)準(zhǔn)。
二、缺點(diǎn)不同:
ECB模式:1、不能隱藏明文的模式;2、可能對(duì)明文進(jìn)行主動(dòng)攻擊;
CBC模式:1、不利于并行計(jì)算;2、誤差傳遞;3、需要初始化向量IV
1、安裝加密gm-crypt依賴
npm install gm-crypt
2、在表單提交方法內(nèi),直接添加下面提供的代碼,適合使用次數(shù)頻率少的情況下使用。
代碼例子:
checkPassword() { this.$refs.formPass.validate(valid => { if (valid) { // 引用sm4包進(jìn)行加密 const SM4 = require("gm-crypt").sm4; let sm4Config = { //配置sm4參數(shù) key: "GJwsXX_BzW=gJWJW", //這里這個(gè)key值要與后端的一致,后端解密是根據(jù)這個(gè)key mode: "cbc", // 加密的方式有兩種,ecb和cbc兩種,這里使用的是cbc,cbc模式還要加一個(gè)iv的參數(shù),ecb不用 iv: "ZkR_SiNoSOFT=568", //iv是cbc模式的第二個(gè)參數(shù),也需要跟后端配置的一致 cipherType: "base64" // }; let sm4 = new SM4(sm4Config); //new一個(gè)sm4函數(shù),將上面的sm4Config作為參數(shù)傳遞進(jìn)去。 accountCenterService.checkVerificationCode({ newPassword: sm4.encrypt(this.formPass.newPassword) //加密處理明文密碼 }).then(res => { if (res.code === STATUSCODE.code01) { this.dialogVisible = false; }else{ this.$message.error(res.msg) } }); } }); },
將處理的函數(shù)代碼封裝,然后把加密和解密的方法導(dǎo)出去,作為公共方法調(diào)用,方便多處使用,然后在代碼中引入調(diào)用即可。便于維護(hù)后后期使用。
1、同樣也是先安裝加密gm-crypt依賴
npm install gm-crypt
2、在項(xiàng)目的utils目錄下,新建一個(gè)sm4Util.js作為公共文件使用,
const SM4 = require("gm-crypt").sm4; const pwdKey = "GJstSK_YBD=gSOFT"; //"GJstSK_YBD=gSOFT"; 密鑰 前后端一致即可,后端提供 let sm4Config = { key: pwdKey, //這里這個(gè)key值要與后端的一致,后端解密是根據(jù)這個(gè)key mode: "ecb", // 加密的方式有兩種,ecb和cbc兩種,也是看后端如何定義的,不過要是cbc的話下面還要加一個(gè)iv的參數(shù),ecb不用 iv: '1234567891011121', //iv是cbc模式的第二個(gè)參數(shù),也需要跟后端配置的一致 iv是initialization vector的意思,就是加密的初始話矢量,初始化加密函數(shù)的變量,也叫初始向量。(本來應(yīng)該動(dòng)態(tài)生成的,由于項(xiàng)目沒有嚴(yán)格的加密要求,直接寫死一個(gè)) cipherType: "base64" }; const sm4Util = new SM4(sm4Config); // new一個(gè)sm4函數(shù),將上面的sm4Config作為參數(shù)傳遞進(jìn)去。 /* * 加密工具函數(shù) * @param {String} text 待加密文本 */ export function encrypt(text) { return sm4Util.encrypt(text, pwdKey); } /* * 解密工具函數(shù) * @param {String} text 待解密密文 */ export function decrypt(text) { return sm4Util.decrypt(text, pwdKey); }
3、引入sm4Util.js
import {encrypt,decrypt} from "./sm4Util.js" //引入sm4.js 相對(duì)路徑
4、在組件中調(diào)用對(duì)應(yīng)的方法,將需要進(jìn)行加密的數(shù)據(jù),放入加密方法處理,
例子:
// SM4加密傳輸開始----------------------- const user = 'admin'; // 用戶名 const pass = '123456'; // 密碼 // 開始加密 用戶名密碼 const usernameSM4 = encrypt(user); //加密后的用戶名 const passwordSM4 = encrypt(pass); //加密后的密碼
感謝各位的閱讀,以上就是“前端vue+element使用SM4國(guó)密加密解密的方法是什么”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)前端vue+element使用SM4國(guó)密加密解密的方法是什么這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。