web-dev-qa-db-ja.com

Angular 4でCryptoJSを使用する方法

Angular 4を使用していなかった場合、ライブラリにscriptタグを配置するだけでした。scriptタグをindex.htmlファイルCryptoJSを認識していません。ライブラリまたはAngular同等のものを使用する方法はありますか?

16
ecain

NPMを使用してインストールし、コンポーネントファイルに以下のステートメントをインポートします。

npm install crypto-js

import * as crypto from 'crypto-js';

これで、コンポーネントファイルで暗号化を使用できます。

29
CharanRoot

次のコマンドを使用して、cryptoJSをインストールします

npm install crypto-js --save

その後、AESEncryptDecryptServiceサービスを構築できます。

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

@Injectable({
  providedIn: 'root'
})
export class AESEncryptDecryptService {

  secretKey = "YourSecretKeyForEncryption&Descryption";
  constructor() { }

  encrypt(value : string) : string{
    return CryptoJS.AES.encrypt(value, this.secretKey.trim()).toString();
  }

  decrypt(textToDecrypt : string){
    return CryptoJS.AES.decrypt(textToDecrypt, this.secretKey.trim()).toString(CryptoJS.enc.Utf8);
  }
}

コンポーネントで、このサービスをインポートして注入します

import { AESEncryptDecryptService } from '../services/aesencrypt-decrypt.service'; 


constructor(private _AESEncryptDecryptService: AESEncryptDecryptService) { }

暗号化/復号化機能を使用する

let encryptedText = _self._AESEncryptDecryptService.encrypt("Hello World");
let decryptedText = _self._AESEncryptDecryptService.decrypt(encryptedText);
0