Implementando ASP.NET Core Identity en Blazor: Guía Completa

Implementando ASP.NET Core Identity en Blazor Guía Completa

ASP.NET Core Identity es una solución integral para gestionar la autenticación y autorización de usuarios en aplicaciones web. En este tutorial, aprenderás cómo integrar Identity en proyectos Blazor Server y Blazor WebAssembly. Veremos cómo proteger páginas, manejar roles y claims, y cómo utilizar componentes de Blazor para crear aplicaciones seguras.

¿Qué es ASP.NET Core Identity?

ASP.NET Core Identity es un sistema de autenticación que permite crear, gestionar y validar usuarios, roles y políticas de seguridad. En proyectos Blazor, puedes usar Identity para gestionar el acceso a diferentes secciones de tu aplicación y proteger tu API con tokens o cookies.

Paso 1: Crear un Proyecto Blazor con Soporte de Identity

Lo primero que debes hacer es crear un proyecto Blazor con soporte para Identity.

Blazor Server

  1. Abre Visual Studio y selecciona Crear un nuevo proyecto.
  2. Elige Blazor Server App como plantilla de proyecto.
  3. En las opciones de autenticación, selecciona Autenticación individual.

Blazor WebAssembly

  1. Abre Visual Studio y selecciona Crear un nuevo proyecto.
  2. Elige Blazor WebAssembly App como plantilla de proyecto.
  3. En las opciones de autenticación, selecciona Autenticación individual (cuentas almacenadas en la aplicación).

Con esta configuración, se generará automáticamente el soporte para Identity, lo que te permitirá gestionar usuarios, roles y claims desde el primer momento.

Paso 2: Configuración Inicial de Identity

Una vez que has creado el proyecto, es importante asegurarse de que la configuración de Identity esté correctamente establecida. Dependiendo de si trabajas con Blazor Server o Blazor WebAssembly, los pasos varían ligeramente.

Configuración en Blazor Server

En Blazor Server, la configuración se realiza en el archivo Startup.cs. A continuación, se muestra cómo agregar la configuración de Identity y habilitar la autenticación y autorización.

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddDbContext<ApplicationDbContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

        services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
            .AddEntityFrameworkStores<ApplicationDbContext>();

        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddAuthentication(); // Añadir autenticación
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthentication(); // Añadir autenticación
        app.UseAuthorization();  // Añadir autorización

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

Configuración en Blazor WebAssembly

En Blazor WebAssembly, la configuración se realiza en Program.cs. La clave aquí es asegurarse de que la autenticación esté correctamente configurada para proteger la API.

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("#app");

        builder.Services.AddHttpClient("BlazorApp.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
            .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

        builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorApp.ServerAPI"));

        builder.Services.AddApiAuthorization(); // Añadir autenticación para Blazor WASM

        await builder.Build().RunAsync();
    }
}

Paso 3: Protegiendo Páginas con Autorización

Una vez que Identity esté configurado, puedes proteger las páginas y componentes de tu aplicación Blazor utilizando el componente <AuthorizeView> o el atributo [Authorize].

Usando el Componente <AuthorizeView>

El componente <AuthorizeView> te permite mostrar contenido basado en el estado de autenticación del usuario. Aquí tienes un ejemplo de cómo usarlo:

<AuthorizeView>
    <Authorized>
        <h3>Bienvenido, usuario autenticado.</h3>
    </Authorized>
    <NotAuthorized>
        <h3>No tienes acceso a esta página. Por favor inicia sesión.</h3>
    </NotAuthorized>
</AuthorizeView>

Este código mostrará diferentes mensajes dependiendo de si el usuario está autenticado o no.

Protegiendo una Página Completa

Si deseas proteger una página completa, puedes agregar el atributo [Authorize] en la página o componente de Blazor:

@page "/dashboard"
@attribute [Authorize]

<h3>Panel de Control</h3>

<p>Solo usuarios autenticados pueden ver esta página.</p>

Con esto, solo los usuarios autenticados podrán acceder a esta página.


Paso 4: Trabajando con Roles y Claims

En Identity, puedes asignar roles a los usuarios y proteger secciones de tu aplicación para que solo sean accesibles a usuarios con roles específicos.

Mostrar Contenido Basado en Roles

Si deseas mostrar contenido solo a usuarios que pertenezcan a un rol específico, puedes usar el componente <AuthorizeView> con la propiedad Roles:

<AuthorizeView Roles="Admin">
    <Authorized>
        <h3>Bienvenido, administrador.</h3>
    </Authorized>
    <NotAuthorized>
        <h3>No tienes acceso a esta página.</h3>
    </NotAuthorized>
</AuthorizeView>

Este ejemplo asegura que solo los usuarios en el rol “Admin” puedan ver el contenido.


Paso 5: Proteger la API con Identity

Si estás trabajando con Blazor WebAssembly y tienes una API, puedes protegerla utilizando Identity y autenticación con tokens JWT o cookies.

Proteger un Endpoint de API

Para proteger un endpoint en tu API, simplemente añade el atributo [Authorize] en el controlador o en las acciones que desees proteger:

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class SecureController : ControllerBase
{
    [HttpGet]
    public IActionResult GetSecureData()
    {
        return Ok("Este es un endpoint protegido.");
    }
}

Con esto, solo los usuarios autenticados podrán acceder al endpoint.


Implementar ASP.NET Core Identity en Blazor te permite añadir un sistema robusto de autenticación y autorización a tu aplicación, asegurando que solo los usuarios autorizados puedan acceder a contenido sensible. Tanto en Blazor Server como en Blazor WebAssembly, la integración de Identity es bastante directa y sigue principios similares a los de otras aplicaciones ASP.NET Core.

Con la posibilidad de gestionar roles, claims y proteger API con tokens, puedes crear aplicaciones seguras y flexibles que se adaptan a las necesidades de cualquier negocio.


Este tutorial te proporciona una base sólida para empezar a trabajar con Identity en Blazor, pero no dudes en personalizar la solución según las necesidades de tu proyecto.

Te puede interesar...

Deja un comentario