Angular 7

Encryption Decryption a String in Angular 7 or 8 or 9 - CryptoJS, TypeScript

How to use CryptoJS for data secure using Encryption Decryption in Angular?
Follow the below steps to achieve this Encryption/Decryption Angular 7, 8 or 9
1.      Install CryptoJS using below commands in your project directory
2.      Add script ../node_modules/crypto-js/crypto-js.js” in your “angular.json” file’s scripts array.
3.      Create a service class “EncrDecrService” for encrypts and decrypts get/set methods and import “CryptoJS” in the service for using encrypt and decrypt get/set methods.
4.      Import this service class “EncrDecrService” in the angular module class “NgModule” and then add this service in the providers.
5.      Finally, use your encrypted and decrypted service methods in your component class.
6.      Result in your application browser console.

Example: See the example in detail step-to-step.

Steps 1 – Install CryptoJS using below NPM commands in your project directory

npm install crypto-js --save
npm install @types/crypto-js –save

After installing both above commands it looks like

NPM Command 1 -> npm install crypto-js --save

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ crypto-js@3.1.9-1
added 1 package from 1 contributor and audited 40178 packages in 9.958s
found 0 vulnerabilities

NPM Command 2 -> npm install @types/crypto-js --save

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @types/crypto-js@3.1.43
added 1 package from 1 contributor and audited 40179 packages in 11.549s
found 0 vulnerabilities

Steps 2 - Add the script path in “angular.json” file.

"scripts": [
              "../node_modules/crypto-js/crypto-js.js"
            ]

Steps 3 – Create a service class “EncrDecrService” for encrypts and decrypts get/set methods.
Import “CryptoJS” in the service for using encrypt and decrypt get/set methods.

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

@Injectable({
  providedIn: 'root'
})

export class EncrDecrService {
  constructor() { }
 
  //The set method is use for encrypt the value.
  set(keys, value){
    var key = CryptoJS.enc.Utf8.parse(keys);
    var iv = CryptoJS.enc.Utf8.parse(keys);
    var encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(value.toString()), key,
    {
        keySize: 128 / 8,
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });

    return encrypted.toString();
  }

  //The get method is use for decrypt the value.
  get(keys, value){
    var key = CryptoJS.enc.Utf8.parse(keys);
    var iv = CryptoJS.enc.Utf8.parse(keys);
    var decrypted = CryptoJS.AES.decrypt(value, key, {
        keySize: 128 / 8,
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });

    return decrypted.toString(CryptoJS.enc.Utf8);
  }
}

Steps 4 - Import this service class “EncrDecrService” in the angular module class “NgModule” and then add this service in the providers.


import {EncrDecrService} from '../app/EncrDecr/encr-decr.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [EncrDecrService],
  bootstrap: [AppComponent]
})
export class AppModule { }


Steps 5 - Finally, use your encrypted and decrypted service methods in your component class.

import { Component, OnInit } from '@angular/core';
import {EncrDecrService} from '../EncrDecr/encr-decr.service';

@Component({
  selector: 'app_user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private EncrDecr: EncrDecrService) {   }

  ngOnInit() {
    var encrypted = this.EncrDecr.set('123456$#@$^@1ERF', 'password@123456');
    var decrypted = this.EncrDecr.get('123456$#@$^@1ERF', encrypted);
   
    console.log('Encrypted :' + encrypted);
    console.log('Encrypted :' + decrypted);
  }
}

Steps 6 - See the output in your application browser's console


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^