Gestión de Sesiones y Autenticación en Blazor WebAssembly y PHP

La gestión de sesiones y autenticación es un aspecto crucial en el desarrollo de aplicaciones web. En este artículo, exploraremos cómo implementar la autenticación en una aplicación Blazor WebAssembly utilizando PHP como backend. A través de ejemplos de código, aprenderás a gestionar el estado de autenticación y a realizar solicitudes a una API para verificar sesiones.

1. Introducción a la Autenticación

La autenticación es el proceso de verificar la identidad de un usuario. En aplicaciones modernas, esto a menudo se realiza utilizando tokens, como JWT (JSON Web Tokens). Estos tokens permiten que los usuarios se autentiquen una vez y luego accedan a diferentes recursos sin necesidad de volver a ingresar sus credenciales.

2. Implementación en PHP

Comencemos por crear un script PHP que valide un token JWT. Este script se encargará de verificar si el token proporcionado por el cliente es válido.

<?php
// Permitir el acceso desde cualquier origen
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

// Verifica si el token fue proporcionado como parámetro GET
if ($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['token'])) {
    $token = $_GET['token'];

    // URL de validación del token
    $url = "https://yourapi.com/validate_token";

    // Inicializa cURL
    $ch = curl_init($url);

    // Configura el encabezado con el token JWT
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        "Authorization: Bearer $token"
    ));

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    // Realiza la petición
    $response = curl_exec($ch);
    $httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

    if (curl_errno($ch)) {
        echo json_encode(['success' => false, 'message' => 'Error en la conexión: ' . curl_error($ch)]);
    } else {
        if ($httpcode == 200) {
            echo $response;
        } else {
            echo json_encode(['success' => false, 'message' => 'Token inválido o expirado']);
        }
    }
    curl_close($ch);
} else {
    echo json_encode(['success' => false, 'message' => 'Token no proporcionado']);
}
?>

2.1. Explicación del Código

  • CORS: Permitimos el acceso desde cualquier origen para facilitar las pruebas.
  • Método GET: Verificamos que el método de la solicitud sea GET y que el token esté presente.
  • cURL: Utilizamos cURL para realizar una petición a la API de validación del token.
  • Manejo de Errores: Se gestionan errores de conexión y respuestas no exitosas, devolviendo un mensaje adecuado.

3. Implementación en Blazor WebAssembly

Ahora, veamos cómo gestionar la autenticación en Blazor WebAssembly. Usaremos el AuthenticationProvider para manejar el estado de autenticación y verificar el token.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.JSInterop;
using System.Security.Claims;

public class AuthenticationProvider : AuthenticationStateProvider
{
    private readonly IJSRuntime _jsRuntime;

    public AuthenticationProvider(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task AuthVerify(NavigationManager navigation)
    {
        var token = await GetToken();

        if (string.IsNullOrEmpty(token))
        {
            navigation.NavigateTo("/session/auth");
            return;
        }

        try
        {
            using (HttpClient client = new HttpClient())
            {
                var response = await client.GetAsync($"https://yourapi.com/verify_token?token={token}");

                if (response.IsSuccessStatusCode)
                {
                    Login(token);
                }
                else
                {
                    navigation.NavigateTo("/session/auth");
                }
            }
        }
        catch (HttpRequestException ex)
        {
            Console.WriteLine($"Error de conexión: {ex.Message}");
        }
    }

    public void Login(string token)
    {
        _jsRuntime.InvokeVoidAsync("localStorage.setItem", "jwt_token", token);
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    public async Task<string> GetToken()
    {
        return await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "jwt_token");
    }
}

3.1. Explicación del Código

  • Estado de Autenticación: Usamos GetAuthenticationStateAsync para obtener el estado actual del usuario.
  • Verificación del Token: Realizamos una solicitud al backend para verificar el token.
  • Manejo de Redirección: Si el token no es válido, redirigimos al usuario a la página de autenticación.

4. Conclusiones

En este artículo, hemos aprendido cómo gestionar la autenticación en una aplicación Blazor WebAssembly utilizando PHP como backend. Implementar un sistema de autenticación sólido es esencial para proteger tus aplicaciones web y garantizar que solo los usuarios autorizados accedan a ciertos recursos.

Referencias