前端vue+element使用SM4国密加密解密的详细实例

 更新时间:2023年03月02日 08:49:42   作者:前端小罗  
国密即国家密码局认定的国产密码算法,主要有SM1,SM2,SM3,SM4,下面这篇文章主要给大家介绍了关于前端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); //加密后的密码

总结

到此这篇关于前端vue+element使用SM4国密加密解密的文章就介绍到这了,更多相关vue element使用SM4加密解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中computed、methods与watch的区别总结

    Vue中computed、methods与watch的区别总结

    这篇文章主要给大家介绍了关于Vue中computed、methods与watch区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 详解如何理解vue的key属性

    详解如何理解vue的key属性

    这篇文章主要介绍了详解如何理解vue的key属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Element-UI Table组件上添加列拖拽效果实现方法

    Element-UI Table组件上添加列拖拽效果实现方法

    这篇文章主要为大家详细介绍了Element-UI Table组件上添加列拖拽效果的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • vue3开启摄像头并进行拍照的实现示例

    vue3开启摄像头并进行拍照的实现示例

    本文主要介绍了vue3开启摄像头并进行拍照的实现示例,主要是使用navigator.mediaDevices.getUserMedia这个API来实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue模板配置与webstorm代码格式规范设置

    vue模板配置与webstorm代码格式规范设置

    这篇文章主要介绍了vue模板配置与webstorm代码格式规范设置详细的相关资料,需要的朋友可以参考一下文章得具体内容,希望对你有所帮助
    2021-10-10
  • vue3项目中代码出现红色波浪线的问题及解决

    vue3项目中代码出现红色波浪线的问题及解决

    这篇文章主要介绍了vue3项目中代码出现红色波浪线的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue实现通知或详情类弹窗

    Vue实现通知或详情类弹窗

    这篇文章主要为大家详细介绍了Vue实现通知或详情类弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vertx基于EventBus发送接受自定义对象

    Vertx基于EventBus发送接受自定义对象

    这篇文章主要介绍了Vertx基于EventBus发送接受自定义对象,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • Vue内存泄漏的识别和解决方案

    Vue内存泄漏的识别和解决方案

    Vue是人气爆棚且地表最强的JS(JavaScript)框架,祂允许我们构建动态交互式的Web App,然但是,和任何软件雷同,Vue App偶尔会遭遇内存泄漏,导致性能暴跌和意外行为,今天,我们将深入Vue App内存泄漏的原因,并探讨识别和修复这些问题的锦囊妙计
    2023-11-11
  • vue实现登录验证码

    vue实现登录验证码

    这篇文章主要为大家详细介绍了vue实现登录验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论