Ejercicio: configuración de la compatibilidad con Identity

  • 15 minutos

Identity funciona de fábrica sin ninguna personalización. En esta unidad, Identity se agrega a un proyecto existente de Razor Pages de ASP.NET Core.

Obtención y apertura del proyecto de inicio

Nota

Si quiere usar .devcontainer en GitHub Codespaces, vaya al repositorio de sus codespaces para MicrosoftDocs/mslearn-secure-aspnet-core-identity. Cree un espacio de código mediante la rama main y, después, vaya al paso 3.

  1. En una ventana de terminal, ejecute el comando siguiente para obtener el proyecto de inicio:

    git clone https://github.com/MicrosoftDocs/mslearn-secure-aspnet-core-identity

  2. Cambie al directorio del código fuente e inicie Visual Studio Code:

    cd mslearn-secure-aspnet-core-identity
code .

    Se abre Visual Studio Code. Acepte las indicaciones para instalar extensiones recomendadas, o bien seleccione Volver a abrir en contenedor si quiere usar .devcontainer.

    Sugerencia

    Si pierde el mensaje para volver a abrir en el contenedor, presione Ctrl+Mayús+P para abrir la paleta de comandos y, después, busque y seleccione Dev Containers: Reopen in Container (Contenedores de desarrollo: volver a abrir en el contenedor).

  3. Una vez que el proyecto se cargue (localmente o en el contenedor), presione Ctrl+Mayús+` para abrir un nuevo panel de terminal.

  4. En el nuevo panel de terminal, establezca la ubicación en el directorio RazorPagesPizza :

    cd RazorPagesPizza

  5. En el panel Explorador, expanda el directorio RazorPagesPizza para ver el código. RazorPagesPizza es el directorio del proyecto. A medida que continúe, asuma que todas las rutas descritas en este módulo son relativas a esta ubicación.

Exploración de la aplicación

Ahora se ejecutará la aplicación para obtener una introducción rápida.

  1. En el panel de terminal, compile el proyecto y ejecute la aplicación:

    dotnet run

  2. Observe la dirección URL que se muestra en la salida del terminal. Por ejemplo: https://localhost:7192.

  3. Abra la aplicación en el explorador; para ello, seleccione la dirección URL con Ctrl+clic.

    Importante

    Si usa .devcontainer en Docker, el certificado SSL del interior del contenedor no será de confianza para el explorador. Para ver la aplicación web, debe realizar una de las acciones siguientes:

    • Omita el error del certificado. Si usa Microsoft Edge, seleccione Opciones avanzadas y Continuar a localhost (no recomendado). Los detalles varían según el explorador.
    • Guarde el certificado y agréguelo a las entidades de certificación de confianza.
    • Importe un certificado de desarrollo existente dentro del contenedor. Para obtener más información, vea los comentarios generados en ./devcontainer/devcontainter.json.

    Si decide importar un certificado de desarrollo existente dentro del contenedor, la ruta del contenedor /root/.aspnet/ se expone como .devcontainer/persisted-data/.aspnet fuera del contenedor. Es para su comodidad.

    Si usa .devcontainer en GitHub Codespaces, no se necesita ninguna acción. Codespaces controla automáticamente la conexión SSL de proxy.

  4. Explore la aplicación web en el explorador. Con los vínculos del encabezado:

    1. Vaya a Pizza List
    2. Vuelva a Inicio.

    Observe que no tiene que autenticarse.

  5. Presione Ctrl+C en el panel de terminal para detener la aplicación.

Adición de Identity de ASP.NET Core al proyecto

La implementación de Identity predeterminada se puede agregar con las herramientas de línea de comandos de dotnet.

  1. Instale el proveedor de scaffolding de código ASP.NET Core:

    dotnet tool install dotnet-aspnet-codegenerator --version 6.0.2 --global

    El proveedor de scaffolding es una herramienta de .NET Core que:

    • Se usa para agregar los componentes predeterminados de Identity al proyecto.
    • Habilita la personalización de los componentes de la interfaz de usuario de Identity en la unidad siguiente.
    • Se invoca a través de dotnet aspnet-codegenerator en este módulo.

  2. Agregue los siguientes paquetes NuGet al proyecto:

    dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --version 6.0.2
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 6.0.3
dotnet add package Microsoft.AspNetCore.Identity.UI --version 6.0.3
dotnet add package Microsoft.EntityFrameworkCore.Design --version 6.0.3
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 6.0.3

    Estos paquetes instalan plantillas y dependencias de generación de código que usa el proveedor de scaffolding.

    Sugerencia

    Para ver los generadores disponibles, haga lo siguiente:

    • En el shell de comandos, ejecute dotnet aspnet-codegenerator -h.
    • Cuando se encuentre en Visual Studio, haga clic con el botón derecho en Explorador de soluciones y seleccione Agregar>Nuevo elemento con scaffold.

  3. Use el proveedor de scaffolding para agregar los componentes de Identity predeterminados al proyecto. Ejecute el siguiente comando en el terminal:

    dotnet aspnet-codegenerator identity --useDefaultUI --dbContext RazorPagesPizzaAuth

    En el comando anterior:

    • El generador identificado como identity se usa para agregar el marco de identidad al proyecto.
    • La opción --useDefaultUI indica que se usa una biblioteca de clases de Razor (RCL) que contiene los elementos predeterminados de la interfaz de usuario. Bootstrap se usa para aplicar estilo a los componentes.
    • La opción --dbContext especifica el nombre de una clase de contexto de base de datos de EF Core que se va a generar.

    La siguiente estructura de directorios Areas aparece en el directorio RazorPagesPizza:

    • Areas
      • Identity (se muestra en la misma línea que Áreas)
        • Data
          • RazorPagesPizzaAuth.cs
        • Pages
          • _ValidationScriptsPartial.cshtml
          • _ViewStart.cshtml

    Sugerencia

    Si el directorio Areas no aparece automáticamente en el panel Explorador, seleccione el botón Actualizar explorador en el encabezado MSLEARN-SECURE-ASPNET-CORE-IDENTITY del panel Explorador.

    Las áreas proporcionan una manera de crear particiones de una aplicación web de ASP.NET Core en grupos funcionales más pequeños.

    El proveedor de scaffolding también ha realizado los cambios resaltados a continuación en Program.cs, con el formato modificado para mejorar la legibilidad:

    using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection"); 
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();
      
// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

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

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();

app.Run();

    En el código anterior:

    • La cadena de conexión RazorPagesPizzaAuthConnection se lee desde appsettings.json.
    • La clase de contexto de base de datos de EF Core, llamada RazorPagesPizzaAuth, se configura con la cadena de conexión.
    • Se registran los servicios de Identity, incluidos la interfaz de usuario predeterminada, los proveedores de tokens y la autenticación basada en cookies.
      • .AddDefaultIdentity<IdentityUser> indica a los servicios de Identity que usen el modelo de usuario predeterminado.
      • La expresión lambda options => options.SignIn.RequireConfirmedAccount = true especifica que los usuarios deben confirmar sus cuentas de correo electrónico.
      • .AddEntityFrameworkStores<RazorPagesPizzaAuth>() especifica que Identity usa el almacén predeterminado de Entity Framework Core para su base de datos. Se usa la clase RazorPagesPizzaAuthDbContext.
    • app.UseAuthentication(); habilita las funcionalidades de autenticación. Más concretamente, se agrega una instancia del middleware de autenticación ASP.NET Core a la canalización de control de solicitudes HTTP de la aplicación.

Configuración de la conexión de base de datos

La sección ConnectionStrings de appsettings.jsondebería tener un aspecto similar al código JSON siguiente:

"ConnectionStrings": {
    "RazorPagesPizzaAuthConnection": "Server=(localdb)\\mssqllocaldb;Database=RazorPagesPizza;Trusted_Connection=True;MultipleActiveResultSets=true"
}

Esta cadena de conexión apunta a una instancia de LocalDB de SQL Server Express de forma predeterminada. Si usa .devcontainer, debe cambiar la cadena de conexión de la siguiente forma. Guarde los cambios.

"ConnectionStrings": {
    "RazorPagesPizzaAuthConnection": "Data Source=localhost;Initial Catalog=RazorPagesPizza;Integrated Security=False;User Id=sa;Password=P@ssw0rd;MultipleActiveResultSets=True"
}

Esto actualiza la cadena de conexión para conectarse a la instancia de SQL Server dentro del contenedor.

Actualizar la base de datos

Ahora que ha comprobado la cadena de conexión, puede generar y ejecutar una migración para compilar la base de datos.

  1. Ejecute el siguiente comando para compilar la aplicación:

    dotnet build

    La compilación se ejecuta correctamente sin advertencias. Si se produce un error en la compilación, compruebe el resultado con el fin de obtener información para solucionar problemas.

  2. Instale la herramienta de migración de Entity Framework Core:

    dotnet tool install dotnet-ef --version 6.0.3 --global

    La herramienta de migración es una herramienta de .NET que:

    • Genera código denominado migración para crear y actualizar la base de datos que admite el modelo de entidad de Identity.
    • Ejecuta migraciones en una base de datos existente.
    • Se invoca a través de dotnet ef en este módulo.

  3. Cree y ejecute una migración de EF Core para actualizar la base de datos:

    dotnet ef migrations add CreateIdentitySchema
dotnet ef database update

    La migración de EF Core CreateIdentitySchema ha aplicado un script de cambios del lenguaje de definición de datos (DDL) para crear las tablas que son compatibles con Identity. Por ejemplo, en la salida siguiente se muestra una instrucción CREATE TABLE generada por la migración:

    info: Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (98ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      CREATE TABLE [AspNetUsers] (
          [Id] nvarchar(450) NOT NULL,
          [UserName] nvarchar(256) NULL,
          [NormalizedUserName] nvarchar(256) NULL,
          [Email] nvarchar(256) NULL,
          [NormalizedEmail] nvarchar(256) NULL,
          [EmailConfirmed] bit NOT NULL,
          [PasswordHash] nvarchar(max) NULL,
          [SecurityStamp] nvarchar(max) NULL,
          [ConcurrencyStamp] nvarchar(max) NULL,
          [PhoneNumber] nvarchar(max) NULL,
          [PhoneNumberConfirmed] bit NOT NULL,
          [TwoFactorEnabled] bit NOT NULL,
          [LockoutEnd] datetimeoffset NULL,
          [LockoutEnabled] bit NOT NULL,
          [AccessFailedCount] int NOT NULL,
          CONSTRAINT [PK_AspNetUsers] PRIMARY KEY ([Id])
      );

    Sugerencia

    ¿Produjo el ef comando un error sobre LocalDb que no se admite? Asegúrese de haber establecido la cadena de conexión, como se describe en la sección "Configuración de la conexión de base de datos".

  4. La extensión SQL Server se ha agregado a Visual Studio Code, si era necesario, cuando ha aceptado las extensiones recomendadas. Presione Ctrl+Alt+D para cambiar al panel SQL Server.

  5. Expanda los nodos en la conexión de base de datos existente. Expanda el nodo Bases de datos, después RazorPagesPizza y, por último, el nodo Tablas. Observe la lista de tablas. Esto confirma que la migración se ha realizado correctamente.

    La base de datos RazorPagesPizza con las tablas recientemente creadas.

    Nota

    En la imagen anterior se muestra un ejemplo con LocalDB de SQL Server Express. Al usar .devcontainer, la conexión se denomina mssql-container.

Vuelva al panel Explorador. En Pages/Shared/_Layout.cshtml, reemplace el comentario @* Add the _LoginPartial partial view *@ por lo siguiente.

<partial name="_LoginPartial" />

El marcado anterior representa la vista parcial _LoginPartial en el encabezado de cualquier página que use el diseño predeterminado. El scaffold de Identity ha agregado _LoginPartial. En esta vista parcial se muestran al usuario los vínculos Iniciar sesión y Registrarse, en caso de que el usuario no haya iniciado sesión.

Prueba de la funcionalidad de Identity

Eso es todo lo necesario para agregar la implementación de Identity predeterminada. Es hora de probarla.

  1. Asegúrese de que ha guardado todos los cambios.

  2. En el panel de terminal, compile el proyecto y ejecute la aplicación:

    dotnet run

  3. Vaya a la aplicación en el explorador como antes.

  4. Seleccione el vínculo Registrarse en el encabezado de la aplicación. Rellene el formulario para crear una cuenta nueva.

    Se muestra la página de confirmación del registro. Como la aplicación todavía no se ha configurado para enviar correos electrónicos de confirmación, el vínculo de confirmación se proporciona en esta página.

  5. Seleccione el vínculo de confirmación. Se muestra un mensaje de confirmación.

  6. Seleccione el vínculo Inicio de sesión en el encabezado de la aplicación e inicie sesión.

    Tras un inicio de sesión correcto:

    • Se le redirigirá a la página principal.
    • El encabezado de la aplicación muestra Hola [dirección de correo electrónico] y un vínculo Cerrar sesión.
    • Se crea una cookie llamada .AspNetCore.Identity.Application. Identity conserva las sesiones de usuario con autenticación basada en cookies.

  7. Seleccione el vínculo Cerrar sesión en el encabezado de la aplicación.

    Después de haber cerrado la sesión correctamente, se elimina la cookie .AspNetCore.Identity.Application para finalizar la sesión de usuario.

  8. Presione Ctrl+C en el panel de terminal para detener la aplicación.

Resumen

En esta unidad, ha agregado la implementación de Identity predeterminada a una aplicación web existente. En la unidad siguiente, obtendrá información sobre cómo extender y personalizar Identity.