FRONEND ECRYPTION IMPLEMENTATION – ANGULAR 5

First Install npm module

npm install crypto-js@3.1.2

Service

Put this service inside user.service.js

1) Get OTP for private encryption

export class UserService {

…………………………………

…………………………….

sendOtpForEncryption(phone: string) {

const url = Config.ico_user_url + '/api/getotpforencryption';

const headers: Headers = new Headers();

headers.append('Content-Type', 'application/json');

return this.http.post(url, {'phone':phone}, new RequestOptions({headers: headers}))

.map(response => {

console.log('response for otp',response.json())

response.json();

});

2) Get Encrypted the private key

Put this service inside common.service.js

export class CommonService {

// Code goes here

keySize : number = 256;

ivSize : number = 128;

iterations: number = 100;

 encrypted_text : string;

decrypted_text : string;

constructor(private http: Http) {

this.encrypted_text = '';

……………………………………….

………………………………………

getEncrypt (msg, pass) {

let salt = CryptoJS.lib.WordArray.random(128/8);

let key = CryptoJS.PBKDF2(pass, salt, {

keySize: this.keySize/32,

iterations: this.iterations

});

let iv = CryptoJS.lib.WordArray.random(128/8);

let encrypted = CryptoJS.AES.encrypt(msg, key, {

iv: iv,

padding: CryptoJS.pad.Pkcs7,

mode: CryptoJS.mode.CBC

});

// salt, iv will be hex 32 in length

// append them to the ciphertext for use in decryption

var transitmessage = salt.toString()+ iv.toString() + encrypted.toString();

this.encrypted_text = transitmessage;

console.log('encrypted_text',this.encrypted_text);

return Observable.of({'encrypted_text':this.encrypted_text});
}

Code for COMPONENT pages

HTML

buy-sell.component.html

Element for private Key

privateKey

<div class="form-group">

<input type="text" class="form-control input-default " placeholder="Enter Your Otp”

name="buyOtp" [(ngModel)]="buyTokenModel.buyOtp" #buyOtp="ngModel" required>

</div>

Submit button

<div class="form-group" style="text-align: center;"> <button type="submit" class="btn btn-outline-

primary" data-toggle="modal" data-target="#basicModal" (click) = "sendOtpForEncryption();"
[disabled]="f2.form.invalid">BUY</button>

</div>

buy-sell.component.js

// function added by @abdul

sendOtpForEncryption() {

console.log('get otp called');

let phone = '+919289893639';

console.log('otp encyption call');

this.userService.sendOtpForEncryption(phone).subscribe(data => {

console.log('sendOtpForEncryption===>>>', data);

});

}
// function added by @abdul

getEncypted(message:string, password:string) {

this.commonService.getEncrypt(message,password).subscribe(data => {

this.encrypted_text = data.encrypted_text;

});