Encriptar/Desencriptar con Angular
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