En este post vamos aprender como encriptar y desencriptar mensajes que enviamos por internet, asi conseguiremos aumentar la seguridad entre usuarios y dar un valor añadido a nuestras webs

Mediante unos sencillos pasos entenderemos como funciona y como podemos aplicar estos conociemientos en un pequeño proyecto para ver su funcionalidad

Para enteder bien este post empezaremos ententiendo que es Encriptar y Desencriptar :

  • Encriptar es el proceso por el cual se cifra un texto usando una clave , esta clave es un codigo de signos que se interpretan segun determinadas reglas para que no pueda ser entendido por nadie.
  • Desencriptar seria el proceso de tranformar el mensaje encriptado a texto legible usando la clave generada al encriptar el mensaje, sin esta clave el mensaje seria imposible de volverlo a tranformar a texto normal.

Para desarrollar este proyecto usaremos unas herramientas determinadas :

Usaremos un algoritmo llamado AES – este algoritmo es uno de los mas usados para esta funcion.

Usaremos CryptoJs es una libreria de algoritmos utilizados en criptografia y escritos en javascript.

Los pasos a seguir son los siguientes :

-Abrimos nuestro cmd y creamos el proyecto atraves del comando «ng new nombre-proyecto».

-Luego vamos instalamos las dependencias que usar nuestro proyecto :

-npm install crypto-js –save

-npm install bootstrap –save

-Iniciamos visual code atraves del cmd «Code .»

-Iniciamos el servidor para ver que la aplicacion corre perfectamente «ng serve»

Copiamos el local host en el navegador y nos abrira el proyecto , si todo va bien veriamos esto :

Ahora agregamos los modulos en el angular.json

Con esto tenemos el proyecto configurado para usar las modulos agregados.

Ahora vamos a importar unas herramientas en el app.module.ts para poder usar formularios en nuestra app.

Hacemos un import de :

import {FormsModule, ReactiveFormsModule} from ‘@angular/forms’;

y tambien lo agregamos en el imports de @NgModule:

imports: [

    BrowserModule, FormsModule, ReactiveFormsModule

  ],

Nos creamos un componente que va contendra la logica y la vista de la aplicación

Una vez creado el componente vamos a la vista del componente «cifrar.component.html»

y creamos un formulario que contendra 2 partes :

La primera parte es la de cifrado que contendra las siguientes partes :

  • Una caja para el texto que vamos a cifrar
  • Una caja para meter la clave
  • Un textarea para mostrar el texto ya cifrado
  • Un boton para llamar a la funcion de convertirTexto pasandole un valor «encriptar»

La segunda parte es la de descifrado y contendra las siguientes partes

  • Una caja para meter el texto que queremos descifrar
  • Una caja para meter la clave usada en el cifrado y que usaremos en esta caja para descifrar el mensaje
  • Un textare que nos mostrara el mensaje descifrado
  • Un boton para llamar a la funcion convertirTexto pasandole un valor «desencriptar»

Ahora vamos a ver en detalle que funcionalidad tiene cada etiqueta

En esta etiqueta definimos la clase que es de tipo formulario y ngModel que capturara el contenido que hay en la caja , en este caso seria el texto que vamos a introducir para cifrar

<input type=»text» class=»form-control» placeholder=»Ingresa texto a encriptar» [(ngModel)]=»enctexto»>

Esta es la misma que la anterior descrita y servira para capturar la clave que usaremos para cifrar el texto

<input type=»password» class=»form-control» placeholder=»Ingresa llave de encripción» [(ngModel)]=»encPass»>

Aqui usaremos un textarea para mostrar el texto cifrado, con {{textoEncriptado}} pintamos el resultado de cifrar el texto

      <textarea class=»form-control» readonly rows=»3″>{{textoEncriptado}}</textarea>

Por ultimo tenemos el boton que contiene el evento (click)=»convertirTexto(‘encriptar’) , esto lo qque hace es llamar a la funcion «convertirTexto» pasandole un parametro (‘encriptar’)

      <button type=»button» class=»btn btn-success float-right» (click)=»convertirTexto(‘encriptar’)»>Encriptar</button>

Parte Desencriptar :

En esta etiqueta vamos a introducir el resultado de encriptar el texto y lo capturamos con ngModel

  <input type=»text» class=»form-control» placeholder=»Ingrese el texto que quieres desencriptar» [(ngModel)]=»destexto»>

En esta etiqueta vamos a introducir la clave que hemos usado para cifrar y que ahora usaremos para descifrar el texto cifrado, capturamos la clave con ngModel

<input type=»password» class=»form-control» placeholder=»Ingrese la llave para desencriptar» [(ngModel)]=»desPass»>

En esta etiqueta se mostrare el texto ya descifrado y lo pintaremos con {{textoDesencriptado}}

      <textarea class=»form-control» readonly rows=»3″>{{textoDesencriptado}}</textarea>

Por ultimo tenemos el boton que contiene el evento (click)=»convertirTexto(‘desencriptar’) , esto lo que hace es llamar a la funcion «convertirTexto» pasandole un parametro que en este caso sera el de (‘desencriptar’)

      <button type=»button» class=»btn btn-success float-right» (click)=»convertirTexto(‘desencriptar’)»>Desencriptar</button>

El resultado visual de este formulario es el siguiente :

Ahora vamos a programar la parte logica

Vamos a seguir los pasos :

Primero hacemos un import de CryptoJs para realizar los procesos de encriptar y desencriptar el texto

import * as CryptoJS from ‘crypto-js’;

Definimos el tipo de datos de los Ngmodel que hemos usado para capturar los datos introducidos en las cajas en este caso todo lo que vamos a introducir es texto asique sera de tipo String

 enctexto: string;

  destexto: string;

  encPass: string;

  desPass: string;

  textoEncriptado: string;

  textoDesencriptado: string;

Lo siguiente es la funciones para relizar el proceso de encriptar y desencriptar

convertirTexto(conversion: string) {

    if (conversion === ‘encriptar’) {

      this.textoEncriptado = CryptoJS.AES.encrypt(this.enctexto.trim(), this.encPass.trim()).toString();

    } else {

      this.textoDesencriptado = CryptoJS.AES.decrypt(this.destexto.trim(), this.desPass.trim()).toString(CryptoJS.enc.Utf8);

    }}

Vamos a ver en detalle esta funcion

La funcion se llama ConvertirTexto que es llamada cuando hacemos el click en el boton , definimos el tipo de dato que le pasamos como parametro que en este caso es string

convertirTexto(conversion: string) {

A continuacion creamos un if donde vamos a comparar el parametro pasado en este caso comparamos que boton hemos pulsado preguntado si conversion es igual a encriptar o desencriptar

if (conversion === ‘encriptar’) {

Si es encriptar ejecutara esta linea de codigo :

Esta linea lo que hace es cojer el texto de la caja que queremos encriptar y la clave que usaremos para encriptar , mediante el metodo CryptoJs.AES.encrypt , usamos el modulo cryptojs definimos el algoritmo que usaremos en este caso Aes y con encrypt procedemos a encriptarlo todo.

      this.textoEncriptado = CryptoJS.AES.encrypt(this.enctexto.trim(), this.encPass.trim()).toString();

Y si el boton pulsado es el de desencriptar se ejecutara la siguiente linea

La funcionalidad es la misma lo unico que cambia es decrypt donde cojera el texto encriptado de la caja y la clave usada para encriptar y desenciptara el mensaje

} else {

      this.textoDesencriptado = CryptoJS.AES.decrypt(this.destexto.trim(), this.desPass.trim()).toString(CryptoJS.enc.Utf8);

    }

Ahora vamos a ver si es funcional :

Metemos un texto

Metemos una clave que usaremos para encriptar y tambien para desencriptar

Pulsamos el boton y vemos el resultado en la caja, !!bien tenemos el texto encriptado!!!

Ahora vamos a Desencriptar

Metemos en la caja el texto que hemos encriptado

Metemos la clave usada en el cifrado para poder descifrarlo , tiene que ser la misma sino sera imposible descifrar el texto

Por ultimo observamos el resultado en la caja , !!bieennn tenemos el texto desencriptado¡¡

Bueno con este sencillo tutorial hemos conseguido aprender a encriptar texto de una forma sencilla y que nos servirar para darle un valor añadido a nuestras aplicaciones web.

Autor: Jonathan Benitez Villafuerte

Curso : Microsoft MCSA Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año Academico: 2019-2020

GitHub : https://github.com/Colosus43/encriptarangular

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.