如何在 Angular 6 中加密和解密

Question

登录响应

{ 代码：200， 编号：4， 味精：“成功”， 用户：“苏拉夫” }

我有一个问题，例如我想将 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 中使用它，请参阅 this。

接下来，您将加密数据放入本地存储。看到这个tutorial。

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
  }

  

   
}`