Autenticación Angular Con JWT

() translation by (you can also view the original English article)

La seguridad es una parte importante de cada aplicación web, y los desarrolladores deben asegurarse de que diseñan aplicaciones con autenticación segura. En este tutorial, aprenderá cómo implementar la autenticación basada en JWT en aplicaciones Angular con la ayuda de un simple servidor Express.

El código completo se puede encontrar en nuestro repositorio de GitHub. La aplicación que vamos a construir se verá así:

El concepto de tokens web de JSON

Un JSON Web Token (JWT) es básicamente un objeto representado por tres cadenas que se utilizan para transmitir información de usuario. Las tres cuerdas, que están separadas por puntos, son:

encabezamiento
carga útil
firma

Cuando un usuario inicia sesión en cualquier página web con su nombre de usuario y contraseña, el servidor de autenticación generalmente crea y envía un JWT. Este JWT se pasa junto con las subsiguientes llamadas de API al servidor. El JWT sigue siendo válido a menos que caduque o el usuario cierre sesión en la aplicación.

Este proceso se puede ilustrar en el diagrama a continuación.

Cookies vs. Almacenamiento Local

Usaremos almacenamiento local para almacenar tokens. El almacenamiento local es un medio por el cual los datos se almacenan localmente y solo se pueden eliminar a través de JavaScript o borrando la memoria caché en el navegador. Los datos almacenados en el almacenamiento local pueden persistir durante mucho tiempo. Las cookies, por otro lado, son mensajes que se envían desde el servidor al navegador y ofrecen un almacenamiento limitado.

Construyendo el Servidor Express

Comenzaremos por construir un servidor de servicios de fondo que contará con los siguientes puntos finales:

POST<webservice>/login
POST <webservice> / perfil

Comencemos por crear un directorio para la aplicación Express y luego ejecutar el comando npm init para configurar los archivos necesarios para el proyecto.

1	mkdir server
2	cd server
3	npm init

A continuación, cree un archivo server.js e instale los módulos: express, jsonwebtoken, cors y bodyParser.

1	touch server.js
2	npm install express jsonwebtoken cors bodyParser –save

Ahora abra server.js y comience importando los módulos.

// server.js
const cors = require('cors');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const express = require('express');

Luego cree una aplicación Express y defina la clave secreta que se utilizará para codificar y descodificar los detalles del usuario.

//CREATE EXPRESS APP
const app = express();
app.use(cors());
app.use(bodyParser.json());

// DECLARE JWT-secret
const JWT_Secret = 'your_secret_key';

No usaremos una base de datos para este ejemplo. Sin embargo, los conceptos serían similares si estuviera creando un servidor con respaldo de base de datos adecuado.

Para nuestro ejemplo, solo usaremos una variable para definir un usuario de prueba como se muestra a continuación.

1	var testUser = { email: 'kelvin@gmai.com', password: '1234'};

El último paso es crear rutas para autenticar al usuario.

app.post('/api/authenticate', (req, res) => {

  if (req.body) {
    var user = req.body;
    console.log(user)

    if (testUser.email===req.body.email && testUser.password === req.body.password) {
      var token = jwt.sign(user, JWT_Secret);
      res.status(200).send({
        signed_user: user,
        token: token
      });
    } else {
      res.status(403).send({
        errorMessage: 'Authorisation required!'
      });
    }
  } else {
    res.status(403).send({
      errorMessage: 'Please provide email and password'
    });
  }

});

Vamos a desglosar el código de la ruta anterior.

Primero verificamos si hay algún dato en el cuerpo de la solicitud. Si no se encuentran datos, le pedimos al usuario que ingrese algunos datos. En la ocasión en que el usuario ha proporcionado los datos correctos, lo comparamos con los datos del testUser y, si concuerda, usamos la identificación del usuario para generar un token único y enviar la respuesta al usuario.

Finalmente, creamos un punto final para ejecutar la aplicación.

1	app.listen(5000, () => console.log('Server started on port 5000'));

Nuestro back-end ahora está completo, y puede probarlo con Postman o CURL y ver el tipo de datos que se devolverán al usuario.

Construir una aplicación angular

Nuestra aplicación Angular contará con las siguientes páginas:

Inicio: esta página contendrá enlaces a las páginas de inicio de sesión y de perfil.
Inicio de sesión: en esta página, un usuario ingresará su correo electrónico y contraseña, que se enviarán al servidor para su autenticación. Si las credenciales son correctas, entonces se devolverá un token JWT y el usuario será redirigido a la página de perfil.
Perfil: esta es una página protegida a la que solo puede acceder un usuario con un token válido.

Cree una aplicación Angular y cree los componentes de Login y Profile como se muestra a continuación:

1	ng new angular6jwt
2	cd angular6jwt
3	ng g component Login
4	ng g component Profile

A continuación, agregue el código de la página de inicio en app.component.html.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<ul>
  <li><a class="nav-link" routerLink="/" routerLinkActive="active">Home</a>  </li>
  <li><a class="nav-link" routerLink="profile" routerLinkActive="active">Profile</a>  </li>
  <li style="float:right" > <a class="nav-link"  style="float:right" routerLink="login" routerLinkActive="active">Login</a> </li>
  <li style="float:right" > <a class ="nav-link" (click)="logout()" href="#">Logout</a></li>
</ul>
<div class="text-center">
  <p>
    Angular 6 Authentication with JWT Tutorial
  </p>
</div>
<router-outlet></router-outlet>


A continuación, importe el RouterModule y defina las rutas en app.module.ts.

import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'profile', component: ProfileComponent }
      
    
]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Crear página de inicio de sesión

La página de inicio de sesión contendrá dos campos de entrada para correo electrónico y contraseña, y un botón de envío como se muestra a continuación:

<h3>Login</h3>
<div>
  <div class="spacer">
    <label for="Email">Email</label>
    <input type="text" placeholder="Email" [(ngModel)]="email">
  </div>
  <div class="spacer">
    <label for="password">Password</label>
    <input type="password" placeholder="password" [(ngModel)]="password" class="form-control"/>
  </div>
  <div class="spacer">
    <button  type="submit" (click)="Login()">Login</button>
  </div>
</div>

Crear página de perfil

La página de perfil solo será un mensaje simple como se muestra a continuación:

1	<p>
2	If you can see this page, you are logged in!
3	</p>

Autentica Con JWT En Angular

Comenzaremos creando un Servicio Auth que facilitará la validación de la entrada y comunicación del usuario con el servidor.

1	// Create authentication service named Auth
2	ng g service Auth

Esto crea dos archivos, pero principalmente nos interesará el archivo auth.service.ts donde escribiremos todo el código que interactúa con el servidor. Comenzaremos por definir la API REST y el token como se muestra a continuación:

export class AuthService {

  api = 'https://localhost:3000/api';
  token;

}

A continuación, escribiremos el código que realiza una solicitud POST al servidor con las credenciales del usuario. Aquí, hacemos una solicitud a la API: si tiene éxito, almacenamos el token en localStorage y redirigimos al usuario a la página de perfil.

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  uri = 'http://localhost:5000/api';
  token;

  constructor(private http: HttpClient,private router: Router) { }
  login(email: string, password: string) {
    this.http.post(this.uri + '/authenticate', {email: email,password: password})
    .subscribe((resp: any) => {
    
      this.router.navigate(['profile']);
      localStorage.setItem('auth_token', resp.token);
     
      })
      );
      
    }

}

También definimos las funciones de inicio y cierre de sesión como se muestra a continuación.

logout() {
    localStorage.removeItem('token');
  }

  public get logIn(): boolean {
    return (localStorage.getItem('token') !== null);
  }

cerrar sesión: borra el token del almacenamiento local
logIn: devuelve una propiedad booleana que determina si un usuario está autenticado

Luego actualizamos la propiedad logIn en la página de inicio como se muestra.

<ul>
  <li><a class="nav-link" routerLink="/" routerLinkActive="active">Home</a>  </li>
  <li><a class="nav-link" routerLink="profile" routerLinkActive="active" *ngIf="authService.logIn">Profile</a>  </li>
  <li style="float:right" > <a class="nav-link"  style="float:right" routerLink="login" routerLinkActive="active" *ngIf="!authService.logIn">Login</a> </li>
  <li style="float:right" > <a class ="nav-link" (click)="logout()" href="#" *ngIf="authService.logIn">Logout</a>  </li>
</ul>

Respondiendo a los eventos del usuario

Ahora que hemos terminado con el código que interactúa con el servidor, pasaremos a manejar los eventos generados por el usuario para el front-end.

Escribiremos la función que escuchará los eventos de clic desde la página de inicio de sesión y luego pasaremos los valores al AuthService para autenticar al usuario. Actualice su archivo login.component.ts para que se vea así:

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

import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  email = '';
  password = '';
  
  constructor(private authService: AuthService) {
    
  }
  Login() {
  console.log("you are logging in")
  this.authService.login(this.email, this.password)
  
  }

  ngOnInit() { }
}

Ahora, si ejecuta ng serve y navega a http: // localhost: 4200, puede probar su aplicación.

ng serve

Haga clic en el enlace de inicio de sesión y proporcione las credenciales de usuario; recuerde que las credenciales válidas se definen en la aplicación Express. Ahora, cuando haga clic en el botón de inicio de sesión, será redirigido a la página de perfil.

Conclusión

En este tutorial, aprendió cómo comenzar con la autenticación JWT en Angular. Ahora puede autenticar y autorizar con JWT en sus aplicaciones Angular. Hay muchos aspectos de JWT que no se trataron en este tutorial. ¡Vea si puede explorar algunos de ellos por su cuenta!

Tenga en cuenta que este tutorial fue escrito para Angular 6, pero los mismos conceptos deberían funcionar con Angular 2 o Angular 4.