Configurar Laravel Sanctum para la autenticación SPA y por API Tokens

- Andrés Cruz

In english
Configurar Laravel Sanctum para la autenticación SPA y por API Tokens

Laravel Sanctum es un paquete para la autenticación de aplicaciones de página única (SPAs) y aplicaciones móviles que podemos usar para proteger la Rest Api mediante autenticación requerida; Laravel Sanctum y APIs simples basadas en tokens; recuerda que no es tan directa como agregar una sesión, y esto se debe a que una Rest Api se recomienda que sea sin estado y es aquí donde entra Laravel Sanctum al juego. Permite que cada usuario de su aplicación genere múltiples tokens de API para su cuenta. Laravel Sanctum proporciona un sistema de autenticación liviano para SPAs y API simples

Usando Laravel Santum nos aseguramos de que solo los usuarios autenticados puedan acceder a las rutas que lo requieran.

La idea detrás de Sanctum es la de proteger las API de las aplicaciones Laravel mediante autenticación y tokens de acceso. Al hacerlo, se garantiza que solo se permitan solicitudes autenticadas y autorizadas, lo que a su vez asegura la integridad de la aplicación y los datos involucrados. Espero que esto te haya ayudado a entender un poco más sobre la teoría detrás de Laravel Sanctum.

Laravel Sanctum nos ofrece dos esquemas para trabajar.

1 Autenticación vía SPA

Esto es útil cuando tenemos una página SPA y quieres agregar autenticación par proteger una Rest Api y acceder al usuario; esta opción se basa en un esquema entre autenticación por sesión y cookies qué tenemos que configurar; vale decir, que es la más sencilla de las dos:

A nivel del kernel, tenemos que habilitar el servicio de cookies y sesión para Sanctum:

//App/Http/Kernel
 
//***
class Kernel extends HttpKernel
{
    //***
 
        'api' => [      \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Especificar el dominio que vas a emplear para la autenticación basado en las cookies en el archivo de config/sanctum.php:

  'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1,laraprimerospasos.test',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

Si estás empleando Mac o Linux con Sail, no hace falta modificar este archivo ya que, el localhost se encuentra presente; también, puedes colocar la URL de tu dominio en producción.

En el archivo de config/cors.php tienes que habilitar el supports_credentials en true.

Para poder emplear axios (que lo haremos más adelante, debes de buscar el archivo resources/js/bootstrap.js y colocar:

axios.defaults.withCredentials = true;

Esto es para habilitar el uso de las cookies con las credenciales del usuario, y poder usarlo de manera transparente con axios.

Finalmente, ya con esto, podemos emplear el middleware para la autenticación de las rutas; de manera ejemplificada, protegeremos un conjunto de rutas:

Route::group(['middleware' => 'auth:sanctum'], function () {
    Route::resource('category', CategoryController::class)->except(["create", "edit"]);
    Route::resource('post', PostController::class)->except(["create", "edit"]);
});

Por lo demás lo único que tienes que hacer es iniciar sesión y ya estamos listos; puedes usar este esquema con axios.

2 En base a API Tokens

El siguiente esquema es más manual y a la final es una autenticación en base a tokens; para ello, ahora al momento de autenticarnos, generamos el tokens de autenticación:

Antes de comenzar, vamos a deshabilitar el esquema anterior de Sanctum para la autenticación vía SPA:

'api' => [           //\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
***
],

Crear tokens

Para crear los tokens para nuestros usuarios, vamos a crear una función de login que permite generar estos tokens (esta función también podrías emplear en la autenticación vía SPA pero sin generar el token):

php artisan make:controller Api/UserController

En el cual, definiremos el siguiente contenido:

<?php
 
namespace App\Http\Controllers\Api;
 
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
 
class UserController extends Controller
{
    public function login(Request $request)
    {
        $credentials = [
            'email' => $request->email,
            'password' => $request->password
        ];
 
        if(Auth::attempt($credentials)){
            $token = Auth::user()->createToken('myapptoken')->plainTextToken;
 
            return response()->json($token);
        }
        return response()->json("Usuario y/o contraseña inválido");
    }
}

Importante notar que Sanctum ya viene instalado en los proyectos modernos de Laravel; todo este material forma parte de mi curso completo de Laravel y mi libro sobre Laravel.

En la entrada en la cual creamos un token de auteticación con Laravel Sanctum vemos como seguir trabajando con santum.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.