如何在 Angular 6 中加密和解密

Question

登录响应

{
  code: 200,
  id: 4,
  msg: "success",
  user: "Sourav"
}

我有一个问题，比如我想将本地存储中的 id 和用户存储为加密格式。我如何使用 Angular 6 来做到这一点？

Answer 1

在我们的一个项目中，我们使用了“crypto-js”库。 http://github.com/brix/crypto-js

import * as CryptoJS from 'crypto-js';

encryptData(data) {

    try {
      return CryptoJS.AES.encrypt(JSON.stringify(data), this.encryptSecretKey).toString();
    } catch (e) {
      console.log(e);
    }
  }

  decryptData(data) {

    try {
      const bytes = CryptoJS.AES.decrypt(data, this.encryptSecretKey);
      if (bytes.toString()) {
        return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
      }
      return data;
    } catch (e) {
      console.log(e);
    }
  }

Answer 2

在客户端加密事物的技术解决方案可能是使用一些第三方库。 引用此类库会导致固执己见的答案，这在这里并不是很理想。

但是，如果用例是对用户隐藏一些后端数据（当我阅读您的问题时似乎就是这种情况），那么加密是没有意义的，因为密钥要么存储在 JavaScript 代码中，要么通过网络发送. 在这两种情况下，都无法混淆。

客户端加密的一些有效用例示例：

• 允许用户使用他们拥有的密钥加密事物。
• 使用一些公钥为拥有相应私钥的系统加密消息
• ...

Answer 3

虽然它并不完美，但window.btoa()将提供基本base-64编码，以避免每个人都读取用户数据。 这可能是您最快的解决方案。 由于客户端的加密不安全，因为最终用户可以看到浏览器的所有内容（您的代码或 Ajax 调用等），甚至您的加密密钥。

Answer 4

您可以使用crypto.js来加密数据。 如果您不知道如何将其与 Angular 一起使用，请参阅此内容。

接下来，将加密数据放入本地存储。 请参阅本教程。

Answer 5

您也可以使用secure-ls 。 无需在客户端维护解密密钥。

import * as SecureLS from 'secure-ls';
export class StorageService { 

  private _ls = new SecureLS({ encodingType: 'aes' });
  constructor() {
  }

  set(key: string, value: any, expired: number = 0) {
    this._ls.set(key, value);
  }

  remove(key: string) {
    this._ls.remove(key);
  }

  get(key: string) {
    return this._ls.get(key);
  }

  clear() {
    this._ls.removeAll();
  }
}

Answer 6

只需使用内置函数，如下所示：

const encodedData = btoa('Hello, world'); // encode a string        
localStorage.setItem("token", encodedData );

let accessToken = localStorage.getItem("token");
const decodedData = atob(accessToken ); // decode the string

Answer 7

这就是我在 Angular 中进行加密/解密的方式：

//profile-detail.component.ts

 var userIdVal = this._AESEncryptDecryptService.get(this.Auth[0].UserID); this._AESEncryptDecryptService.encryptData(this.eCode); var UserIdEncrpt = this._AESEncryptDecryptService.encryptData(userIdVal);

//EncryptDecryptService.service.ts

 export class AESEncryptDecryptServiceService { secretKey = 'YourSecretKeyForEncryption&Descryption' constructor() { } // QA/UAT secret key encryptSecretKey = 'mySecretKeyHere' tokenFromUI: string = '123456$#@$^@1ERF' // Prod secret key // encryptSecretKey = 'b14ca3428a4e1840bbce2ea2315a1814' // tokenFromUI: string = '7891@$#@$^@1@ERF' // 7891@230456$#@$^@1257@ERF //adding secret key //Data Encryption Function encryptData(msg) { var keySize = 256 var salt = crypto.lib.WordArray.random(16) var key = crypto.PBKDF2(this.encryptSecretKey, salt, { keySize: keySize / 32, iterations: 100, }) var iv = crypto.lib.WordArray.random(128 / 8) var encrypted = crypto.AES.encrypt(msg, key, { iv: iv, padding: crypto.pad.Pkcs7, mode: crypto.mode.CBC, }) var result = crypto.enc.Base64.stringify( salt.concat(iv).concat(encrypted.ciphertext) ) return result } decryptData(txt) { var key = crypto.enc.Base64.parse(this.encryptSecretKey) var iv = crypto.lib.WordArray.create([0x00, 0x00, 0x00, 0x00]) var decrypted = crypto.AES.decrypt(txt, key, { iv: iv }) return decrypted.toString(crypto.enc.Utf8) } // ======================================================== encrypted: any = '' decrypted: string set(value) { var key = crypto.enc.Utf8.parse(this.tokenFromUI) var iv = crypto.enc.Utf8.parse(this.tokenFromUI) var encrypted = crypto.AES.encrypt( crypto.enc.Utf8.parse(value.toString()), key, { keySize: 128 / 8, iv: iv, mode: crypto.mode.CBC, padding: crypto.pad.Pkcs7, } ) return encrypted.toString() } //The get method is use for decrypt the value. get(value) { var key = crypto.enc.Utf8.parse(this.tokenFromUI) var iv = crypto.enc.Utf8.parse(this.tokenFromUI) var decrypted = crypto.AES.decrypt(value, key, { keySize: 128 / 8, iv: iv, mode: crypto.mode.CBC, padding: crypto.pad.Pkcs7, }) return decrypted.toString(crypto.enc.Utf8) } decryptUsingAES256(value) { let _key = crypto.enc.Utf8.parse(this.tokenFromUI) let _iv = crypto.enc.Utf8.parse(this.tokenFromUI) var decrpted = crypto.AES.decrypt(value, _key, { keySize: 128 / 8, iv: _iv, mode: crypto.mode.CBC, padding: crypto.pad.Pkcs7, }).toString(crypto.enc.Utf8) return decrpted } }`