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(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
