Esercizio - Configurare il supporto di Identity

Completato

Identity è già pronto all'uso senza alcuna personalizzazione. In questa unità si aggiungerà Identity al progetto ASP.NET Core Razor Pages esistente.

Aprire il progetto iniziale

Per usare gitHub Codespace consigliato, passare al repository Codespaces per MicrosoftDocs/mslearn-secure-aspnet-core-identity. Creare un nuovo codespace usando il main ramo e quindi passare a Esplorare l'app.

Per usare un contenitore di sviluppo locale, attenersi alla procedura seguente:

  1. In una finestra di Visual Studio Code, premere il tasto F1 per aprire il riquadro comandi. Cercare e selezionare Dev-Containers: Clone Repository in Container Volume....

  2. Immettere l'URL del repository seguente: https://github.com/MicrosoftDocs/mslearn-secure-aspnet-core-identity. Selezionare il main ramo . Visual Studio Code crea il contenitore di sviluppo. Accettare eventuali prompt di installazione delle estensioni consigliate.

  3. Passare a Esplora app.

Per usare un ambiente di sviluppo locale, attenersi alla procedura seguente:

  1. In una finestra del terminale eseguire questo comando per ottenere il progetto iniziale:

    git clone https://github.com/MicrosoftDocs/mslearn-secure-aspnet-core-identity
    
  2. Passare alla directory del codice sorgente e avviare Visual Studio Code:

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

    Verrà aperto Visual Studio Code. Accettare eventuali prompt di installazione delle estensioni consigliate, ma NON selezionare Riapri nel contenitore se richiesto. Continuare con i passaggi successivi.

Esplora l'app

  1. Dopo il caricamento del progetto, premere CTRL+MAIUSC+` per aprire un nuovo riquadro del terminale.

  2. Nel nuovo riquadro del terminale impostare la posizione sulla directory RazorPagesPizza:

    cd RazorPagesPizza
    
  3. Nel riquadro Explorer espandere la directory RazorPagesPizza per visualizzare il codice. RazorPagesPizza è la directory del progetto. Mentre si procede, presupporre che tutti i percorsi descritti in questo modulo siano relativi a questa posizione.

    Eseguire l'app per ottenere un'introduzione rapida.

  4. Nel riquadro del terminale creare il progetto ed eseguire l'app:

    dotnet run
    
  5. Si noti l'URL visualizzato nell'output del terminale. Ad esempio: https://localhost:7192.

  6. Aprire l'app nel browser selezionando l'URL con CTRL+clic.

    Importante

    Se si usa il contenitore di sviluppo nel Docker locale, il certificato SSL dall'interno del contenitore non verrà ritenuto attendibile dal browser. Per visualizzare l'app Web, è necessario eseguire una di queste operazioni:

    • Ignorare l'errore del certificato. Se si usa Microsoft Edge, selezionare Avanzate e Continue to localhost (not recommended) (Passa a localhost - Non consigliato). I dettagli dipendono dal browser.
    • Salvare il certificato e aggiungerlo alle autorità di certificazione attendibili.
    • Importare un certificato di sviluppo esistente all'interno del contenitore. Per altre informazioni, vedere i commenti generati in ./devcontainer/devcontainter.json.
  7. Esplorare l'app Web nel browser. Usando i collegamenti nell'intestazione:

    1. Passare a Pizza List
    2. Tornare a Home

    Si noti che non è necessario eseguire l'autenticazione.

  8. Per arrestare l'app, premere CTRL+C nel riquadro del terminale.

Aggiungere ASP.NET Core Identity al progetto

L'impostazione predefinita di Identity può essere aggiunta con gli strumenti da riga di comando dotnet.

  1. Installare l'utilità di scaffolding del codice ASP.NET Core:

    dotnet tool install dotnet-aspnet-codegenerator --version 8.0.* --global
    

    Lo scaffolder è uno strumento .NET Core che:

    • Viene usato per aggiungere al progetto i componenti di Identity predefiniti.
    • Abilita la personalizzazione dei componenti dell'interfaccia utente di Identity nell'unità successiva.
    • Viene richiamato tramite dotnet aspnet-codegenerator in questo modulo.
  2. Aggiungere i pacchetti NuGet seguenti al progetto:

    dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --version 8.0.*
    dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 8.0.*
    dotnet add package Microsoft.AspNetCore.Identity.UI --version 8.0.*
    dotnet add package Microsoft.EntityFrameworkCore.Design --version 8.0.*
    dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 8.0.*
    dotnet add package Microsoft.EntityFrameworkCore.Tools --version 8.0.*
    

    Questi pacchetti installano i modelli e le dipendenze di generazione del codice usati dall'utilità di scaffolding.

    Suggerimento

    Per visualizzare i generatori disponibili:

    • Nella shell dei comandi eseguire dotnet aspnet-codegenerator -h.
    • In Visual Studio fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Aggiungi>Nuovo elemento di scaffolding.
  3. Usare l'utilità di scaffolding per aggiungere al progetto i componenti di Identity predefiniti. Eseguire il comando seguente nel terminale:

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

    Nel comando precedente:

    • Il generatore identificato come identity viene usato per aggiungere il framework Identity al progetto.
    • L'opzione --useDefaultUI indica che verrà usata una libreria RCL (Razor Class Library) contenente gli elementi dell'interfaccia utente predefiniti. Per applicare uno stile ai componenti verrà usato Bootstrap.
    • L'opzione --dbContext specifica il nome di una classe di contesto del database EF Core da generare.
    • L'opzione --userClass specifica il nome della classe utente da generare. La classe utente predefinita è IdentityUser, ma poiché la classe utente viene estesa in un'unità successiva, viene specificata una classe utente personalizzata denominata RazorPagesPizzaUser . La classe RazorPagesPizzaUser è derivata da IdentityUser.

    La struttura di directory Areas seguente viene visualizzata nella directory RazorPagesPizza:

    • Areas
      • Identity (visualizzato nella stessa riga di Areas)
        • Data
          • RazorPagesPizzaAuth.cs
          • RazorPagesPizzaUser.cs
        • Pages
          • _ValidationScriptsPartial.cshtml
          • _ViewStart.cshtml

    Suggerimento

    Se la directory Areas non viene visualizzata automaticamente nel riquadro Explorer, selezionare il pulsante Aggiorna Explorer sull'intestazione MSLEARN-SECURE-ASPNET-CORE-IDENTITY nel riquadro Explorer.

    Areas offre un modo per partizionare un'app Web ASP.NET Core in gruppi funzionali più piccoli.

    Lo scaffolder ha inoltre apportato le modifiche evidenziate seguenti a Program.cs, riformattate per la leggibilità:

    using Microsoft.AspNetCore.Identity;
    using Microsoft.EntityFrameworkCore;
    using RazorPagesPizza.Areas.Identity.Data;
    var builder = WebApplication.CreateBuilder(args);
    var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection") 
        ?? throw new InvalidOperationException("Connection string 'RazorPagesPizzaAuthConnection' not found.");
    
    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.UseAuthorization();
    
    app.MapRazorPages();
    
    app.Run();
    

    Nel codice precedente:

    • La stringa di connessione RazorPagesPizzaAuthConnection viene letta da appsettings.json.
    • La classe di contesto del database EF Core, denominata RazorPagesPizzaAuth, viene configurata con la stringa di connessione.
    • Vengono registrati i servizi Identity, inclusi l'interfaccia utente predefinita, i provider di token e l'autenticazione basata su cookie.
      • .AddDefaultIdentity<IdentityUser> richiede ai servizi Identity di usare il modello utente predefinito.
      • L'espressione lambda options => options.SignIn.RequireConfirmedAccount = true specifica che gli utenti devono confermare i rispettivi account e-mail.
      • .AddEntityFrameworkStores<RazorPagesPizzaAuth>() specifica che Identity usa l'archivio predefinito di Entity Framework Core per il rispettivo database. Viene usata la classe RazorPagesPizzaAuth DbContext.

Configurare la connessione al database

La sezione ConnectionStrings in appsettings.json deve avere un aspetto analogo al codice JSON seguente:

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

Questa stringa di connessione fa riferimento a un'istanza di SQL Server Express LocalDB per impostazione predefinita. Se si sviluppa in locale, non eseguire alcuna operazione. Si tratta della stringa di connessione corretta.

In Codespaces o nei contenitori di sviluppo la stringa di connessione non è corretta. Se si usa Codespace o il contenitore di sviluppo, è necessario modificare la stringa di connessione come illustrato di seguito. Assicurarsi di salvare le modifiche.

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

La stringa di connessione verrà aggiornata in modo da connettersi all'istanza di SQL Server all'interno del contenitore.

Aggiornare il database

Dopo aver verificato il stringa di connessione, è possibile generare ed eseguire una migrazione per compilare il database.

  1. Eseguire il comando seguente per compilare l'app:

    dotnet build
    

    La compilazione ha esito positivo senza avvisi. Se la compilazione non riesce, controllare l'output per informazioni sulla risoluzione dei problemi.

  2. Installare lo strumento di migrazione Entity Framework Core:

    dotnet tool install dotnet-ef --version 8.0.* --global
    

    Lo strumento di migrazione è uno strumento .NET che:

    • Genera il codice di migrazione per creare e aggiornare il database che supporta il modello di entità Identity.
    • Esegue le migrazioni su un database esistente.
    • Viene richiamato tramite dotnet ef in questo modulo.
  3. Per aggiornare il database, creare ed eseguire una migrazione di EF Core:

    dotnet ef migrations add CreateIdentitySchema
    dotnet ef database update
    

    La migrazione di EF Core CreateIdentitySchema ha applicato uno script delle modifiche DDL (Data Definition Language) per creare le tabelle di supporto per Identity. Ad esempio, l'output seguente illustra un'istruzione CREATE TABLE generata dalla migrazione:

    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])
          );
    

    Suggerimento

    Il comando ef ha generato un errore relativo al mancato supporto di LocalDb? Assicurarsi di aver impostato la stringa di connessione, come descritto nella sezione "Configurare la connessione al database".

  4. L'estensione SQL Server è stata aggiunta a Visual Studio Code, se necessario, quando sono state accettate le estensioni consigliate. Premere CTRL+ALT+D per passare al riquadro di SQL Server.

  5. Espandere i nodi sotto la connessione di database esistente. Espandere il nodo Databases, il nodo RazorPagesPizza e infine il nodo Tables. Si noti l'elenco di tabelle. Ciò conferma che la migrazione è riuscita.

    Database RazorPagesPizza con le tabelle appena create.

    Nota

    L'immagine precedente mostra un esempio che usa SQL Server Express LocalDB. Quando si usa .devcontainer, la connessione viene denominata mssql-container.

Tornare al riquadro Explorer. In Pages/Shared/_Layout.cshtml sostituire il commento @* Add the _LoginPartial partial view *@ con il codice seguente.

<partial name="_LoginPartial" />

Il markup precedente esegue il rendering della visualizzazione parziale _LoginPartial all'interno dell'intestazione di qualsiasi pagina che usi il layout predefinito. Lo scaffold identity ha aggiunto _LoginPartial. Questa visualizzazione parziale presenta all'utente i collegamenti Login (Accedi) e Register (Registrati) se l'utente non è connesso.

Testare la funzionalità Identity

Sono state eseguite tutte le operazioni necessarie per aggiungere l'implementazione predefinita di Identity. Ora è possibile testarla.

  1. Assicurarsi di salvare tutte le modifiche.

  2. Nel riquadro del terminale creare il progetto ed eseguire l'app:

    dotnet run
    
  3. Passare all'app nel browser, come in precedenza.

  4. Fare clic sul collegamento Register (Registrati) nell'intestazione dell'app. Completare il modulo per creare un nuovo account.

    Viene visualizzata la pagina Register confirmation (Registrazione conferma). Poiché l'app non è stata configurata per l'invio di messaggi di posta elettronica di conferma, il collegamento di conferma viene fornito in questa pagina.

  5. Selezionare il collegamento di conferma. Viene visualizzato un messaggio di conferma.

  6. Fare clic sul collegamento Login (Accesso) nell'intestazione dell'app e accedere.

    Dopo un accesso riuscito:

    • Si viene reindirizzati alla home page.
    • Nell'intestazione dell'app viene visualizzato Hello [indirizzo e-mail]! e un collegamento di Logout (Disconnetti).
    • Viene creato un cookie denominato .AspNetCore.Identity.Application. Identity mantiene le sessioni utente usando l'autenticazione basata su cookie.
  7. Selezionare il collegamento Logout (Disconnetti) nell'intestazione dell'app.

    Dopo la disconnessione, il cookie .AspNetCore.Identity.Application viene eliminato per terminare la sessione utente.

  8. Per arrestare l'app, premere CTRL+C nel riquadro del terminale.

Riepilogo

In questa unità è stata aggiunta l'implementazione predefinita di Identity a un'app Web esistente. Nell'unità successiva si apprenderà come estendere e personalizzare Identity.