Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Autenticación Angular Con JWT

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Luis Chiabrera (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í:

Final Look

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.

JWT authorization flow

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.

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

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

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

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.

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

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.

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:

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

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

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:

Crear página de perfil

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

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.

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:

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.

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

  • 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.

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í:

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

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.