En esta ocasión les traigo un tutorial de como encriptar nuestras variables en localstorage , con la ayuda de unos paquetes NPM.

Lo primero es crear una nueva aplicación angular:

 ng new encrypt-app 

Luego procedemos a instalar los siguientes paquetes que vamos a utilizar :

npm install crypto-js --save
npm install secure-web-storage
npm install @types/crypto-js --save-dev
npm install --save @types/node

Procedemos a instalar estos paquetes desde nuestra terminal

Una vez instalados editamos dos archivos


 src/tsconfig.app.json

 src/tsconfig.json

 

 

y agregamos el siguiente fragmento de código a los archivos:

"types": [
      "node"
    ],

 

 

Ya con esto tendríamos nuestro proyecto listo para comenzar a programar:

PASO 1

Creamos 2 servicios

1. storage.service.ts

2. localService.ts

El contenido de storage.service.ts sera el siguiente:

 
import * as CryptoJS from 'crypto-js';

import { Injectable } from '@angular/core';

const SecureStorage = require('secure-web-storage');
const SECRET_KEY = 'Ber1g0';
@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() { }
  public secureStorage = new SecureStorage(localStorage, {
    hash: function hash(key) {
      key = CryptoJS.SHA256(key, SECRET_KEY);

      return key.toString();
    },
    encrypt: function encrypt(data) {
      data = CryptoJS.AES.encrypt(data, SECRET_KEY);

      data = data.toString();

      return data;
    },
    decrypt: function decrypt(data) {
      data = CryptoJS.AES.decrypt(data, SECRET_KEY);

      data = data.toString(CryptoJS.enc.Utf8);

      return data;
    }
  });

}

El contenido de localService.ts sera el siguiente:

import { Injectable } from '@angular/core';
import { StorageService } from './storage.service';
@Injectable({
  providedIn: 'root'
})
export class LocalService {

  constructor(private storageService: StorageService) { }
  // Set the json data to local 
  setJsonValue(key: string, value: any) {
    this.storageService.secureStorage.setItem(key, value);
  }
  // Get the json value from local 
  getJsonValue(key: string) {
    return this.storageService.secureStorage.getItem(key);
  }// Clear the local 
  clearToken() {
    return this.storageService.secureStorage.clear();
  }
}

Ya solo nos queda importar el localService.ts en donde lo necesitemos, en este caso lo importaremos en app.component.ts

import { Component, OnInit } from '@angular/core';

import { LocalService } from './services/local.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private localService: LocalService) {

  }
  setLocalStorage() {
    // Set the User data
    let user = {
      name: 'Jordi',
      lastname: 'cuevas'
    }
    this.localService.setJsonValue('user', user);
  }
  getLocalStorage() {
    // Get the user data
    let userdata = this.localService.getJsonValue('user');
    console.log(userdata)
  }
  ngOnInit() {
    this.setLocalStorage();
    this.getLocalStorage();
  }
}


Fíjense como en la función setLocalStorage guardamos un objeto en localStorage , ya no debemos usar JSON.stringify ni JSON.parse.

Una vez hagamos esto procedemos a ejecutar nuestra app con ng serve y abrimos el navegador localhost:4200 y abrimos la consola web y vamos a almacenamiento y vemos como se crea nuestra variable encriptada en localstorage

Con esto ya tendremos nuestras variables encriptadas si debemos usar localStorage en algun momento para almacenar algun dato de nuestra app.

Puedes descargar el codigo fuente de nuestra app desde el siguiente enlace

Si al compilar tu proyecto te da un warning del paquete crypto-js agrega lo siguiente a tu package.json luego de devDependencies

browser: {
crypto: false

}

Hasta la proxima!

 

Author

Write A Comment