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
Example: See the example in detail step-to-step.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
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
