詳解JavaScript前端加解密工具庫(kù)的使用
bcryptjs 加密
僅支持加密和比對(duì)密碼,不支持解密
安裝
通過 npm 安裝:npm install bcryptjs
功能
功能:字符串加密,已加密的字符串不可破解,僅可與原始密碼進(jìn)行比對(duì)。
優(yōu)點(diǎn):加密后的字符串無法解密。
缺點(diǎn):已加密的字符串無法解密。
應(yīng)用領(lǐng)域:敏感信息加密,如登錄密碼。
npm 地址:npm - www.npmjs.com/package/bcryptjs
備注
bcryptjs 是一個(gè)用于加密和解密字符串的庫(kù),僅支持加密和比對(duì)密碼,不支持解密。加密后的字符串無法被解密,只能與原始密碼進(jìn)行比對(duì)。因此,bcryptjs 適用于對(duì)敏感信息進(jìn)行加密,如登錄密碼等。
示例
定義工具類bcrypt.js
import bcryptjs from 'bcryptjs'//不可逆加密 bcryptjs /** * 不可逆加密 ,一旦加密不可解密,只可比對(duì) * @param {String} txt 加密、比對(duì)的文本 * @param {String} hash 加密的哈希 * @param {String} type default:jia, [jia 加密 ,bi 比對(duì)密碼] 操作類型 * @returns {[String|Boolear]} 返回值 */ const cyj = (txt, hash, type = 'jia') => { let res = null // 比對(duì) if (type === 'bi') { if (!txt || !hash) { throw '解密參數(shù)錯(cuò)誤或缺少參數(shù)' } res = bcryptjs.compareSync(txt, hash) } else { if (!txt) { throw '加密請(qǐng)傳入明文' } // 加密 res = bcryptjs.hashSync(txt) } return res } export default cyj
使用工具類
import cyj from './utils/bcrypt.js ' const pwd = '728637263我是隱私信息' //加密 const jia = cyj(pwd) console.log(jia)//$2a$10$BsXXaevfIG8Og7mKSF5qFu0vSugvJbYWyr3apz9BElCV254.SoIYe console.log(cyj(pwd, jia, 'bi'))//true console.log(cyj(pwd, '我是老6', 'bi'))//false
CryptoJS 加解密 - 單個(gè)key加密
安裝
通過 npm 安裝:npm i crypto-js
功能
作用:對(duì)字符加解密。
優(yōu)點(diǎn):一個(gè)key可以加密與解密,就像鎖鑰匙,一把鑰匙既可以開鎖也可以解鎖
缺點(diǎn):暫無明確的缺點(diǎn)信息
npm地址:www.npmjs.com/package/crypto-js
示例
定義方法:CryptoJS.js
import CryptoJS from 'crypto-js'// aes加解密 /** * AES加密 * @param {String} originText 原始文本 * @param {String} key 密鑰 * @returns */ const encryptAES = (originText, key) => { if (originText) { const encrypt = CryptoJS.AES.encrypt(originText, key) return encrypt.toString() } return null } /** * AES解密 * @param {String} ciphertext 加密文本 * @param {String} key 密鑰 * @returns */ const decryptAES = (ciphertext, key) => { if (ciphertext) { const decrypted = CryptoJS.AES.decrypt(ciphertext, key).toString(CryptoJS.enc.Utf8) return decrypted } return null } /** * 創(chuàng)建AES密鑰 * @param {Number} num defalut:10 生成幾位數(shù)的key * @returns {String} 返回密鑰 */ const createAESKey = (num = 10) => { const library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*+-./~=()[]{};:'?><,`"; let key = "" for (var i = 0; i < num; i++) { let randomPoz = Math.floor(Math.random() * library.length); key += library.substring(randomPoz, randomPoz + 1); } return key } export { decryptAES, encryptAES, createAESKey }
使用CryptoJS.js
import { decryptAES, encryptAES, createAESKey } from './CryptoJS.js' //獲取key const 鑰匙 = createAESKey() const 賬號(hào) = '我是老6' const 加密 = encryptAES(賬號(hào), 鑰匙) const 比對(duì) = decryptAES(加密, 鑰匙) console.log(加密) console.log(比對(duì))
JSEncrypt | RSA加密 - 2把鑰匙
注意:jsencrypt只能在前端使用,不能在后端使用
安裝
通過 npm 安裝依賴:npm i jsencrypt
功能
作用:加密與解密,有2把鑰匙,一把公鑰,一把私鑰,公鑰負(fù)責(zé)加密,私鑰負(fù)責(zé)解密。
優(yōu)點(diǎn):后端有2把鑰匙,一把公鑰,一把私鑰。把公鑰發(fā)給前端,前端負(fù)責(zé)加密數(shù)據(jù),后端拿著私鑰負(fù)責(zé)解密數(shù)據(jù),這樣一來,只用拿著私鑰的人知道明文是什么了。
缺點(diǎn):我不知道
npm地址:www.npmjs.com/package/jsencrypt
示例
定義工具類
import JSEncrypt from 'jsencrypt' // 引入jsencrypt庫(kù) RSA 加、解密 /** * RSA 加、解密 * @param {String,default:'getkey',value:'encrypt 加密|decrypt 解密 | getkey 獲取公私鑰'} type 加解密類型 * @param {String} txt 加解密字符 * @param {String} key 密鑰 * @returns {String} 返回加解密字符 */ const rsa = (type = 'getkey', txt, key) => { const jsencrypt = new JSEncrypt() let resData = null // 加密 if (type === 'encrypt') { jsencrypt.setPublicKey(key) resData = jsencrypt.encrypt(txt) // 獲取公私key } else if (type === 'getkey') { const prikey = jsencrypt.getPrivateKey() const pubkey = jsencrypt.getPublicKey() resData = { prikey, pubkey } // 解密 } else { jsencrypt.setPrivateKey(key) resData = jsencrypt.decrypt(txt) } return resData } export default rsa
使用工具類進(jìn)行加密
import rsa from '. jsencrypt.js' // 公、私鑰 const { prikey, pubkey } = rsa() const 密碼 = '我是老6' const 加密 = rsa('encrypt', 密碼, pubkey) const 解密 = rsa('decrypt', 加密, prikey) console.log(加密) console.log(解密)
node-rsa
后端RSA解加密 (可搭配前端jsencrypt)
node-rsa只能在后端使用;jsencrypt只能在前端使用
安裝
通過 npm 安裝依賴:npm i node-rsa
功能
node-rsa封裝
該封裝僅后端node環(huán)境下可用,前端不可用。
- 該封裝可配合前端 jsencrypt一起使用,例如前端jsencrypt的加密數(shù)據(jù),可用此封裝解密等。
示例
import NodeRSA from "node-rsa" /** * 后端node獲取公、私鑰 * keySize {Number} 生成私鑰、密鑰大小,與jsencrypt保持一致,默認(rèn)1024 * @returns {Object} { pubkey,prikey} pubkey 公鑰 | prikey私鑰 */ const nodeGetKey = (keySize = 1024) => { const nodeKey = new NodeRSA({ b: keySize }) const pubkey = nodeKey.exportKey('public') const prikey = nodeKey.exportKey('private') return { pubkey, prikey } } /** * 后端node加密 * @param {String} txt 加密的文本 * @param {String} pubkey 公鑰 * @returns {String} 返回加密的文本 */ const nodeEncrypt = (txt, pubkey) => { const nodeKey = new NodeRSA(pubkey) nodeKey.setOptions({ encryptionScheme: 'pkcs1' })// 因?yàn)閖sencrypt自身使用的是pkcs1加密方案, nodejs需要修改成pkcs1。 const encrypted = nodeKey.encrypt(txt, 'base64') return encrypted } /** * 后端node解密 * @param {String} hash 加密的文本 * @param {String} prikey 私鑰 * @returns */ const nodeDecrypt = (hash, prikey) => { const nodeKey = new NodeRSA(prikey) nodeKey.setOptions({ encryptionScheme: 'pkcs1' }) // 因?yàn)閖sencrypt自身使用的是pkcs1加密方案, nodejs需要修改成pkcs1。 const decrypted = nodeKey.decrypt(hash, 'utf8') return decrypted } export { nodeDecrypt, nodeGetKey, nodeEncrypt }
以上就是詳解JavaScript前端加解密工具庫(kù)的使用的詳細(xì)內(nèi)容,更多關(guān)于JavaScript加解密的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法
這篇文章主要為大家詳細(xì)介紹了微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02一文詳解JavaScript中的相等運(yùn)算符與類型轉(zhuǎn)換
在?JavaScript?編程中,相等運(yùn)算符和類型轉(zhuǎn)換是理解語言行為的關(guān)鍵部分,雖然這些概念看似簡(jiǎn)單,但它們的細(xì)節(jié)可能會(huì)導(dǎo)致意想不到的結(jié)果,本文將深入探討?==?和?===?運(yùn)算符的區(qū)別、對(duì)象比較、以及?JavaScript?中的顯式和隱式類型轉(zhuǎn)換,需要的朋友可以參考下2024-07-07ECharts事件處理與旭日?qǐng)D實(shí)現(xiàn)
這篇文章介紹了ECharts事件處理與實(shí)現(xiàn)旭日?qǐng)D的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06document.selection.createRange方法與實(shí)例
document.selection.createRange() 根據(jù)當(dāng)前文字選擇返回 TextRange 對(duì)象,或根據(jù)控件選擇返回 ControlRange 對(duì)象2006-10-10javascript動(dòng)畫對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼
javascript動(dòng)畫對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-09-09Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解
眾所周知Gulp.js 是一個(gè)自動(dòng)化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動(dòng)執(zhí)行常見任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁模塊化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2018-01-01