vue普通加密及國密SM2、SM3和sm4的使用例子
相關(guān)網(wǎng)址
sm-crypto：https://www.npmjs.com/package/sm-crypto
介紹
1. SM2是非對稱加密算法
它是基于橢圓曲線密碼的公鑰密碼算法標(biāo)準(zhǔn)，其秘鑰長度256bit，包含數(shù)字簽名、密鑰交換和公鑰加密，用于替換RSA/DH/ECDSA/ECDH等國際算法?？梢詽M足電子認(rèn)證服務(wù)系統(tǒng)等應(yīng)用需求，由國家密碼管理局于2010年12月17號發(fā)布。
2.SM3是一種密碼雜湊算法
用于替代MD5/SHA-1/SHA-2等國際算法，適用于數(shù)字簽名和驗證、消息認(rèn)證碼的生成與驗證以及隨機(jī)數(shù)的生成，可以滿足電子認(rèn)證服務(wù)系統(tǒng)等應(yīng)用需求，于2010年12月17日發(fā)布。它是在SHA-256基礎(chǔ)上改進(jìn)實現(xiàn)的一種算法，采用Merkle-Damgard結(jié)構(gòu)，消息分組長度為512bit，輸出的摘要值長度為256bit。
3.SM4是一種分組密碼算法
SM4算法是一種分組密碼算法。其分組長度為128bit，密鑰長度也為128bit。加密算法與密鑰擴(kuò)展算法均采用32輪非線性迭代結(jié)構(gòu)，以字（32位）為單位進(jìn)行加密運算，每一次迭代運算均為一輪變換函數(shù)F。SM4算法加/解密算法的結(jié)構(gòu)相同，只是使用輪密鑰相反，其中解密輪密鑰是加密輪密鑰的逆序
普通加密
安裝依賴
npm install crypto-js
新建utils/Crypto.js文件
/*
*密碼加密工具
*/
import CryptoJS from 'crypto-js'
// 默認(rèn)的 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，默認(rèn)為1
const publicKey = "秘鑰" // 一般由后端定義
let encryptData = sm2.doEncrypt(txt, publicKey, cipherMode ) // 加密結(jié)果
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) // 加密結(jié)果
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) // 加密結(jié)果
return encryptData
}
使用—加密
import {encrypt} from '@/util/Crypto.js'
let password = '1234'
password = encrypt(password)
總結(jié)
到此這篇關(guān)于vue普通加密及國密SM2、SM3和sm4使用的文章就介紹到這了,更多相關(guān)vue普通加密及國密使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼
這篇文章主要介紹了vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)，文中我們使用v-model加watch 實現(xiàn)這一個功能,代碼簡單易懂，需要的朋友可以參考下2019-11-11
vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案
這篇文章主要介紹了vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題,輸入框要掉兩個接口，根據(jù)第一個驗證接口返回的code，彈不同的框，點擊彈框確認(rèn)再掉第二個接口，需要的朋友可以參考下2022-12-12
詳解gantt甘特圖可拖拽、編輯(vue、react都可用?highcharts)
去年我遇到了一個甘特圖的需求，做了很多工作，最終還是不完美，今天使用一個新包，給大家重新學(xué)習(xí)下vue?甘特圖gantt的相關(guān)知識，感興趣的朋友一起看看吧2021-11-11
Vue+Echarts實現(xiàn)分時圖和交易量圖的繪制
近來發(fā)現(xiàn)Echarts?API越發(fā)的強(qiáng)大，對于繪制各類圖形可以使用Echarts實現(xiàn)。本文將利用Echarts實現(xiàn)分時圖和交易量圖的繪制，希望對大家有所幫助2023-03-03
本篇文章主要介紹了vue-resource 攔截器使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在使用Vite和WebStorm時,如果`vite.config.ts`已經(jīng)配置了路徑別名`@`,但WebStorm無法識別,可以通過在項目根目錄下創(chuàng)建`tsconfig.json`文件,并添加`baseUrl`和`paths`配置來解決,這樣不僅可以讓TypeScript正確解析路徑別名,也能讓W(xué)ebStorm識別這些路徑2026-01-01
vue使用ajax獲取后臺數(shù)據(jù)進(jìn)行顯示的示例
今天小編就為大家分享一篇vue使用ajax獲取后臺數(shù)據(jù)進(jìn)行顯示的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了Vue3源碼解讀靜態(tài)提升示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了如何本地運行vue?dist文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05