vue+elementui（前端vue+element使用SM4国密加密解密）

由于项目涉及支付相关功能    
    
    
，因此就需要对前端的用户输入密码铭文    


     


     


   ，进行加密处理




 




 




 

，采用的方法是SM4国密加密算法来处理   

   

   

，各种相关教程找了一大圈     

     

     

  ，大多数缺胳膊少腿的




  




  




  
，最后花了点时间找到了处理方案   
    
    
   。自行选择哪一种方法均可


     


     


     

。下面记录一下实现方案
  


  


  


，

项目环境： vue2+element进行开发     
     
     
 ，看懂了下文 




   




   




   ，其他框架使用该功能

 



 



 



，也是同理了 




 




 




。

国密扩展了解概述

1.SM算法

国密即国家密码局认定的国产密码算法   

   

   

  。主要有SM1               ，SM2  




    




    




    ，SM3
















，SM4

     

     

     
。密钥长度和分组长度均为128位
  




  




  




。

SM1 为对称加密  


  


  


 。其加密强度与AES相当 
     
     
     。该算法不公开               ，调用该算法时   



     



     



    ，需要通过加密芯片的接口进行调用

   




   




   




。

SM2为非对称加密
















，基于ECC 



 



 



。该算法已公开                 。由于该算法基于ECC    
    
    
，故其签名速度与秘钥生成速度都快于RSA


    




    




    



。ECC 256位（SM2采用的就是ECC 256位的一种）安全强度比RSA 2048位高    


     


     


   ，但运算速度快于RSA














。

SM3 消息摘要                 。可以用MD5作为对比理解


     



     



     


。该算法已公开














。校验结果为256位   
    
    
   。

SM4 无线局域网标准的分组数据算法


     


     


     

。对称加密




 




 




 

，密钥长度和分组长度均为128位 




 




 




。

2.sm4加密有两种模式：ecb和cbc   

   

   

  。两种模式的区别如下（下面文字来自百度）：

ECB：是一种基础的加密方式   

   

   

，密文被分割成分组长度相等的块（不足补齐）     

     

     

  ，然后单独一个个加密




  




  




  
，一个个输出组成密文

     

     

     
。

CBC：是一种循环模式（链式）
  


  


  


，前一个分组的密文和当前分组的明文操作后再加密     
     
     
 ，这样做的目的是增强破解难度
  




  




  




。（不容易主动攻击 




   




   




   ，安全性好于ECB

 



 



 



，是SSL   
    
    
   、IPSec的标准）

一


     


     


     

、优bai点不同:

ECB模式：1 




 




 




、简单；2   

   

   

  、有利于并行计算；3

     

     

     
、误差不会bai被传送；

CBC模式：1
  




  




  




、不容易主动攻击,安全性好于baiECB,适合传输长度长的报文,是SSL  


  


  


 、IPSec的标准  


  


  


 。

二 
     
     
     、缺点不同:

ECB模式：1

   




   




   




、不能隐藏明文的模式；2 



 



 



、可能对明文进行主动攻击；

CBC模式：1                 、不利于并行计算；2


    




    




    



、误差传递；3














、需要初始化向量IV

方案一               ，代码直接使用

1                 、安装加密gm-crypt依赖

npm install gm-crypt

2


     



     



     


、在表单提交方法内  




    




    




    ，直接添加下面提供的代码
















，适合使用次数频率少的情况下使用 
     
     
     。

代码例子： checkPassword() { this.$refs.formPass.validate(valid => { if (valid) { // 引用sm4包进行加密 const SM4 = require("gm-crypt").sm4; let sm4Config = { //配置sm4参数 key: "GJwsXX_BzW=gJWJW", //这里这个key值要与后端的一致               ，后端解密是根据这个key mode: "cbc", // 加密的方式有两种   



     



     



    ，ecb和cbc两种
















，这里使用的是cbc    
    
    
，cbc模式还要加一个iv的参数    


     


     


   ，ecb不用 iv: "ZkR_SiNoSOFT=568", //iv是cbc模式的第二个参数




 




 




 

，也需要跟后端配置的一致 cipherType: "base64" // }; let sm4 = new SM4(sm4Config); //new一个sm4函数   

   

   

，将上面的sm4Config作为参数传递进去

   




   




   




。 accountCenterService.checkVerificationCode({ newPassword: sm4.encrypt(this.formPass.newPassword) //加密处理明文密码 }).then(res => { if (res.code === STATUSCODE.code01) { this.dialogVisible = false; }else{ this.$message.error(res.msg) } }); } }); },

方案二     

     

     

  ，封装版




  




  




  
，作为公共方法调用

将处理的函数代码封装
  


  


  


，然后把加密和解密的方法导出去     
     
     
 ，作为公共方法调用 




   




   




   ，方便多处使用

 



 



 



，然后在代码中引入调用即可 



 



 



。便于维护后后期使用                 。

1














、同样也是先安装加密gm-crypt依赖 npm install gm-crypt

2   
    
    
   、在项目的utils目录下               ，新建一个sm4Util.js作为公共文件使用  




    




    




    ，

const SM4 = require("gm-crypt").sm4; const pwdKey = "GJstSK_YBD=gSOFT"; //"GJstSK_YBD=gSOFT"; 密钥 前后端一致即可,后端提供 let sm4Config = { key: pwdKey, //这里这个key值要与后端的一致
















，后端解密是根据这个key mode: "ecb", // 加密的方式有两种               ，ecb和cbc两种   



     



     



    ，也是看后端如何定义的
















，不过要是cbc的话下面还要加一个iv的参数    
    
    
，ecb不用 iv: 1234567891011121, //iv是cbc模式的第二个参数    


     


     


   ，也需要跟后端配置的一致 iv是initialization vector的意思




 




 




 

，就是加密的初始话矢量   

   

   

，初始化加密函数的变量     

     

     

  ，也叫初始向量


    




    




    



。（本来应该动态生成的




  




  




  
，由于项目没有严格的加密要求
  


  


  


，直接写死一个） cipherType: "base64" }; const sm4Util = new SM4(sm4Config); // new一个sm4函数     
     
     
 ，将上面的sm4Config作为参数传递进去














。 /* * 加密工具函数 * @param {String} text 待加密文本 */ export function encrypt(text) { return sm4Util.encrypt(text, pwdKey); } /* * 解密工具函数 * @param {String} text 待解密密文 */ export function decrypt(text) { return sm4Util.decrypt(text, pwdKey); }

3


     


     


     

、引入sm4Util.js

import {encrypt,decrypt} from "./sm4Util.js" //引入sm4.js 相对路径

4 




 




 




、在组件中调用对应的方法 




   




   




   ，将需要进行加密的数据

 



 



 



，放入加密方法处理               ，

例子： // SM4加密传输开始----------------------- const user = admin; // 用户名 const pass = 123456; // 密码 // 开始加密 用户名密码 const usernameSM4 = encrypt(user); //加密后的用户名 const passwordSM4 = encrypt(pass); //加密后的密码