js前端登錄加密解決方案

更新時間：2024年02月05日 08:34:50 作者：諸葛亮的芭蕉扇

項目中需要前端書寫登錄頁面，用戶輸入賬號密碼，本文主要介紹了js前端登錄加密解決方案，具有一定的參考價值，感興趣的可以了解一下

項目背景

環(huán)食藥煙草的數(shù)據(jù)下載模塊中，需要判斷用戶在進行數(shù)據(jù)下載時是進行了登錄操作，如果沒有登錄要跳轉登陸頁面，輸入賬號和密碼進行登錄。

使用場景

項目中需要前端書寫登錄頁面，用戶輸入賬號密碼，前端獲取到用戶輸入的賬號密碼做登陸操作時需要采用對密碼做加密處理。

解決方案

前端通過使用CryptoJS庫進行加密處理。CryptoJS庫是一種常用的前端加密庫，支持多種加密方式，常用的加密方式有：

AES：高級加密標準，目前最常用的對稱加密算法之一?？梢允褂?28位、192位或256位密鑰進行加密
DES：數(shù)據(jù)加密標準，一種較早的對稱加密算法?？梢允褂?6位密鑰進行加密
TripleDES：三重數(shù)據(jù)加密標準，基于DES算法的一個更安全的版本，可以使用112位或168位密鑰進行加密
MD5：消息摘要算法，一種單向哈希函數(shù)，常用于對密碼進行加密和驗證
SHA：安全散列算法，類似于MD5，但更安全，可以使用不同的位數(shù)（如SHA-256、SHA-384、SHA-512）進行加密
HMAC：基于哈希函數(shù)的消息認證碼算法，用于驗證數(shù)據(jù)完整性和真實性

使用指南

使用 npm或者yarn 安裝 crypto-js

npm install crypto-js –save
yarn add crypto-js

在 main.js 引入

import CryptoJS from “crypto-js”;

Vue.prototype.cryptoJS = CryptoJS;

在 App.vue 使用
```
export default {
	mounted() {
		console.log('this.cryptoJS', this.cryptoJS)
	}
}
```
控制臺打印內容如下：

說明安裝成功，可以在項目中正常使用了~

可以看出來 crypto-js 庫的加密算法有很多。環(huán)食藥煙草數(shù)據(jù)下載模塊中采用的是 SHA256加密算法。SHA256 是一種單向加密算法，意味著對于給定的哈希值，無法通過解密算法直接還原出原始數(shù)據(jù)。SHA256 算法是不可逆的，這也是其安全性的基礎之一，目前沒有已知的有效方法可以快速破解它。

SHA256算法加密

const password = 'hello world';
const res = this.cryptoJS.SHA256(password);
const plainRes = res.toString(); // 加密的結果
console.log('password 加密的結果是:', plainRes); //

前后端判斷邏輯

用戶輸入賬號密碼

前端對密碼進行 SHA256 算法加密密碼

后端將前端傳入的已加密的密碼存入數(shù)據(jù)庫

用戶再次登錄時根據(jù)前端傳入的已加密的密碼與數(shù)據(jù)庫中存入的密碼進行比較，一致說明密碼正確；否則錯誤

其他常用加密算法使用指南

AES加密

// AES 加密
decrypt(word, key, iv) {
  let srcs = this.cryptoJS.enc.Utf8.parse(word);
  const AES_JM_RES = this.cryptoJS.AES.encrypt(srcs, key, {
    // 對稱加密算法主要有AES、DES、3DES / 非對稱加密算法主要有RSA、DSA、RCC
    // iv(初始變量)
    // key(加密密鑰)
    // mode(加密模式 主要有CBC(默認)、CFB、CTR、OFB、ECB)
    // padding(填充方式 主要有Pkcs7(默認)、Iso97971、AnsiX923、Iso10126、ZeroPadding)
    iv: iv,
    mode: this.cryptoJS.mode.CBC, // 選擇模式為CBC
    padding: this.cryptoJS.pad.Pkcs7 // 選擇填充方式為PKCS7
  });
  let encryptedBase64Data = this.cryptoJS.enc.Base64.stringify(AES_JM_RES.ciphertext);
  return encodeURIComponent(encryptedBase64Data);
}
// AES 解密
encrypt(word, key, iv) {
  word = decodeURIComponent(word);
  let encryptedHexStr = this.cryptoJS.enc.Base64.parse(word);
  let srcs = this.cryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = this.cryptoJS.AES.decrypt(srcs, key,
    {
      iv: iv,
      mode: this.cryptoJS.mode.CBC,
      padding: this.cryptoJS.pad.Pkcs7,
    }
  );
  let decryptedStr = decrypt.toString(this.cryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

// 樣例
const password = 'hello world';
// 定義加密所需的參數(shù)
const key = this.cryptoJS.enc.Utf8.parse('1234567890abcdef'); // 設置密鑰為16字節(jié)長度的十六進制字符串
const iv = this.cryptoJS.enc.Utf8.parse('abcdefghijklmnop'); // 初始化向量也必須是16字節(jié)長度的十六進制字符串
const str = this.decrypt(password, key, iv);
console.log('加密結果', str);
const str1 = this.encrypt(str, key, iv);
console.log('解密結果', str1);

DES加密

const password = 'hello world';
const key = this.cryptoJS.enc.Utf8.parse('123456789');
const data = this.cryptoJS.enc.Utf8.parse(password);
// DES 加密
const encrypted = this.cryptoJS.DES.encrypt(data, key, {
  mode: this.cryptoJS.mode.ECB, // 選擇模式為ECB
  padding: this.cryptoJS.pad.Pkcs7 // 選擇填充方式為PKCS7
});
console.log('DES 加密結果:', encrypted.toString()); // KNugLrX23UddguNoHIO7dw==
// DES 解密
const decrypted = this.cryptoJS.DES.decrypt(encrypted, key, {
  mode: this.cryptoJS.mode.ECB, // 選擇模式為ECB
  padding: this.cryptoJS.pad.Pkcs7 // 選擇填充方式為PKCS7
});
console.log('DES 解密結果:', decrypted.toString(this.cryptoJS.enc.Utf8)); // hello world

MD5加密

const password = 'hello world';
const md5Res = this.cryptoJS.MD5(password).toString();
console.log('password 加密的結果是:', md5Res); // 5eb63bbbe01eeed093cb22bb8f5acdc3

HMAC加密

// 示例中采用HMAC-SHA256算法對數(shù)據(jù)進行加密
// HMAC并不是一個加密算法，它是一種用于消息認證的技術，因此并不能進行解密操作
const password = 'hello world';
const key = this.cryptoJS.enc.Utf8.parse('123456789');
// 計算 HMAC 
const hmac = this.cryptoJS.HmacSHA256(password, key);
console.log('HMAC加密結果:', hmac.toString()); // 9da40d794b56b945a8e382216b9778216326dd187f6b37e921ec28b63a09bdb0

TripleDES加密

// 1. 在CryptoJS中，采用WordArray類型來傳遞數(shù)據(jù),簡單理解就是words是一個byte數(shù)組
// 2. WordArray的這個對象具有toString()方法，所以在js中是可以直接隱式轉換成字符串的，**但是默認是Hex編碼（16進制)**
// 3. 對稱解密使用的算法是 `AES-128-CBC`算法，數(shù)據(jù)采用 `PKCS#7` 填充 ， 因此這里的 `key` 需要為16位！

const password = 'hello world';
// 16位十六進制數(shù)作為密鑰和密鑰偏移量
const key = this.cryptoJS.enc.Utf8.parse('0123456789abcdef'); // 密鑰
const data = this.cryptoJS.enc.Utf8.parse(password);
// 定義向量（可選參數(shù)，如果不指定則會自動生成）
const iv = this.cryptoJS.enc.Utf8.parse('abcdefghijklmnop'); // 偏移量
// TripleDES 加密
const encrypted = this.cryptoJS.TripleDES.encrypt(data, key, {
  iv: iv,
  mode: this.cryptoJS.mode.CBC, // 選擇模式為CBC
  padding: this.cryptoJS.pad.Pkcs7 // 選擇填充方式為PKCS7
});
console.log('TripleDES 加密結果是:', encrypted.toString()); // sEdwNwrfNcMrMj11iMjKdA==
const decrypted = this.cryptoJS.TripleDES.decrypt(encrypted, key, {
  iv: iv,
  mode: this.cryptoJS.mode.CBC, // 選擇模式為CBC
  padding: this.cryptoJS.pad.Pkcs7 // 選擇填充方式為PKCS7
});
console.log('TripleDES 解密結果:', decrypted.toString(this.cryptoJS.enc.Utf8)); // hello world

Base64加密
Base64顧名思義，就是基于64個可打印字符來表示二進制數(shù)據(jù)的一種方法，「注意它并不是一種加密算法」。對于64個打印字符，我們只需要6個二進制位就可以完全表示了。那么我們如何利用8個二進制位來表示只需要6個二進制位就可以完全表示的可打印字符呢？由于2的6次方等于64，所以我們可以將每6個位元為一個單元，對應某個可打印字符。三個字節(jié)有24個位元，對應于4個Base64單元，即3個字節(jié)需要用4個可打印字符來表示。
```
// 原生加密
const btoa = window.btoa('hello, world')  // 編碼
console.log('加密后',btoa) // aGVsbG8sIHdvcmxk
const atob = window.atob('aGVsbG8sIHdvcmxk')  // 解碼
console.log('解密后',atob) // hello, world

// base64插件
npm install --save js-base64 // 安裝

// 使用
import { Base64 } from 'js-base64';

const encode = Base64.encode('hello, my name is FuChaoyang'); // 編碼
console.log('插件加密后', encode);
const decode = Base64.decode('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA'); // 解碼
console.log('插件解密后', decode);
```