vue普通加密及国密SM2、SM3和sm4的使用例子

更新时间：2022年12月13日 14:37:25 作者：hyduan200

在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,下面这篇文章主要给大家介绍了关于vue普通加密及国密SM2、SM3和sm4使用的相关资料,需要的朋友可以参考下

介绍

1. SM2是非对称加密算法

它是基于椭圆曲线密码的公钥密码算法标准，其秘钥长度256bit，包含数字签名、密钥交换和公钥加密，用于替换RSA/DH/ECDSA/ECDH等国际算法。可以满足电子认证服务系统等应用需求，由国家密码管理局于2010年12月17号发布。

2.SM3是一种密码杂凑算法

用于替代MD5/SHA-1/SHA-2等国际算法，适用于数字签名和验证、消息认证码的生成与验证以及随机数的生成，可以满足电子认证服务系统等应用需求，于2010年12月17日发布。它是在SHA-256基础上改进实现的一种算法，采用Merkle-Damgard结构，消息分组长度为512bit，输出的摘要值长度为256bit。

3.SM4是一种分组密码算法

SM4算法是一种分组密码算法。其分组长度为128bit，密钥长度也为128bit。加密算法与密钥扩展算法均采用32轮非线性迭代结构，以字（32位）为单位进行加密运算，每一次迭代运算均为一轮变换函数F。SM4算法加/解密算法的结构相同，只是使用轮密钥相反，其中解密轮密钥是加密轮密钥的逆序

普通加密

安装依赖

npm install crypto-js

新建utils/Crypto.js文件

/*
*密码加密工具
*/
import CryptoJS from 'crypto-js'
// 默认的 KEY 与 iv 如果没有给
const KEY = CryptoJS.enc.Utf8.parse("12345678901234567890");
const IV = CryptoJS.enc.Utf8.parse('12345678901234567890');
/**
 * AES加密 ：字符串 key iv  返回base64
 */
export const Encrypt = (word, keyStr, ivStr) => {
    let key = KEY;
    let iv = IV;
    if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }
    let srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}
/**
 * AES 解密 ：字符串 key iv  返回base64
 *
 * @return {string}
 */
export const Decrypt = (word, keyStr, ivStr) => {
    let key  = KEY;
    let iv = IV;
    if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
    }
    let base64 = CryptoJS.enc.Base64.parse(word);
    let src = CryptoJS.enc.Base64.stringify(base64);
    let decrypt = CryptoJS.AES.decrypt(src, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
    });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}
/**
 * 二次拼接：加密前解密后对密码二次处理，增加字符串常量
 *
 * @return {string}
 */
 export const passwordAddStr = 'testAdd'

使用—加密

import {Encrypt, passwordAddStr} from '@/util/Crypto.js'

let password = '123123qwe' + passwordAddStr
password = Encrypt(password)

使用—解密

import {Decrypt, passwordAddStr} from '@/util/Crypto.js'
let password
password = Decrypt(password).replace(passwordAddStr, '')

SM2使用

安装依赖

npm install sm-crypto

新建utils/Crypto.js文件

/**
 * txt：要加密的字段
 *
 * @return {string}
 */
const sm2 = require('sm-crypto').sm2
export const  encrypt = (txt) => {
    const cipherMode = 1 ;// 1 - C1C3C2，0 - C1C2C3，默认为1
    const publicKey = "秘钥" // 一般由后端定义
    let encryptData = sm2.doEncrypt(txt, publicKey, cipherMode ) // 加密结果
    return '04' + encryptData
}

使用—加密

import {encrypt} from '@/util/Crypto.js'

let password = '1234'
password = encrypt(password)

使用—解密

由后端解密

SM3使用

安装依赖

npm install sm-crypto

新建utils/Crypto.js文件

/**
 * txt：要加密的字段
 *
 * @return {string}
 */
const sm3 = require('sm-crypto').sm3
export const  encrypt = (txt) => {
  let encryptData = sm3(txt) // 加密结果
  return encryptData
}

使用—加密

import {encrypt} from '@/util/Crypto.js'

let password = '1234'
password = encrypt(password)

使用—解密

不可解密

sm4使用

安装依赖

npm install sm-crypto

新建utils/Crypto.js文件

/**
 * txt：要加密的字段
 * key:秘钥
 *
 * @return {string}
 */
const sm4 = require('sm-crypto').sm4
export const  encrypt = (txt, key) => {
  let encryptData = sm4.encrypt(txt, key) // 加密结果
  return encryptData
}

使用—加密

import {encrypt} from '@/util/Crypto.js'

let password = '1234'
password = encrypt(password)

总结

到此这篇关于vue普通加密及国密SM2、SM3和sm4使用的文章就介绍到这了,更多相关vue普通加密及国密使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue + springboot 实现国密SM2加密

vue限制输入框只能输入8位整数和2位小数的代码
这篇文章主要介绍了vue限制输入框只能输入8位整数和2位小数，文中我们使用v-model加watch 实现这一个功能,代码简单易懂，需要的朋友可以参考下
2019-11-11
vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案
这篇文章主要介绍了vue项目element UI input框扫码枪扫描过快出现数据丢失问题,输入框要掉两个接口，根据第一个验证接口返回的code，弹不同的框，点击弹框确认再掉第二个接口，需要的朋友可以参考下
2022-12-12
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
去年我遇到了一个甘特图的需求，做了很多工作，最终还是不完美，今天使用一个新包，给大家重新学习下vue 甘特图gantt的相关知识，感兴趣的朋友一起看看吧
2021-11-11
Vue+Echarts实现分时图和交易量图的绘制
近来发现Echarts API越发的强大，对于绘制各类图形可以使用Echarts实现。本文将利用Echarts实现分时图和交易量图的绘制，希望对大家有所帮助
2023-03-03
vue-resource 拦截器使用详解
本篇文章主要介绍了vue-resource 拦截器使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
使用el-checkbox-group选中后值为true和false遇到的坑
这篇文章主要介绍了使用el-checkbox-group选中后值为true和false遇到的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
webstorm问题解决:无法识别@处理方案
在使用Vite和WebStorm时,如果`vite.config.ts`已经配置了路径别名`@`,但WebStorm无法识别,可以通过在项目根目录下创建`tsconfig.json`文件,并添加`baseUrl`和`paths`配置来解决,这样不仅可以让TypeScript正确解析路径别名,也能让WebStorm识别这些路径
2026-01-01
vue使用ajax获取后台数据进行显示的示例
今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue3 源码解读静态提升详解
这篇文章主要为大家介绍了Vue3源码解读静态提升示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
如何本地运行vue dist文件
这篇文章主要介绍了如何本地运行vue dist文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05