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); //加密后的密码