¿Qué es Laravel Sanctum? SPA y API Tokens
Laravel Sanctum es una herramienta de autenticación de Laravel que proporciona una forma simple de permitir que las aplicaciones de SPA (Single-Page Application) y aplicaciones móviles autentiquen a sus usuarios mediante el uso de tokens o cookies.
Sanctum proporciona toda la lógica necesaria para permitir que las aplicaciones realicen la autenticación y obtengan tokens de acceso, que luego pueden utilizar para autenticar las solicitudes a las API de la aplicación. Alternativamente a los tokens, Sanctum también proporciona la capacidad de autenticar a los usuarios haciendo uso de cookies, lo cubriremos más adelante.
En resumen, Laravel Sanctum es una herramienta de autenticación diseñada para facilitar la autenticación de usuarios en aplicaciones SPA y móviles a través de la autenticación de tokens, y también proporciona la capacidad de autenticar a los usuarios mediante la autenticación de cookies en aplicaciones tradicionales de Laravel.
Instalar Laravel Sanctum
Abre una consola y dirígete a la carpeta del proyecto Laravel donde deseas instalar Sanctum. A continuación, ejecuta el siguiente comando para instalar Sanctum a través de Composer:
Luego, ejecuta el siguiente comando para publicar los archivos de configuración de Sanctum:
A continuación, ejecuta el siguiente comando para crear la tabla de tokens de acceso en la base de datos:
El comando anterior habrá creado la tabla personal_access_tokens, utilizada por Sanctum cuando hacemos uso de tokens, cubriremos este tema más adelante.
Autenticación con Laravel Sanctum y API Tokens
Lo primero que debemos hacer es asegurarnos que el modelo User de nuestra aplicación está haciendo uso del trait HasApiTokens, ya que este trait es el que nos permitirá gestionar los tokens de Sanctum.
Si tienes dudas acerca de los traits, no te pierdas esta entrada, lo explico todo en detalle.
Controlador para gestionar los API Tokens de Sanctum
A continuación, vamos a crear un controlador Api que nos permita iniciar y cerrar sesión con los API Tokens de Laravel Sanctum.
Ahora, añadamos lógica a nuestro controlador, dos métodos, uno para iniciar sesión y generar un token válido para ese usuario y otro para cerrar sesión e invalidar el token generado anteriormente.
Gracias al trait HasApiTokens podemos interactuar con tokens desde el modelo usuario fácilmente, tanto crear como eliminar.
Rutas API para probar los API Tokens de Sanctum
Ahora abre el archivo de rutas Api routes/api.php y reemplaza el código por el siguiente.
La ruta login está fuera del middleware sanctum, el motivo es que esta ruta no requiere protección.
Las rutas user y logout están protegidas por el middleware sanctum, de esta forma, si el token no es enviado o es inválido, los usuarios no podrán acceder a estos recursos.
Probando las rutas Api de Sanctum con cURL
La forma más sencilla de probar si nuestro sistema de API Tokens con Sanctum funciona es hacer algunas peticiones con cURL.
La respuesta a la ruta login deberá ser la siguiente o similar, es decir, un token.
Ahora veamos como obtener el usuario identificado.
Fíjate cómo en esta petición ya estamos enviando el token obtenido en la cabecera Authorization, es necesario hacerlo así ya que Laravel Sanctum estará atento a esta cabecera para saber si el token es válido.
La respuesta obtenida deberá ser el usuario que se ha identificado con el token utilizado.
Revocando API Tokens en Sanctum
Finalmente, veamos cómo invalidar el token a través del proceso de logout que hemos preparado.
Con esto lo que haremos será eliminar todos los tokens vinculados a este usuario en la tabla de personal_access_tokens, de esta forma cuando el usuario desee volver a acceder a los recursos protegidos por Sanctum, deberá solicitar un nuevo token.
La respuesta obtenida en este caso deberá ser un mensaje como el siguiente.
También sería posible eliminar únicamente el token utilizado para la identificación, o un token específico de la siguiente forma:
Hasta aquí hemos cubierto de forma completa la autenticación de Laravel Sanctum con API Tokens, ahora veamos qué podemos hacer con las cookies.
Autenticación con Laravel Sanctum y Cookies utilizando Vue
La autenticación vía Cookies con Laravel Sanctum es utilizada para aplicaciones SPA, Vue, React o Svelte son grandes ejemplos de aplicaciones SPA (aunque se pueden desarrollar de otros tipos).
Es importante tener en cuenta que para que Laravel Sanctum funcione en modo SPA a través de Cookies las aplicaciones Laravel y Vue en este caso deben estar en el mismo dominio, pudiendo trabajar en diferentes subdominios, pero con el mismo dominio base.
Configurando Laravel Sanctum en modo SPA
Dicho esto, o primero que debemos hacer para habilitar la autenticación con Cookies en Laravel Sanctum es actualizar el archivo app/Http/Kernel.php añadiendo lo siguiente:
A continuación, ajusta el .env con las siguientes credenciales.
Configurar Axios en el cliente
Ahora vamos a crear una pequeña configuración para Axios que nos permita realizar las peticiones a Laravel con la configuración necesaria en cada caso, cabecera, tokens etcétera.
Para utilizar esta configuración de Axios en tu proyecto Vue simplemente debes añadir un import en tu archivo app.js o main.js.
Protección CSRF en aplicaciones SPA con Laravel Sanctum
Para autenticarnos en nuestra SPA, la página de "inicio de sesión" primero debe realizar una solicitud al endpoint ya definido por Laravel Sanctum /sanctum/csrf-cookie, con esto podremos inicializar la protección CSRF para la aplicación:
Durante esa solicitud, Laravel establecerá una cookie XSRF-TOKEN que contiene el token CSRF actual. Luego, este token se debe pasar en un encabezado X-XSRF-TOKEN en solicitudes posteriores, algo que Axios hará automáticamente por nosotros.
Autenticación SPA en Laravel Sanctum
Una vez que se haya inicializado la protección CSRF, debemos realizar una solicitud POST a la ruta /login de nuestra aplicación Laravel. Esta ruta /login puede implementarse manualmente o mediante un paquete de autenticación sin interfaz como Laravel Fortify.
Si la solicitud de inicio de sesión es exitosa, el usuario será autenticado y las solicitudes posteriores a las rutas de nuestra aplicación se autenticarán automáticamente a través de la cookie de sesión que la aplicación Laravel emitió al cliente. Además, dado que nuesta aplicación ya realizó una solicitud a la ruta /sanctum/csrf-cookie, las solicitudes posteriores deberían recibir automáticamente protección CSRF siempre que tu cliente HTTP de JavaScript envíe el valor de la cookie XSRF-TOKEN en los encabezados X-XSRF-TOKEN.
CORS en aplicaciones SPA en Laravel Sanctum
Para cualquier problema relacionado con CORS en tu aplicación, revisa el archivo config/cors.php de Laravel, desde ahí podrás realizar todos los ajustes que necesites.
Espero que esta entrada te haya ayudado a implementar autenticación con API Tokens y Cookies con Laravel Sanctum. Si quieres desarrollar conmigo lo que hemos visto en esta entrada, no te pierdas el curso de Laravel Sanctum.