Actualización en Generador de Contraseñas

Mostrar mensajes de error con alerts, no es lo mejor, por que por ej si el usuario los tiene deshabilitados nunca se podrán ver y por que no son personalizables y el navegador decide que mostrar.

Por lo cual hoy actualicé el código para reemplazar dichos mensajes por un modal que indica el error en si.

Anteriormente también se agregaron los metatags de OpenGraph para que pudiera mostrarse una mejor previsualización del enlace al compartirlo.

Podes ver el generador de contraseñas en: https://demos.greenborn.com.ar/pass-generator/

Código fuente en: https://github.com/Greenborn/generador_contrase-as_web

Mejora en Generador de Contraseñas

Anteriormente ya había programado un simple generador de contraseñas y desde el principio la idea es no abandonarlo e ir agregando mejoras a medida que pasa el tiempo, de acuerdo a las posibilidades.

Por lo que hoy se agregaron las siguientes actualizaciones:

  • Mejora en presentación de botones y texto informativo: Ahora se usan los botones propios de Bootstrap y se le asignan colores de forma que sean más fáciles de identificar.
  • Se agrega posibilidad de modificar los símbolos, números y letras utilizados en la generación de contraseñas.
  • Se agrega enlace de sistema de reporte de errores: El enlace redirige a un sistema propio de Greenborn en el cual se sistematizan los diferentes bugs detectados por los usuarios.

Posibles mejoras a futuro

Algo que estoy pensando agregar en un futuro cercano, es la posibilidad de generar contraseñas a partir de palabras concatenadas.

De forma que se podría generar una contraseña que ademas de ser larga, pueda ser fácil de recordar.

Por ej. es claro que una contraseña al estilo: “RUYI6Bw41}e#X6W8p2&s33l6w@jG64Bs/26~” es mucho más difícil de recordar que otra al estilo: “CEIBO.GUAYMALLEN.PILI.BARCO.TAMIKÉN.PARLA”.

¿Que tan segura son las contraseñas basadas en palabras?

En este caso, la combinatoria estaría de nuestro lado si las palabras se eligen desde una gran base de datos.

Por ej. si se tuvieran registradas 10.000 palabras, y se quisieran saber todas las posibles contraseñas a generar con:

  • 1: 10.000 posibilidades.
  • 2: 100.000.000 posibilidades.
  • 3: 1.000.000.000.000 posibilidades.
  • 5: 100.000.000.000.000.000.000 posibilidades.

Básicamente la cantidad de combinaciones se calcula de la forma:

#pass = #palabras_elegibles ^ cantidad_palabras

Siendo #pass la cantidad máxima de combinaciones, #palabras_elegibles la cantidad de palabras disponible en la base de datos elevado a la longitud de la contraseña expresada en cantidad_palabras.

Adicionalmente se podría definir la posibilidad de crear una contraseña mixta, es decir una en la cual se puedan intercalar palabras con las opciones anteriores ya definidas.

No se trata de ningún invento

Las contraseñas basadas en palabras, se usan mucho por ej. en las billeteras de cripto monedas (Wallets) como una de las opciones de recuperación de la cuenta, ya que si de diera el caso de que se borrara la configuración del wallet se pudiera recuperar su acceso a partir de dicha clave.

Y también es claro que se pueden usar en otros sistemas que requieran el uso de contraseñas, aunque tal vez su mayor limitante sea la longitud del texto generado, ya que existen páginas que limitan la longitud de las claves, y en otras ocasiones el límite no siempre es explicito.

Generador de contraseñas en Angular

Una de las tareas que siempre se presenta es la generación de contraseñas seguras para todos los sistemas tanto en producción como en desarrollo, y usaré esa necesidad propia como escusa para crear un pequeño proyecto angular de generación de contraseñas, y al mismo tiempo ofrecer un servicio más en la web Greenborn.

Manos a la obra

Repo en GitHub

Lo primero que necesitaremos es un repositorio de Github, claramente no es estrictamente necesario pero es una buena practica mantener el código versionado y en este caso está bueno para a quien le interese chusmear el proyecto, si recién comienza a trabajar con dicho Framework.

Enlace a repositorio: https://github.com/Greenborn/generador_contrase-as_web

Prerequisitos

Antes de comenzar es necesario tener instalado:

  • NodeJS en su última versión estable.
  • NPM para la gestión de paquetes.
  • Angular-cli para el desarrollo del proyecto Angular, al proporcionar el comando ng
  • Git (opcional) para la gestión del repositorio.

Creación de proyecto base

El proyecto Angular base se deberá crear utilizado el comando ng de la siguiente manera:

$ ng new GeneraPass

Dicho comando preguntará si se desea utilizar el Router del Framework, a lo cual responderemos que si, ya que si bien puede que no lo necesitemos en un principio, luego puede ser que se necesite si se agregan varias páginas a la navegación.

Luego nos preguntará si deseamos usar CSS, SCSS, SASS o LESS, aquí no me complicaría mucho y elegiría CSS, igualmente cualquiera de las opciones anteriores son muy buenas.

Creación de proyecto angular satisfactoria

Bien, ya tenemos el proyecto generado, ahora solo resta probarlo, para lo cual es esencial ir al directorio del proyecto y ejecutar ng serve:

$ cd GeneraPass
$ ng serve

Si todo va bien, ya debería abrirse una nueva pestaña en el navegador predeterminado con el proyecto funcionando, si no es así hay que mirar en la terminal en que ubicación se sirve el proyecto, en general por defecto es: http://localhost:4200

Proyecto base funcionando correctamente

El comando ng serve se usa para montar un servidor de desarrollo el cual se encarga de actualizar el proyecto automáticamente, cada vez que se detectan cambios, de forma que siempre veremos la versión actualizada del proyecto.

Primeras modificaciones

Bien, ahora ya podremos modificar el proyecto a nuestra conveniencia

Lo primero que podremos hacer es cambiar el favicon, por el que utilizaríamos en el proyecto, para lo que hay que reemplazar el archivo:

src/favicon.ico

El siguiente paso es la eliminación del código del template base, osea la vista que vemos al iniciar el proyecto.

Para eso deberemos editar el archivo: src/app/app.component.html

En este caso borramos todo su contenido, por lo cual obtendremos una vista en blanco.

Elección de Framework de estilos

En este punto uno puede o no utilizar un Framework como Bootstrap, para el maquetado de las vistas, en este caso, la decisión es de utilizarlo, por lo cual lo agregaremos al proyecto con el siguiente comando:

$ ng add @ng-bootstrap/ng-bootstrap

Dicho comando ya nos instala todas las librerías necesarias, y nos deja todo listo para ya poder utilizar Bootstrap en las vistas!

Puedes ver el sitio oficial de ng-bootstrap en: https://ng-bootstrap.github.io

Otra librería que utilizaremos, será la de iconos de Bootstrap, la cual podremos instalar con el comando:

npm i ngx-bootstrap-icons

Recomiendo leer la documentación de la misma en: https://www.npmjs.com/package/ngx-bootstrap-icons

Una vez que la dependencia se haya instalado correctamente, procederemos a incluir la misma en el archivo: src/app/app.module.ts

Dicho archivo ahora debería verse así:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { GeneratePasswordComponent } from './components/generate-password/generate-password.component';
import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
GeneratePasswordComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
FormsModule,ReactiveFormsModule,
NgxBootstrapIconsModule.pick(allIcons)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

En dicho Módulo, también se puede ver que se importan los módulos FormsModule, ReactiveFormsModule que son necesarios para poder bindear los inputs con el modelo.

Creación del componente PasswordGenerator

Los componentes son la base de cualquier proyecto Angular, y lo ideal sería separar lo mejor posible cada una de las funcionalidades del proyecto en componente que luego se puedan reutilizar.

En este caso por motivos de simplicidad y por que el proyecto en si no es muy complejo, se creará un solo componente.

Para crear nuevos componentes, lo mejor es usar el comando especifico para dicha función:

$ ng g c components/GeneratePassword

En dicho comando el argumento “g” indica que se debe generar un nuevo elemento, “c” indica que dicho elemento es un componente y components/GeneraPassword es la ruta en la cual se debe generar el mismo.

Componente generado correctamente, puede verse que también se especifica la modificación del archivo src/app/app.module.ts

Ahora ya podremos incluir dicho componente en cualquier vista, en el nuevo archivo src/app/components/generate-password/generate-password.component.ts se especifica el selector “app-generate-password“.

Lo que significa que podremos incluir dicho componente en cualquier vista referenciandolo de la siguiente manera:

<app-generate-password></app-generate-password>

Por ej lo incluiremos en src/app/app.component.html

Que es el archivo en el cual anteriormente borramos todo su contenido, por lo que ahora solo debería contener:

<div class="container-fluid">
     <app-generate-password></app-generate-password>
</div>

Vista de la página, luego de agregar dicho componente.

Maquetado de la vista

Ahora ya podremos modificar la vista, la cual se encuentra en el archivo: src/app/components/generate-password/generate-password.component.html

La cual actualmente solo contiene el siguiente código:

<p>generate-password works!</p>

Y lo reemplazaremos por el nuevo código HTML:

<div class="row"> 
<div class="col col-sm-8 offset-sm-4 col-lg-6 offset-lg-3 col-xxl-4 offset-xxl-4"> <div class="row mt-5">
<div class="col text-center">
<h2 class="title p-2">Generador de Contraseñas</h2>
</div>
</div>

<div class="row">
<div class="col mb-5"> <p>Puede crear una nueva contraseña segura, con nuestra herramienta On-line, solo complete el formulario y se generarán diferentes contraseñas aleatorias.</p>
</div>
</div>
<div class="row">
<div class="col m-3">
<div class="row mb-4"> <div class="col password-cont p-0">
<input class="p-2" id="passCont" value="{{password}}" placeholder="*************" />
</div>
<div class="col-auto p-2">
<i-bs name="clipboard" class="app-btn" (click)="copyToClipboard()"></i-bs>
<i-bs name="arrow-clockwise" class="app-btn" (click)="generatePassword()"></i-bs>
</div>
</div>
<div class="row options-content">
<div class="col">
<div class="row">
<div class="col text-center">
<h4 class="p-2">Opciones de generación Contraseña</h4>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 mb-2">
<label for="longInput" class="form-label">Longitud</label>
<input [(ngModel)]="passwordOptions.long" type="number" min="0" class="form-control" id="longInput" placeholder="25">
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 mb-2">
<div class="form-check">
<input [(ngModel)]="passwordOptions.mayus" class="form-check-input" type="checkbox" value="" id="mayusInput" checked>
<label class="form-check-label" for="mayusInput"> Mayúsculas </label>
</div>
</div>
<div class="col-12 col-sm-6 mb-2">
<div class="form-check">
<input [(ngModel)]="passwordOptions.minus" class="form-check-input" type="checkbox" value="" id="minusInput" checked>
<label class="form-check-label" for="minusInput"> Minusculas </label>
</div>
</div>
<div class="col-12 col-sm-6 mb-2">
<div class="form-check">
<input [(ngModel)]="passwordOptions.symbol" class="form-check-input" type="checkbox" value="" id="simbolInput" checked>
<label class="form-check-label" for="simbolInput"> Símbolos </label>
</div>
</div>
<div class="col-12 col-sm-6 mb-2">
<div class="form-check">
<input [(ngModel)]="passwordOptions.numbers" class="form-check-input" type="checkbox" value="" id="numberInput" checked>
<label class="form-check-label" for="numberInput"> Números </label>
</div>
</div>

</div>
</div>
</div>
</div>
</div> </div>
</div>

Sobre el HTML, resaltaría los [(ngModel)] que definen el binding entre los valores de los inputs y el modelo (a definir) en donde se almacenarían los valores del formulario.

Y los (click) que definen la llamada a la función definida en el mismo, que será ejecutada al producirse el evento onClick.

Definición de modelo

La configuración usada para la generación de la contraseña se almacenará en un nuevo modelo que crearemos a tal propósito.

Para lo cual, dentro del directorio del componente, se creará un directorio models y dentro del mismo un archivo: password.options.ts

Dentro del cual se agregaría el siguiente contenido:


export class PasswordOptions {
    public long:number = 8;
    public mayus:boolean = true;
    public minus:boolean = true;
    public symbol:boolean = true;
    public numbers:boolean = true;
}

Programación del componente

Luego deberemos editar el archivo correspondiente al código del componente: src/app/components/generate-password/generate-password.component.ts

Dicho archivo nos quedaría de la siguiente manera:


import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { PasswordOptions } from './models/password.options';

@Component({
  selector: 'app-generate-password',
  templateUrl: './generate-password.component.html',
  styleUrls: ['./generate-password.component.css']
})
export class GeneratePasswordComponent implements OnInit {

  constructor() { }

  public password:string = '';
  public passwordOptions:PasswordOptions = new PasswordOptions();

  private passCont!: HTMLInputElement;

  ngOnInit(): void {
  }

  copyToClipboard(){
    if (this.password == '') {
      alert('Para poder copiar una contraseña primero es necesario generar una nueva');
      return false;
    }

    this.passCont = document.getElementById("passCont") as HTMLInputElement;
    this.passCont.select();
    document.execCommand('copy');
    alert("¡Contraseña copiada al portapapeles!");

    return true;
  }

  generatePassword(){
    if (this.passwordOptions.long < 0){
      alert('La longitud de la contraseña debe ser mayor a 0');
      return false;
    }

    if (!(this.passwordOptions.minus || this.passwordOptions.mayus || this.passwordOptions.numbers || this.passwordOptions.symbol)){
      alert('Es necesario elegir al menos una opcion de tipo de contraseña');
      return false;
    }

    if (this.passwordOptions.long >= 10000){
      alert('La cantidad de caracteres ingresada es demasiado grande!');
      return false;
    }

    this.password = '';
    for (let c=0; c < this.passwordOptions.long; c++){
      this.password += this.getPasswordChar();
    }

    return true;
  }

  getPasswordChar():string{
    //se genera un numero al azar entre 1 y 4, dicho numero representa el tipo de caracter a insertar
    let option:number = Math.round( Math.random() * (4 - 1) + 1 );
    let ch:string     = '';
    
    switch (option){
      case 1:
        if (!this.passwordOptions.mayus) { //si no se seleccionaron las mayusculas
          return this.getPasswordChar();
        }
        return this.getCaracter(this.letras).toUpperCase();
      break;

      case 2:
        if (!this.passwordOptions.minus) { //si no se seleccionaron las minusculas
          return this.getPasswordChar();
        }
        return this.getCaracter(this.letras);
      break;

      case 3:
        if (!this.passwordOptions.numbers) { //si no se seleccionaron numeros
          return this.getPasswordChar();
        }
        return this.getNumero();
      break;

      case 4:
        if (!this.passwordOptions.symbol) { //si no se seleccionaron simbolos
          return this.getPasswordChar();
        }
        return this.getCaracter(this.simbolos);
      break;
    }
    return ch;
  }

  private letras:string = 'abcdefghijklmnñopqrstuvwxyz';
  private simbolos:string= '!$%&/()=?^_-:;@*º|#~{[]}';
  getCaracter(chs:string):string{
    let chsCount  = chs.length -1;
    let chsSelect = Math.round( Math.random() * (chsCount - 0) + 0 );
    return chs[chsSelect];
  }

  private getNumero():string{
    return String(Math.round( Math.random() * (9 - 0) + 0 ));
  }

}

Sobre el código, podría resaltar algunas cuestiones, como por ej el prestar atención al ámbito de las variables, es decir si son de tipo private, solo podran ser accedidas desde dentro del componente y no se podrá hacer binding con la vista, puede funcionar mientras se realizan pruebas con ng serve, pero al hacer el ng build va a saltar un error indicando la situación.

Definicón de estilos

Y el archivo CSS de nuestro componente (src/app/components/generate-password/generate-password.component.css):


.title{
    background-color: rgb(176, 255, 131);
    font-weight: bolder;
}

.password-cont{
    border: 1px solid #555;
}

.password-cont input{
    width:100%;
    border:none;
    color: rgb(0, 43, 22);
    font-weight: bolder;
}

.options-content{
    box-shadow: 0px 1px 6px #888;
    border-radius: 0.2rem;
}

Hay que tener en cuenta que los estilos definidos en este archivo solo se aplicarán al componente en cuestión, lo ideal es que en el mismo no haya nada que aplique a varios componentes, en esa situación los estilos que pudieran repetirse deberìan definirse el style.css.

En el archivo CSS de estilos global del template (src/styles.css) deberemos agregar:


.app-btn{
    cursor: pointer;
    padding: .5rem;
    border: 1px solid #555;
}

.app-btn:hover{
    background-color: rgb(161, 192, 255);
}

La clase app-btn se define en el archivo de estilos globales, por que se prevee que pueda ser utilizada en caualquier sección del código de la APP, y se utiliza para definir el comportamiento mínimo del botón en cuanto a lo visual, definiendo su borde, el cursor y el mouse hover.

Probando

Si no hay ningún error, deberíamos ver la siguiente pantalla en el navegador:

Y bien, ya estaría terminado nuestro generador de contraseñas con Angular!

Generando el build

El último paso sería hacer el build del proyecto, para tener lista la versión optimizada para producción, por lo cual bastará con ejecutar el comando:

$ ng build

El cual generá dicha versión dentro del directorio: dist

https://demos.greenborn.com.ar/pass-generator/