Übung: Konfigurieren der Unterstützung des Identitätsframework

  • 15 Minuten

Das Identitätsframework ist standardmäßig ohne Anpassungen funktionsfähig. In dieser Lerneinheit fügen Sie einem vorhandenen ASP.NET Core Razor Pages-Projekt Identität hinzu.

Abrufen und Öffnen des Startprojekts

Hinweis

Wenn Sie den DEVCONTAINER in GitHub Codespaces verwenden möchten, navigieren Sie zu Ihren Codespaces für das MicrosoftDocs/mslearn-aspnet-core-Repository. Erstellen Sie im main-Branch einen neuen Codespace, und fahren Sie dann mit Schritt 3 fort.

  1. Führen Sie in einem Terminalfenster den folgenden Befehl aus, um das Startprojekt abzurufen:

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

  2. Wechseln Sie zum Quellcodeverzeichnis, und starten Sie Visual Studio Code:

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

    Visual Studio Code wird geöffnet. Akzeptieren Sie alle Aufforderungen zum Installieren empfohlener Erweiterungen, oder wählen Sie In Container erneut öffnen aus, wenn Sie .devcontainer verwenden möchten.

    Tipp

    Wenn Sie die Aufforderung zum erneuten Öffnen im Container verpassen, drücken Sie STRG+UMSCHALTTASTE+P, um die Befehlspalette zu öffnen, suchen Sie dann nach Dev Containers: In Container erneut öffnen, und wählen Sie den Eintrag aus.

  3. Nachdem das Projekt geladen wurde (lokal oder im Container), drücken Sie STRG+UMSCHALTTASTE+`, um einen neuen Terminalbereich zu öffnen.

  4. Legen Sie im neuen Terminalbereich den Speicherort auf das Verzeichnis RazorPagesPizza fest:

    cd RazorPagesPizza

  5. Erweitern Sie im Explorer-Bereich das Verzeichnis RazorPagesPizza, um den Code anzuzeigen. RazorPagesPizza ist das Projektverzeichnis. Gehen Sie im Folgenden davon aus, dass alle in diesem Modul beschriebenen Pfade relativ zu diesem Speicherort sind.

App erkunden

Lassen Sie uns die App ausführen, um eine schnelle Einführung zu erhalten.

  1. Erstellen Sie im Terminalbereich das Projekt, und führen Sie die App aus:

    dotnet run

  2. Beachten Sie die URL, die an der Terminalausgabe angezeigt wird. Beispiel: https://localhost:7192.

  3. Öffnen Sie die App in Ihrem Browser, indem Sie die URL mit STRG+Klick auswählen.

    Wichtig

    Wenn Sie .devcontainer in Docker verwenden, wird das SSL-Zertifikat im Container vom Browser nicht als vertrauenswürdig eingestuft. Um die Web-App anzuzeigen, müssen Sie eine der folgenden Aktionen ausführen:

    • Ignorieren Sie den Zertifikatfehler. Wenn Sie Microsoft Edge verwenden, wählen Sie Erweitert und Weiter zu localhost (nicht empfohlen) aus. Die Details hängen vom jeweiligen Browser ab.
    • Speichern Sie das Zertifikat, und fügen Sie es zu Ihren vertrauenswürdigen Zertifizierungsstellen hinzu.
    • Importieren Sie ein vorhandenes Entwicklungszertifikat innerhalb des Containers. Weitere Informationen finden Sie in den generierten Kommentaren in ./devcontainer/devcontainter.json.

    Wenn Sie ein vorhandenes Entwicklungszertifikat innerhalb des Containers importieren möchten, wird der Containerpfad /root/.aspnet/ als .devcontainer/persisted-data/.aspnet außerhalb des Containers verfügbar gemacht. Dies erfolgt der Einfachheit halber.

    Wenn Sie .devcontainer in GitHub Codespaces verwenden, ist keine Aktion erforderlich. Codespaces verarbeitet die Proxy-SSL-Verbindung automatisch.

  4. Erkunden Sie die Web-App im Browser. Verwenden der Links in der Kopfzeile:

    1. Navigation zu Pizza List
    2. Navigation zurück zur Startseite

    Beachten Sie, dass Sie sich nicht authentifizieren müssen.

  5. Drücken Sie im Terminalbereich STRG+C, um die App zu beenden.

Hinzufügen von ASP.NET Core Identity zum Projekt

Die Standardimplementierung von Identity kann mit dotnet-Befehlszeilentools hinzugefügt werden.

  1. Installieren Sie den ASP.NET Core-Codegenerator:

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

    Bei dem Gerüstgenerator handelt es sich um ein .NET Core-Tool, das diese Möglichkeiten bietet:

    • Es wird verwendet, um dem Projekt die Standardidentitätskomponenten hinzuzufügen.
    • Es ermöglicht die Anpassung der Identitäts-Benutzeroberflächenkomponenten in der nächsten Lerneinheit.
    • Es wird in diesem Modul über dotnet aspnet-codegenerator aufgerufen.

  2. Fügen Sie die folgenden NuGet-Pakete zum Projekt hinzu:

    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

    Diese Pakete installieren Codeerstellungsvorlagen und -abhängigkeiten, die vom Generator verwendet werden.

    Tipp

    So zeigen Sie die verfügbaren Generatoren an:

    • Führen Sie dotnet aspnet-codegenerator -h in der Befehlsshell aus.
    • Klicken Sie in Visual Studio im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie dann Hinzufügen>Neues Gerüstelement....

  3. Verwenden Sie den Codegenerator, um die Standardidentitätskomponenten zum Projekt hinzuzufügen. Führen Sie die folgenden Befehle im Terminal aus:

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

    Im obigen Befehl:

    • wird der mit identity angegebene Generator verwendet, um dem Projekt das Identity-Framework hinzuzufügen.
    • Die Option --useDefaultUI gibt an, dass eine Razor-Klassenbibliothek (RCL) verwendet wird, die die Standard-Benutzeroberflächenelemente enthält. Bootstrap wird zum Formatieren der Komponenten verwendet.
    • Die Option --dbContext gibt den Namen einer zu generierenden EF Core-Datenbankkontextklasse an.

    Die folgende Areas-Verzeichnisstruktur wird im Verzeichnis RazorPagesPizza angezeigt:

    • Areas
      • Identity (wird in derselben Zeile wie Areas angezeigt)
        • Data
          • RazorPagesPizzaAuth.cs
        • Pages
          • _ValidationScriptsPartial.cshtml
          • _ViewStart.cshtml

    Tipp

    Wenn das Verzeichnis Areas nicht automatisch im Explorer-Bereich angezeigt wird, wählen Sie im Explorer-Bereich die Schaltfläche Explorer aktualisieren im Header MSLEARN-SECURE-ASPNET-CORE-IDENTITY aus.

    Bereiche bieten eine Möglichkeit, um eine ASP.NET Core-Web-App in kleinere funktionale Gruppen zu partitionieren.

    Der Gerüstgenerator hat außerdem die folgenden hervorgehobenen Änderungen an Program.cs vorgenommen, die hier zur besseren Lesbarkeit umformatiert sind:

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

    Für den Code oben gilt:

    • Die RazorPagesPizzaAuthConnection-Verbindungszeichenfolge wird aus appsettings.json gelesen.
    • Die Entity Framework Core-Datenbankkontextklasse namens RazorPagesPizzaAuth wird mit der Verbindungszeichenfolge konfiguriert.
    • werden die Identitätsdienste registriert, einschließlich der Standardbenutzeroberfläche, der Tokenanbieter und cookiebasierten Authentifizierung.
      • .AddDefaultIdentity<IdentityUser> weist die Identity-Dienste an, das Standardbenutzermodell zu verwenden.
      • Der Lambda-Ausdruck options => options.SignIn.RequireConfirmedAccount = true gibt an, dass Benutzer ihre E-Mail-Konten bestätigen müssen.
      • .AddEntityFrameworkStores<RazorPagesPizzaAuth>() gibt an, dass Identity den standardmäßigen Entity Framework Core-Speicher für seine Datenbank verwendet. Die RazorPagesPizzaAuthDbContext-Klasse wird verwendet.
    • app.UseAuthentication(); aktiviert die Authentifizierungsfunktionen. Genauer gesagt wird eine Instanz der ASP.NET Core-Authentifizierungsmiddleware zur Verarbeitungspipeline für HTTP-Anforderungen der App hinzugefügt.

Konfigurieren der Datenbankverbindung

Der ConnectionStrings-Abschnitt in appsettings.json sollte ähnlich wie der folgende JSON-Code aussehen:

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

Diese Verbindungszeichenfolge verweist standardmäßig auf eine LocalDB-Instanz von SQL Server Express. Wenn Sie DEVCONTAINER verwenden, müssen Sie die Verbindungszeichenfolge wie folgt ändern. Speichern Sie die Änderungen.

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

Dadurch wird die Verbindungszeichenfolge so aktualisiert, dass eine Verbindung mit der Instanz von SQL Server innerhalb des Containers hergestellt wird.

Aktualisieren der Datenbank

Nachdem die Verbindungszeichenfolge überprüft wurde, können Sie eine Migration generieren und ausführen, um die Datenbank zu erstellen.

  1. Führen Sie den folgenden Befehl aus, um die App zu erstellen:

    dotnet build

    Der Buildvorgang sollte erfolgreich und ohne Warnungen abgeschlossen werden. Wenn beim Buildvorgang ein Fehler auftritt, suchen Sie in der Ausgabe nach Informationen zur Problembehandlung.

  2. Installieren Sie das Entity Framework Core-Migrationstool:

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

    Das Migrationstool ist ein .NET-Tool, das folgende Aufgaben erledigt:

    • Generieren von Code, der als Migration bezeichnet wird, um die Datenbank zu erstellen und zu aktualisieren, die das Identitätsentitätsmodell unterstützt
    • Ausführen der Migration für eine vorhandene Datenbank
    • Es wird in diesem Modul über dotnet ef aufgerufen.

  3. Erstellen Sie eine EF Core-Migration, und führen Sie sie aus, um die Datenbank zu aktualisieren:

    dotnet ef migrations add CreateIdentitySchema
dotnet ef database update

    Die CreateIdentitySchema-EF Core-Migration wendet eine DDL (Datendefinitionssprache) an, um die Tabellen zu erstellen, die die Identität unterstützen. Sie folgende Ausgabe stellt beispielsweise eine CREATE TABLE-Anweisung dar, die von der Migration generiert wurde:

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

    Tipp

    Hat der Befehl ef eine Fehlermeldung mit dem Hinweis ausgelöst, dass LocalDb nicht unterstützt wird? Vergewissern Sie sich, dass Sie Ihre Verbindungszeichenfolge festgelegt haben, wie im Abschnitt „Konfigurieren der Datenbankverbindung“ beschrieben.

  4. Die SQL Server-Erweiterung wurde zu Visual Studio Code (falls erforderlich) hinzugefügt, als Sie die empfohlenen Erweiterungen akzeptiert haben. Drücken Sie STRG+ALT+D, um zum SQL Server-Bereich zu wechseln.

  5. Erweitern Sie die Knoten unter der vorhandenen Datenbankverbindung. Erweitern Sie den Knoten Datenbanken, den Knoten RazorPagesPizza und schließlich den Knoten Tabellen. Beachten Sie die Liste der Tabellen. Dies bestätigt, dass die Migration erfolgreich war.

    Die Datenbank „RazorPagesPizza“ mit den neu erstellten Tabellen

    Hinweis

    Die Abbildung oben veranschaulicht ein Beispiel mit LocalDB von SQL Server Express. Bei Verwendung von .devcontainer heißt die Verbindung mssql-container.

Navigieren Sie zurück zum Bereich Explorer. Ersetzen Sie in Pages/Shared/_Layout.cshtml den Kommentar @* Add the _LoginPartial partial view *@ durch folgenden Kommentar.

<partial name="_LoginPartial" />

Das obige Markup rendert die _LoginPartial-Teilansicht im Header aller Seiten, die das Standardlayout verwenden. _LoginPartial wurde vom Identitätsgerüst hinzugefügt. Diese Teilansicht zeigt die Links Anmelden und Registrieren an, wenn der Benutzer nicht angemeldet ist.

Testen der Identity-Funktionalität

Das ist alles, was erforderlich ist, um die Standardimplementierung von Identity hinzuzufügen. Jetzt ist es an der Zeit, die Funktionalität zu testen!

  1. Vergewissern Sie sich, dass Sie alle Änderungen gespeichert haben.

  2. Erstellen Sie im Terminalbereich das Projekt, und führen Sie die App aus:

    dotnet run

  3. Navigieren Sie wie zuvor in Ihrem Browser zur App.

  4. Wählen Sie im Header der App den Link Registrieren aus. Füllen Sie das Formular aus, um ein neues Konto zu erstellen.

    Die Seite zum Bestätigen der Registrierung wird angezeigt. Da die App noch nicht für das Senden von Bestätigungs-E-Mails konfiguriert wurde, wird der Bestätigungslink auf dieser Seite bereitgestellt.

  5. Wählen Sie den Bestätigungslink aus. Eine Bestätigungsmeldung wird angezeigt.

  6. Wählen Sie den Link Login in der Kopfzeile der App aus, und melden Sie sich an.

    Nach einer erfolgreicher Anmeldung:

    • werden Sie zur Startseite weitergeleitet.
    • Der Header der App zeigt Hallo [E-Mail-Adresse], und einen Abmeldelink an.
    • Ein Cookie namens .AspNetCore.Identity.Application wird erstellt. Das Identitätsframework behält Benutzersitzungen mit cookiebasierter Authentifizierung bei.

  7. Klicken Sie im Header der App auf Abmelden.

    Nach erfolgreicher Abmeldung wird das Cookie .AspNetCore.Identity.Application gelöscht, um die Benutzersitzung zu beenden.

  8. Drücken Sie im Terminalbereich STRG+C, um die App zu beenden.

Zusammenfassung

In dieser Lerneinheit haben Sie die Standardimplementierung Identity zu einer vorhandenen Web-App hinzugefügt. In der nächsten Einheit erfahren Sie mehr über das Erweitern und Anpassen von Identity.