vue普通加密及国密SM2、SM3和sm4的使用例子
更新时间：2022年12月13日 14:37:25 作者：hyduan200
在我的项目中,甲方要求系统登录时对密码进行加密后再传给后端,指定使用国密SM3,下面这篇文章主要给大家介绍了关于vue普通加密及国密SM2、SM3和sm4使用的相关资料,需要的朋友可以参考下
相关网址
sm-crypto：https://www.npmjs.com/package/sm-crypto
介绍
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中用canvas实现二维码和图片合成海报的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了Vuei18n 在数组中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了axios接口管理优化操作详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue之计算属性的缓存computed的用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章要给大家介绍的是vue和drf以及第三方滑动验证码接入的实现，下文小编讲详细讲解该内容，感兴趣的小伙伴可以和小编一起来学习奥2021-10-10
这篇文章主要为大家介绍了Vue配置环境变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
在Vue3项目中需要频繁使用某一个方法,配置到全局感觉会方便很多,这篇文章主要给大家介绍了关于Vue3使用全局函数或变量的2种常用方式,需要的朋友可以参考下2023-09-09
本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本文主要介绍了vite创建一个标准vue3+ts+pinia项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家详细介绍了VUE前端cookie简单操作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论