Implementación de claves de paso en ASP.NET Core Blazor Web App

Prerrequisitos

SDK de .NET (.NET 10 o posterior)

Creación de Blazor Web App

Use las instrucciones siguientes para crear un nuevo Blazor Web App con ASP.NET Core Identity, que incluye compatibilidad con claves de acceso.

dotnet new blazor -au Individual -o BlazorWebAppPasskeys

Las instrucciones anteriores crean con Blazor Web App :

• ASP.NET Core Identity configurado para la autenticación de usuario mediante la -au|--authentication opción .
• Entity Framework Core con SQLite para el almacenamiento de datos.
• Registro de clave de paso y puntos de conexión de autenticación.
• Componentes de la interfaz de usuario para administrar claves de acceso.

Ejecutar la aplicación

dotnet watch

La siguiente guía se basa en una aplicación que se creó con cuentas individuales para el tipo de autenticación o scaffolding Identity de la aplicación en una aplicación existente.

Prerrequisitos

• Blazor Web App Existente (.NET 10 o posterior) con ASP.NET CoreIdentity
• SDK de .NET (.NET 10 o posterior)

Para obtener instrucciones sobre la migración, consulte Migración de una aplicación ASP.NET Core.

Guía de origen de referencia

Los vínculos de este artículo al origen de referencia de .NET cargan la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta para una versión específica, use la lista desplegable Cambiar ramas o etiquetas . Para obtener más información, consulta Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Actualización de Identity la versión del esquema

En Program.cs, actualice la configuración para usar la Identity versión 3 del esquema, que incluye compatibilidad con claves de acceso:

builder.Services.AddIdentityCore<ApplicationUser>(options =>
{
    options.SignIn.RequireConfirmedAccount = true;
    options.Stores.SchemaVersion = IdentitySchemaVersions.Version3;
})
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddSignInManager()
.AddDefaultTokenProviders();

Creación y ejecución de una migración de base de datos

dotnet ef migrations add AddPasskeySupport

dotnet ef database update

dotnet ef migrations add AddPasskeySupport

dotnet ef database update

Creación de clases de modelo passkey

Agregue las siguientes clases de modelo al proyecto en la Components/Account carpeta y actualice el BlazorWebCSharp._1.Components.Account espacio de nombres para que coincida con la aplicación (por ejemplo: Contoso.Components.Account):

• Components/Account/PasskeyInputModel.cs: contiene la credencial de clave de acceso JSON para las operaciones de inicio de sesión de clave de paso (Login componente) y la adición de claves de acceso (Passkeys componente).
• Components/Account/PasskeyOperation.cs: define la acción de autenticación que se va a realizar (PassKeySubmit componente), ya sea registrando una nueva clave de acceso (Create/0) o autenticando con una clave de acceso existente (Request/1).

Creación del PasskeySubmit componente

Agregue el siguiente PasskeySubmit componente para controlar las operaciones de clave de paso:

Components/Account/Shared/PasskeySubmit.razor

Adición de JavaScript para operaciones de clave de paso

Agregue el siguiente archivo JavaScript para controlar las interacciones de la API de WebAuthn:

Components/Account/Shared/PasskeySubmit.razor.js

Adición de puntos de conexión de clave de acceso

Actualice el IdentityComponentsEndpointRouteBuilderExtensions.cs archivo (o cree el archivo si no existe y llama MapAdditionalIdentityEndpoints al Program archivo) para incluir los puntos de conexión específicos de la clave de acceso:

/PasskeyCreationOptionspuntos de conexión y /PasskeyRequestOptions

Actualizar la página Inicio de sesión

Reemplace el componente existente Login por el siguiente componente y actualice el BlazorWebCSharp._1.Data espacio de nombres para que coincida con la aplicación (por ejemplo: Contoso.Components.Account.Data):

Components/Account/Pages/Login.razor

Adición de un método de redireccionamiento a la IdentityRedirectManager clase

Agregue el método siguiente a la IdentityRedirectManager clase en Components/Account/IdentityRedirectManager.cs:

public void RedirectToInvalidUser(
    UserManager<ApplicationUser> userManager, HttpContext context) =>
        RedirectToWithStatus("Account/InvalidUser",
            $"Error: Unable to load user with ID '{userManager.GetUserId(context.User)}'.",
            context);

Creación de páginas de administración de claves de paso para agregar y cambiar el nombre de las claves de acceso

Agregue el siguiente Passkeys componente para administrar las claves de acceso y actualice el BlazorWebCSharp._1.Data espacio de nombres para que coincida con la aplicación (por ejemplo: Contoso.Components.Account.Data):

Components/Account/Pages/Manage/Passkeys.razor

Agregue el siguiente RenamePasskey componente para cambiar el nombre de las claves de acceso y actualizar el BlazorWebCSharp._1.Data espacio de nombres para que coincida con la aplicación (por ejemplo: Contoso.Components.Account.Data):

Components/Account/Pages/Manage/RenamePasskey.razor

Actualizar el menú de navegación administrar

Agregue un vínculo a la página de administración de claves de acceso en el componente de ManageNavMenu la aplicación.

En Components/Account/Shared/ManageNavMenu.razor, agregue el siguiente NavLink componente para el Passkeys componente:

<li class="nav-item">
    <NavLink class="nav-link" href="Account/Manage/Passkeys">Passkeys</NavLink>
</li>

Incluir el archivo JavaScript

En el App componente (Components/App.razor), localice la etiqueta Blazor de script:

<script src="_framework/blazor.web.js"></script>

Inmediatamente después de la etiqueta de Blazor script, agregue una referencia al PasskeySubmit módulo de JavaScript:

<script src="Components/Account/Shared/PasskeySubmit.razor.js" type="module"></script>