Autenticación con JWT, Angular 2 y Laravel 5

JWT, Angular 2 y Laravel 5

En este tutorial vamos a ver algo muy interesante, y es cómo crear un proceso de autenticación con JWT, Angular 2 y Laravel 5, hoy en día conocer y trabajar con JWT es algo necesario para prácticamente cualquier aplicación que tenga que autenticar usuarios entre dos partes, en este caso el servidor (Laravel 5), y el cliente (Angular 2).

Existe una gran herramienta llamada Auth0 que nos provee una api para poder realizar conexiones basadas en tokens con los lenguajes y frameworks más populares de hoy en día.

Nosotros vamos a utilizar la configuración que nos ofrece Auth0 a través de su librería utilizando parte de su configuración.

Enlaces de interés:

En esta ocasión nuestros proyectos van a estar separados, es decir, tendremos un proyecto con Laravel 5.2 y otro con Angular 2, desde Angular haremos una petición de login a Laravel y si todo funciona correctamente éste nos devolverá un token que podremos utilizar más adelante para autenticar al usuario logueado.

Configurar JWT, Angular 2 y Laravel 5

Lo primero que vamos a crear va a ser nuestro proyecto con Angular 2, así que empecemos por crear el archivo package.json para añadir las dependencias del proyecto.


En este momento ejecuta el siguiente comando en tu directorio.


Teniendo nuestras dependencias instaladas ya podemos añadir nuestro tsconfig.json para compilar los archivos .ts.


Ahora debemos crear el index.html para que nuestra aplicación se pueda mostrar, aquí cargamos dependencias y configuramos System para cargar la aplicación.


Con la línea “angular2-jwt”: “node_modules/angular2-jwt/angular2-jwt” mapeamos la librería angular2-jwt con un alias para posteriormente acceder a ella en nuestra aplicación, por lo tanto, podremos importar sus dependencias accediendo a angular2-jwt, el resto ya debemos conocerlo.

Llegados a este punto crear un directorio llamado src y dentro un archivo app.ts, sólo nos queda definir el contenido de este archivo que será el que implemente la lógica desde el cliente con Angular 2 y JWT.


Cómo puedes ver utilizamos dos tipos de peticiones http, la de angular 2 y la de authHttp, con esta última nuestro token será utilizado de forma automática y se enviará el header Autorization en cada petición, tenemos disponibles todas las peticiones más típicas del día a día.

El resto del código es Angular 2, si tienes dudas aquí tienes un curso desde 0 de Angular 2.

Ahora crea la vista principal de la aplicación, la cual le hemos dicho a nuestro componente que estará en src y se llamará app.html.


Simplemente utilizamos las rutas y todos los métodos de nuestra clase haciendo uso varias directivas de Angular 2.

Nuestra aplicación con Angular 2 y JWT ya está lista y la podemos lanzar, para ello simplemente ejecuta el siguiente comando.


Se abrirá una nueva ventana de tu navegador en la url http://localhost:3000, pero de momento no funcionará ya que debemos crear el proyecto con Laravel 5 y JWT.

Autenticando usuarios con Laravel 5 y JWT

Lo primero que debemos hacer es modificar nuestro composer.json añadiendo las siguientes dependencias.


Ahora ejecuta el siguiente comando para actualizar las dependencias.


Añade las siguientes líneas al array providers en config/app.php.


Y haz lo mismo con el array aliases.


Para publicar la configuración de JWTAuth simplemente ejecuta el siguiente comando desde la terminal.


Esto habrá generado un archivo en config llamado jwt.php.

Finalmente sólo nos queda generar la clave de seguridad para encriptar el token del usuario con JWTAuth, simplemente ejecuta el siguiente comando.

Configurar CORS en Laravel 5

Ahora vamos a publicar el archivo de configuración para habilitar el middleware cors en nuestra aplicación, simplemente ejecuta el siguiente comando el cual creará un archivo llamado cors.php en config.


Abre dicho archivo y haz la siguiente modificación para habilitar peticiones Options.


Si utilizas apache y tienes problemas con el header Autorization añade las siguientes líneas al .htaccess.

Haciendo login con JWT, Angular 2 y Laravel 5

Ahora ya estamos en condiciones para hacer login, así que añade la siguiente ruta a tu aplicación.


Cómo puedes ver utilizamos el middleware cors que hemos instalado previamente, ahora sólo necesitas crear el controlador UserController y añadir el siguiente código para procesar el login.


Con ese sencillo código estaremos haciendo login y diciéndole a Laravel 5 que no utilice el middleware jwt.auth en el método login, el resto es obtener los datos que enviamos con Angular 2 y comprobar si son correctos en base de datos.

Si ahora lanzas el servidor de Laravel con el siguiente comando y pulsas el botón login en la aplicación que hemos construido con Angular 2 y JWT verás que puedes hacer login siempre que el usuario exista, es decir, todo funciona correctamente.

Decodificar el token con Laravel 5 y JWT

Para decodificar el token con Laravel 5 y JWT simplemente debemos añadir la siguiente ruta a nuestra aplicación.


En esta ruta estamos utilizando dos middlewares, cors y jwt.auth, éste último comprobará si existe el token tanto en el header cómo en la query string e intentará decodificarlo en cada petición.

Si el usuario existe devolvemos su email, simplemente por temas de aprendizaje, no es algo que se deba hacer, en otro caso, devolvemos un 404 conforme el usuario no existe.

Para poder utilizar el middleware jwt.auth debemos modificar el archivo kernel.php.


El middleware jwt.refresh volverá a tratar de analizar el token en cada solicitud, a su vez lo actualizará invalidando así el viejo y lo devolverá como parte de la siguiente respuesta, con este evitamos que se vea comprometido un token ya expirado y se mejora la seguridad, algo a tener muy en cuenta.

En este punto nuestra aplicación es completamente funcional, tenemos tanto el cliente como el servidor y una conexión a través de JWT entre ambas partes, ahora sólo queda configurar la aplicación a nuestras necesidades, pero lo importante está hecho, espero que te haya parecido útil.

Descargar el código desde mi repositorio

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR