How To sent json data into query string in encripted form and get back in normal json format in angular

How To sent json data into query string in encripted form and get back in normal json format in angular


for encripted query string paramter json data i have follow steps 

1).first i have json data belongs to perticular page
like :-

    {
      module: 'tradefast',
      page: 'iot',
      userId: this.userId,
      TradeID: this.TradeID,
      CounterPartyID: this.CounterPartyID,
      Status: this.Status,
      contractFromEnumID: 'Online'
    }

2).convert json data into string data 

    var rowData = JSON.stringify({
      module: 'tradefast',
      page: 'iot',
      userId: this.userId,
      TradeID: this.TradeID,
      CounterPartyID: this.CounterPartyID,
      Status: this.Status,
      contractFromEnumID: 'Online'
       });

3).then Convert JSON string to Encripted data 
     const encriptedData =this.encService.setEnc(rowData);

4).Then Convert encripted data into "btoa" formated string
    const btoaData=btoa(encriptedData);

5).Append query string with url
    const url='http://localhost:4200/#/mail-page?data='+btoaData;

6).Now Add link with perticular mail or in webpage
    <a href=""+url+"">Click Here</a>

7).Now When press click here anchor or link to redirect link page and get data query string
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import * as CryptoJS from 'crypto-js';
import { EncrDecrService } from '../../services/EncrDecrService';

@Component({
  selector: 'app-mail-page',
  templateUrl: './mail-page.component.html',
  styleUrls: ['./mail-page.component.scss']
})

export class MailRedirectionComponent implements OnInit {
public urlData='';
 constructor(private routerRouterprivate routeActivatedRoute,
 private encServiceEncrDecrService) {
 this.urlData = this.route.snapshot.queryParamMap.get('data');
  const data = JSON.parse(this.encService.getDec(atob(this.urlData)));
//print json data
console.log(data);
}
}

this is the component where we can get querystring and convert back into a proper json data with secure way there are first we convert url data into "atob" and then convert from "atob" to encripted form and then encripted form to decript into a json string and then finaly json string parse and get proper json data
and 
the security algorith that you used is used



import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';
import { environment } from '../../environments/environment';

@Injectable({
    providedIn: 'root'
})

export class EncrDecrService {
    saltKeys = 'yoursaltKey';

    constructor() { }

    // The set method is use for encrypt the value.
    set(value) {
            return this.setEnc(value);
    }

    // The get method is use for decrypt the value.
    get(value) {       
            return this.getDec(value);        
    }

    setEnc(value) {
        const key = CryptoJS.enc.Utf8.parse(this.saltKeys);
        const iv = CryptoJS.enc.Utf8.parse(this.saltKeys);
        const 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.
    getDec(value) {
        const key = CryptoJS.enc.Utf8.parse(this.saltKeys);
        const iv = CryptoJS.enc.Utf8.parse(this.saltKeys);
        const decrypted = CryptoJS.AES.decrypt(valuekey, {
            keySize: 128 / 8,
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });

        return decrypted.toString(CryptoJS.enc.Utf8);

    }


No comments:

Post a comment

Thank You For Your Great Contribution

Featured Post

How to Create Lowercase convert autometically in angular using directive (for textbox , text control)

 How to Create Lowercase convert autometically in angular using directive  1).Directive code  // Usage example: <input lowercasedirective...

Popular Posts