Implementación de Autenticación con IdentityServer4 en Blazor WebAssembly

Introducción

IdentityServer4 es una solución de código abierto que permite implementar la autenticación y la autorización para aplicaciones web y APIs utilizando los estándares OAuth 2.0 y OpenID Connect. En este tutorial, aprenderás cómo configurar e implementar la autenticación utilizando IdentityServer4 en una aplicación Blazor WebAssembly.

Paso 1: Configuración de IdentityServer4

1. Instalación de IdentityServer4: Comienza creando un nuevo proyecto ASP.NET Core y añadiendo IdentityServer4 a través de NuGet:

dotnet add package IdentityServer4

Configuración de IdentityServer4: En el archivo Program.cs, configura IdentityServer4 en el método ConfigureServices:

builder.Services.AddIdentityServer()
        .AddDeveloperSigningCredential()
        .AddInMemoryApiResources(Config.Apis)
        .AddInMemoryClients(Config.Clients)
        .AddInMemoryIdentityResources(Config.IdentityResources);

Configuración de Clientes y Recursos: Define los clientes y los recursos en la clase Config:

public static class Config
{
    public static IEnumerable<ApiResource> Apis =>
        new ApiResource[]
        {
            new ApiResource("api1", "My API")
        };

    public static IEnumerable<Client> Clients =>
        new Client[]
        {
            new Client
            {
                ClientId = "client",
                AllowedGrantTypes = GrantTypes.Code,
                RequirePkce = true,
                RequireClientSecret = false,
                RedirectUris = { "https://localhost:5001/authentication/login-callback" },
                PostLogoutRedirectUris = { "https://localhost:5001/authentication/logout-callback" },
                AllowedCorsOrigins = { "https://localhost:5001" },
                AllowedScopes = { "openid", "profile", "api1" }
            }
        };

    public static IEnumerable<IdentityResource> IdentityResources =>
        new IdentityResource[]
        {
            new IdentityResources.OpenId(),
            new IdentityResources.Profile()
        };
}

Paso 2: Configuración de Blazor WebAssembly

1. Configuración de Autenticación: En el archivo Program.cs, configura la autenticación para la aplicación Blazor WebAssembly:

builder.Services.AddOidcAuthentication(options =>
{
    options.ProviderOptions.Authority = "https://localhost:5000";
    options.ProviderOptions.ClientId = "client";
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.DefaultScopes.Add("openid");
    options.ProviderOptions.DefaultScopes.Add("profile");
    options.ProviderOptions.DefaultScopes.Add("api1");
});

Protección de Páginas: Puedes proteger páginas específicas de tu aplicación Blazor WebAssembly utilizando el atributo Authorize:

@attribute [Authorize]

Paso 3: Prueba de la Autenticación

¡Ahora tu aplicación Blazor WebAssembly debería estar configurada para autenticar a través de IdentityServer4! Prueba la autenticación iniciando sesión y asegurándote de que puedes acceder a las páginas protegidas.

IdentityServer4 es una solución robusta y flexible para implementar la autenticación en aplicaciones web y APIs. En este tutorial, has aprendido cómo configurar e implementar la autenticación utilizando IdentityServer4 en una aplicación Blazor WebAssembly. Con estos conocimientos, podrás proporcionar una experiencia de autenticación segura y confiable para tus usuarios en aplicaciones Blazor.