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