Cómo Crear un Sistema de Login en Angular

Angular es un popular framework de desarrollo web desarrollado por Google que se utiliza para crear aplicaciones web interactivas y dinámicas. Una de las características comunes en muchas aplicaciones web es la funcionalidad de inicio de sesión, que permite a los usuarios acceder a sus cuentas de usuario de manera segura. En este artículo, aprenderás cómo crear un sistema de login en Angular.

Requisitos Previos

Antes de comenzar, asegúrate de tener instalado Node.js y Angular CLI en tu sistema. Si aún no los tienes, puedes descargarlos e instalarlos desde los siguientes enlaces:

• Node.js
• Angular CLI: Abre tu terminal y ejecuta el siguiente comando para instalar Angular CLI de forma global:

  npm install -g @angular/cli

Paso 1: Crear un Nuevo Proyecto de Angular

Para comenzar, crea un nuevo proyecto de Angular utilizando Angular CLI. Abre tu terminal y ejecuta el siguiente comando:

ng new login-app

Sigue las instrucciones para configurar las opciones de tu proyecto. Luego, dirígete al directorio del proyecto con el comando:

cd login-app

Paso 2: Crear Componentes

En esta etapa, vamos a crear los componentes necesarios para la funcionalidad de inicio de sesión. Ejecuta los siguientes comandos en tu terminal para crear los componentes “login” y “dashboard”:

ng generate component login
ng generate component dashboard

Estos comandos generarán las carpetas y archivos necesarios para cada componente, incluyendo los archivos HTML, TypeScript y CSS.

Paso 3: Configurar Enrutamiento

Para navegar entre las páginas de login en Angular y el dashboard, necesitamos configurar el enrutamiento. Abre el archivo app-routing.module.ts ubicado en la carpeta src/app y configúralo de la siguiente manera:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Esto define las rutas para la página de inicio de sesión y el dashboard.

Paso 4: Crear Formulario de Inicio de Sesión

Abre el archivo login.component.html en la carpeta src/app/login y agrega un formulario de inicio de sesión básico. Aquí tienes un ejemplo:

<h2>Login</h2>
<form (submit)="onSubmit()">
  <div class="form-group">
    <label for="username">Usuario:</label>
    <input type="text" id="username" [(ngModel)]="username" name="username" class="form-control" required>
  </div>
  <div class="form-group">
    <label for="password">Contraseña:</label>
    <input type="password" id="password" [(ngModel)]="password" name="password" class="form-control" required>
  </div>
  <button type="submit" class="btn btn-primary">Iniciar Sesión</button>
</form>

Paso 5: Implementar la Funcionalidad de Login

En el archivo login.component.ts ubicado en la carpeta src/app/login, implementa la lógica de inicio de sesión. Aquí hay un ejemplo simple:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  username: string = '';
  password: string = '';

  constructor(private router: Router) {}

  onSubmit() {
    // Aquí deberías verificar las credenciales ingresadas
    // y autenticar al usuario. Por ahora, simplemente redireccionaremos al dashboard.
    this.router.navigate(['/dashboard']);
  }
}

Paso 6: Crear la Página de Dashboard

En el archivo dashboard.component.html ubicado en la carpeta src/app/dashboard, puedes crear una página de dashboard simple. Por ejemplo:

<h2>Bienvenido al Dashboard</h2>
<p>Esta es una página protegida que solo se muestra después de iniciar sesión.</p>

Paso 7: Estilo y Personalización

Puedes personalizar la apariencia de tus componentes y agregar estilos CSS según tus preferencias en los archivos .css correspondientes.

Paso 8: Ejecutar la Aplicación

Para ejecutar tu aplicación, utiliza el siguiente comando en la terminal:

ng serve

Luego, abre un navegador web y navega vía localhost hacia http://localhost:4200/ para ver tu aplicación en funcionamiento.

Cifrado de la contraseña de Login

En una aplicación Angular, el cifrado de contraseñas debe llevarse a cabo en el lado del servidor, ya que es donde se gestionan las operaciones de autenticación y se almacenan las contraseñas de los usuarios. El cifrado de contraseñas en el lado del cliente (Angular) no proporciona seguridad real, ya que el código del cliente es visible para el usuario y no es adecuado para proteger las contraseñas.

A continuación, te mostraré cómo cifrar una contraseña en el lado del servidor utilizando un ejemplo en Node.js y Express. Puedes utilizar este ejemplo como guía para implementar la parte del servidor de tu aplicación Angular:

1. Configura tu servidor Node.js: Asegúrate de tener un servidor Node.js con Express configurado. Puedes utilizar npm para instalar Express y otras dependencias necesarias.
2. Utiliza una Biblioteca de Cifrado: Una de las bibliotecas más comunes para el cifrado de contraseñas en Node.js es bcrypt. Puedes instalarlo en tu proyecto utilizando el siguiente comando:

   npm install bcrypt

3. Código de Cifrado de Contraseña en el Servidor: Aquí hay un ejemplo de cómo cifrar una contraseña en el lado del servidor utilizando bcrypt:

   const express = require('express');
   const bcrypt = require('bcrypt');
   const app = express();
   const port = 3000;

   // Configura una ruta para cifrar una contraseña
   app.post('/cifrar-contrasena', async (req, res) => {
     const password = req.body.password; // Obtén la contraseña del cliente

     try {
       // Genera un salt (sal) para el cifrado
       const saltRounds = 10;
       const salt = await bcrypt.genSalt(saltRounds);

       // Cifra la contraseña con el salt
       const hashedPassword = await bcrypt.hash(password, salt);

       // Devuelve la contraseña cifrada al cliente o almacénala en tu base de datos
       res.status(200).json({ hashedPassword });
     } catch (error) {
       console.error('Error al cifrar la contraseña:', error);
       res.status(500).send('Error interno del servidor');
     }
   });

   app.listen(port, () => {
     console.log(`Servidor en ejecución en el puerto ${port}`);
   });

En este ejemplo, cuando el cliente envía una solicitud POST con la contraseña sin cifrar, el servidor utiliza bcrypt para generar un salt aleatorio y cifra la contraseña antes de almacenarla en la base de datos o devolverla al cliente.

Recuerda que este es solo un ejemplo de cómo cifrar contraseñas en el lado del servidor. Deberás integrar este código en tu aplicación Node.js que sirve como servidor de autenticación para tu aplicación Angular. También se recomienda aumentar la seguridad de tu app por medio de un certificado SSL.

La parte de Angular se encargará de enviar las solicitudes de inicio de sesión al servidor y manejar las respuestas.

Librerías auxiliares para Login en Angular

En Angular, puedes implementar un sistema de login desde cero o utilizar librerías y módulos existentes para simplificar el proceso. Aquí tienes algunas de las librerías y módulos populares que puedes utilizar para implementar la funcionalidad de login en Angular:

1. Firebase Authentication: Firebase Authentication es un servicio de autenticación en la nube de Firebase (una plataforma de desarrollo de aplicaciones móviles y web de Google). Proporciona una solución completa para la autenticación de usuarios, incluyendo métodos de inicio de sesión con correo electrónico y contraseña, autenticación social (como Google y Facebook), y más. Firebase Authentication se integra fácilmente con aplicaciones Angular utilizando AngularFire.
2. Auth0 Angular SDK: Auth0 es una plataforma de gestión de identidades y accesos que ofrece una solución completa de inicio de sesión y autenticación. Auth0 proporciona un SDK específico para Angular que facilita la implementación de la autenticación en tu aplicación Angular. Puedes integrarla con autenticación social, SSO (Single Sign-On), y mucho más.
3. Angular OAuth2 OIDC: Este módulo de Angular te permite implementar OAuth 2.0 y OpenID Connect (OIDC) en tu aplicación Angular. Es útil para la autenticación basada en tokens y funciona con proveedores de identidad como Google, Microsoft, Okta y otros.
4. ngx-auth: ngx-auth es una librería que proporciona componentes y servicios para simplificar la implementación de la autenticación en aplicaciones Angular. Facilita la gestión de sesiones de usuario, rutas protegidas y mucho más.
5. Angular JWT: Si trabajas con tokens JWT (JSON Web Tokens) para la autenticación, puedes utilizar esta librería para Angular. Facilita la decodificación y validación de tokens JWT y su almacenamiento seguro en la aplicación.
6. Angular DevKit: El Angular DevKit incluye una serie de herramientas y módulos que pueden ser útiles para la implementación de la autenticación en Angular. Puedes utilizar módulos como @angular-devkit/auth, que proporciona funciones útiles para la autenticación, como proteger rutas.
7. Angular Material: Angular Material es la biblioteca de diseño de componentes oficiales para Angular. Si deseas crear una interfaz de usuario de inicio de sesión con un aspecto profesional y coherente, puedes utilizar los componentes de Angular Material, como formularios, botones y diálogos.

Estas librerías y módulos pueden ahorrarte tiempo y esfuerzo al implementar la funcionalidad de login en tu aplicación Angular. La elección de la librería o módulo depende de tus necesidades específicas y de la integración con tu proveedor de autenticación preferido. Cada una de estas opciones tiene su propia documentación detallada y ejemplos de uso que te ayudarán a implementar la autenticación de manera efectiva en tu aplicación Angular.

Palabras finales

¡Listo! Has creado un sistema de login en Angular. Ten en cuenta que este es un ejemplo simple y que en una aplicación real, deberías implementar la autenticación de usuarios de manera segura y manejar las credenciales de forma adecuada. Además, es posible que desees utilizar un servicio de autenticación como Firebase para simplificar la gestión de usuarios.

Para llevarlo a producción, necesitarás un proveedor de hosting, o bien desbloquear los puertos y permitir el tráfico de tu firewall a través de tu router en 192.168.1.254.