前端vue+element使用SM4國(guó)密加密解密的詳細(xì)實(shí)例

更新時(shí)間：2023年03月02日 08:49:42 作者：前端小羅

國(guó)密即國(guó)家密碼局認(rèn)定的國(guó)產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國(guó)密加密解密的相關(guān)資料,需要的朋友可以參考下

前言

由于項(xiàng)目涉及支付相關(guān)功能，因此就需要對(duì)前端的用戶輸入密碼銘文，進(jìn)行加密處理，采用的方法是SM4國(guó)密加密算法來(lái)處理，各種相關(guān)教程找了一大圈，大多數(shù)缺胳膊少腿的，最后花了點(diǎn)時(shí)間找到了處理方案。自行選擇哪一種方法均可。下面記錄一下實(shí)現(xiàn)方案，

項(xiàng)目環(huán)境：

vue2+element進(jìn)行開(kāi)發(fā)，看懂了下文，其他框架使用該功能，也是同理了。

國(guó)密擴(kuò)展了解概述

1.SM算法

國(guó)密即國(guó)家密碼局認(rèn)定的國(guó)產(chǎn)密碼算法。主要有SM1，SM2，SM3，SM4。密鑰長(zhǎng)度和分組長(zhǎng)度均為128位。

SM1 為對(duì)稱加密。其加密強(qiáng)度與AES相當(dāng)。該算法不公開(kāi)，調(diào)用該算法時(shí)，需要通過(guò)加密芯片的接口進(jìn)行調(diào)用。

SM2為非對(duì)稱加密，基于ECC。該算法已公開(kāi)。由于該算法基于ECC，故其簽名速度與秘鑰生成速度都快于RSA。ECC 256位（SM2采用的就是ECC 256位的一種）安全強(qiáng)度比RSA 2048位高，但運(yùn)算速度快于RSA。

SM3 消息摘要?？梢杂肕D5作為對(duì)比理解。該算法已公開(kāi)。校驗(yàn)結(jié)果為256位。

SM4 無(wú)線局域網(wǎng)標(biāo)準(zhǔn)的分組數(shù)據(jù)算法。對(duì)稱加密，密鑰長(zhǎng)度和分組長(zhǎng)度均為128位。

2.sm4加密有兩種模式：ecb和cbc。兩種模式的區(qū)別如下（下面文字來(lái)自百度）：

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)
              }
          });
      }
  });
},

方案二，封裝版，作為公共方法調(diào)用

將處理的函數(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兩種，也是看后端如何定義的，不過(guò)要是cbc的話下面還要加一個(gè)iv的參數(shù)，ecb不用
      iv: '1234567891011121', //iv是cbc模式的第二個(gè)參數(shù)，也需要跟后端配置的一致 iv是initialization vector的意思，就是加密的初始話矢量，初始化加密函數(shù)的變量，也叫初始向量。（本來(lái)應(yīng)該動(dòng)態(tài)生成的，由于項(xiàng)目沒(méi)有嚴(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加密傳輸開(kāi)始-----------------------
const user = 'admin'; // 用戶名
const pass = '123456'; // 密碼
// 開(kāi)始加密  用戶名密碼
const usernameSM4 = encrypt(user); //加密后的用戶名
const passwordSM4 = encrypt(pass); //加密后的密碼