項(xiàng)目背景

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

使用場(chǎng)景

項(xiàng)目中需要前端書(shū)寫(xiě)登錄頁(yè)面，用戶(hù)輸入賬號(hào)密碼，前端獲取到用戶(hù)輸入的賬號(hào)密碼做登陸操作時(shí)需要采用對(duì)密碼做加密處理。

解決方案

前端通過(guò)使用CryptoJS庫(kù)進(jìn)行加密處理。CryptoJS庫(kù)是一種常用的前端加密庫(kù)，支持多種加密方式，常用的加密方式有：

• AES：高級(jí)加密標(biāo)準(zhǔn)，目前最常用的對(duì)稱(chēng)加密算法之一。可以使用128位、192位或256位密鑰進(jìn)行加密
• DES：數(shù)據(jù)加密標(biāo)準(zhǔn)，一種較早的對(duì)稱(chēng)加密算法?？梢允褂?6位密鑰進(jìn)行加密
• TripleDES：三重?cái)?shù)據(jù)加密標(biāo)準(zhǔn)，基于DES算法的一個(gè)更安全的版本，可以使用112位或168位密鑰進(jìn)行加密
• MD5：消息摘要算法，一種單向哈希函數(shù)，常用于對(duì)密碼進(jìn)行加密和驗(yàn)證
• SHA：安全散列算法，類(lèi)似于MD5，但更安全，可以使用不同的位數(shù)（如SHA-256、SHA-384、SHA-512）進(jìn)行加密
• HMAC：基于哈希函數(shù)的消息認(rèn)證碼算法，用于驗(yàn)證數(shù)據(jù)完整性和真實(shí)性

使用指南

• 使用 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)
  	}
  }
  

  控制臺(tái)打印內(nèi)容如下：

  

  說(shuō)明安裝成功，可以在項(xiàng)目中正常使用了~

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

• SHA256算法加密

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

• 前后端判斷邏輯

  用戶(hù)輸入賬號(hào)密碼

  前端對(duì)密碼進(jìn)行 SHA256 算法加密密碼

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

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

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

• AES加密

  // AES 加密
  decrypt(word, key, iv) {
    let srcs = this.cryptoJS.enc.Utf8.parse(word);
    const AES_JM_RES = this.cryptoJS.AES.encrypt(srcs, key, {
      // 對(duì)稱(chēng)加密算法主要有AES、DES、3DES / 非對(duì)稱(chēng)加密算法主要有RSA、DSA、RCC
      // iv(初始變量)
      // key(加密密鑰)
      // mode(加密模式 主要有CBC(默認(rèn))、CFB、CTR、OFB、ECB)
      // padding(填充方式 主要有Pkcs7(默認(rèn))、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'); // 設(shè)置密鑰為16字節(jié)長(zhǎng)度的十六進(jìn)制字符串
  const iv = this.cryptoJS.enc.Utf8.parse('abcdefghijklmnop'); // 初始化向量也必須是16字節(jié)長(zhǎng)度的十六進(jìn)制字符串
  const str = this.decrypt(password, key, iv);
  console.log('加密結(jié)果', str);
  const str1 = this.encrypt(str, key, iv);
  console.log('解密結(jié)果', 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 加密結(jié)果:', 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 解密結(jié)果:', decrypted.toString(this.cryptoJS.enc.Utf8)); // hello world
  

• MD5加密

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

• HMAC加密

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

• TripleDES加密

  // 1. 在CryptoJS中，采用WordArray類(lèi)型來(lái)傳遞數(shù)據(jù),簡(jiǎn)單理解就是words是一個(gè)byte數(shù)組
  // 2. WordArray的這個(gè)對(duì)象具有toString()方法，所以在js中是可以直接隱式轉(zhuǎn)換成字符串的，**但是默認(rèn)是Hex編碼（16進(jìn)制)**
  // 3. 對(duì)稱(chēng)解密使用的算法是 `AES-128-CBC`算法，數(shù)據(jù)采用 `PKCS#7` 填充 ， 因此這里的 `key` 需要為16位！
  
  const password = 'hello world';
  // 16位十六進(jìn)制數(shù)作為密鑰和密鑰偏移量
  const key = this.cryptoJS.enc.Utf8.parse('0123456789abcdef'); // 密鑰
  const data = this.cryptoJS.enc.Utf8.parse(password);
  // 定義向量（可選參數(shù)，如果不指定則會(huì)自動(dòng)生成）
  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 加密結(jié)果是:', 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 解密結(jié)果:', decrypted.toString(this.cryptoJS.enc.Utf8)); // hello world
  

• Base64加密
  Base64顧名思義，就是基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的一種方法，「注意它并不是一種加密算法」。對(duì)于64個(gè)打印字符，我們只需要6個(gè)二進(jìn)制位就可以完全表示了。那么我們?nèi)绾卫?個(gè)二進(jìn)制位來(lái)表示只需要6個(gè)二進(jìn)制位就可以完全表示的可打印字符呢？由于2的6次方等于64，所以我們可以將每6個(gè)位元為一個(gè)單元，對(duì)應(yīng)某個(gè)可打印字符。三個(gè)字節(jié)有24個(gè)位元，對(duì)應(yīng)于4個(gè)Base64單元，即3個(gè)字節(jié)需要用4個(gè)可打印字符來(lái)表示。

  // 原生加密
  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);

到此這篇關(guān)于js前端登陸加密解決方案的文章就介紹到這了,更多相關(guān)js 登陸加密內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論