angular password encryption

Encryption and Decryption Data/Password in Angular 9

You can use crypto.js to encrypt data. We have used 'crypto-js'. Follow the below steps,
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 Command 2 -> npm install @types/crypto-js --save

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(keysvalue){
    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(keysvalue){
    var key = CryptoJS.enc.Utf8.parse(keys);
    var iv = CryptoJS.enc.Utf8.parse(keys);
    var decrypted = CryptoJS.AES.decrypt(valuekey, {
        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 {EncrDecrServicefrom '../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 { ComponentOnInit } from '@angular/core';
import {EncrDecrServicefrom '../EncrDecr/encr-decr.service';

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

  constructor(private EncrDecrEncrDecrService) {   }

  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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

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