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
- Abre Visual Studio y selecciona Crear un nuevo proyecto.
- Elige Blazor Server App como plantilla de proyecto.
- En las opciones de autenticación, selecciona Autenticación individual.
Blazor WebAssembly
- Abre Visual Studio y selecciona Crear un nuevo proyecto.
- Elige Blazor WebAssembly App como plantilla de proyecto.
- 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.