© Photobank_gallery/Shutterstock.com, © S&S Media
Authentifizierung und Benutzerverwaltung in Web-Apps auf Basis von ASP.NET Core Blazor

Zutritt nur mit Blazor


Bei Blazor WebAssembly ist die Implementierung von Authentifizierung und Benutzerverwaltung bislang Aufgabe des Entwicklers. Für Blazor Server dagegen bietet Microsoft eine Standardlösung in Form von ASP.NET Identity an.

In diesem Beitrag betrachten wir die Standardlösung in Blazor Server (aktuelle Version 3.1 vom 3.12.2019) sowie die individuelle Implementierung eines Authentication-State-Providers für Blazor WebAssembly (bei Redaktionsschluss aktuelle Version 3.2 Preview 1 vom 28.1.2020). Die Grundlagen beider Blazor-Erscheinungsformen wurden im Windows Developer schon vorgestellt [1], [2]. In der kommenden Version 3.2 Preview 2 von Blazor WebAssembly wird es auch eine Integration mit ASP.NET Identity sowie Open-ID-Connect-Providern geben.

Standardlösung in Blazor Server

Um es vorweg zu sagen: Die Standardlösung für Authentifizierung und Benutzerverwaltung in Blazor Server ist nicht sehr elegant, denn sie ist nicht in Razor Components innerhalb von Blazor, sondern in ASP.NET Core Razor Pages implementiert. Der Teil der Anwendung, der sich um Benutzerregistrierung, -anmeldung und -abmeldung sowie Verwaltungsarbeiten (z. B. „Passwort vergessen“) kümmert, ist also keine moderne Single Page Application (SPA), sondern eine Multi Page Application (MPA) mit vollständigen Roundtrips.

Blazor Server verwendet die gleiche Komponente ASP.NET Core Identity, die auch bei Projekten des Typs ASP.NET Core MVC und ASP.NET Core Razor Pages im Einsatz ist. Es gibt bisher keine eigene Implementierung im SPA-Stil für Blazor Server. Wer die Webanwendung nutzt, sieht deutlich, dass die Benutzerverwaltung anders funktioniert als die eigentliche Anwendung.

schwichtenberg_blazor_1.tif_fmt1.jpgAbb. 1: Das Hinzufügen einer Benutzerverwaltung beim Anlegen eines Projekts ist bislang nur bei Blazor Server möglich

Authentifizierung aktivieren

Beim Anlegen eines Blazor-Server-Projekts in Visual Studio oder per .NET Core CLI (dotnet.exe) hat der Entwickler bereits die Möglichkeit, die Authentifizierung zu wählen (Authentication | Change). Dabei gibt es fünf Optionen (Abb. 1), die aus der Microsoft-Nomenklatur übersetzt Folgendes bedeuten (in Klammern jeweils die korrespondieren Parameter für das .NET Core CLI).

  • No Authentication (--auth None): Es gibt keine Benutzeranmeldung und daher auch keine Unterscheidung von Inhalten für berechtigte und nicht berechtigte Benutzer

  • Individual User Accounts | In App (--auth Individual): Authentifizierung gegen in einer lokalen Datenbank gespeicherte Benutzerkonten (im Standard-Microsoft-SQL-Server, andere sind leicht möglich, da Entity Framework Core zur Abstraktion eingesetzt wird)

  • Individual User Accounts | User Store in Cloud (--auth IndividualB2C): Authentifizierung gegen einen auf Azure Active Directory basierenden Open-ID-Connect-Dienst (OIDC)

  • Work or School Accounts (--auth SingleOrg und --auth MultiOrg): Organisationsauthentifizierung gegen ein Azure Active Directory oder Office 365

  • Windows Authentication (--auth Windows): Authentifizierung gegen ein lokales Active Directory oder lokale Windows-Benutzerkonten

Individuelle Benutzerkontenverwaltung

Wählt man beim Anlegen eines Blazor-Server-Projekts Authentication | Change und dann Individual Accounts und Store users accounts in app, bekommt man wie bei der Projektvorlage ohne Authentifizierung eine SPA mit Menüleiste links. Zusätzlich sieht man drei Menüpunkte oben rechts: Register, Log in und About (Abb. 2). Klickt man auf einen dieser Punkte, stellt man mit Verwunderung fest, dass es einen vollständigen Seitenrundgang gab und das linke Navigationsmenü verschwindet: Man hat die Blazor-Server-Anwendung verlassen und ist nun auf einer Razor Page mit klassischem Server-side Rendering. Diese Beobachtung bestätigt sich, wenn man in das generierte Projekt schaut (Abb. 3): Im Punkt Areas | Identity | Pages sieht man die .cshtml-Dateien der Razor Pages.

schwichtenberg_blazor_2.tif_fmt1.jpgAbb. 2: Projektvorlage mit Authentifizierung: ein Gemisch aus Blazor Server und Razor Pages
schwichtenberg_blazor_3.tif_fmt1.jpgAbb. 3: Projektdateien für die Blazor-Server-Anwendung mit Authentifizierung

Während bei den Individual User Accounts in ASP. NET Core 2.0 noch der gesamte Programmcode für Benutzerregistrierung und Benutzeranmeldung inkl. Kennwortänderung direkt in die Anwendung generiert wird, ist dieser Programmcode seit ASP.NET Core 2.1 zunächst verborgen in der Komponente Microsoft.AspNetCore.Identity.UI.dll. Man findet lediglich in Startup.cs folgende Einträge:

services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddDefaultIdentity<IdentityUser>() .AddEntityFrameworkStores<ApplicationDbContext>();

Speziell für Blazor ist noch eine Zeile in Startup.cs ergänzt, denn Blazor braucht einen sogenannten AuthenticationStateProvider:

services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();

Außerdem findet man:

  • in /Areas/Identity zwei Razor-Page-Teile und die Klasse RevalidatingIdentityAuthenticationStateProvider.cs

  • eine Entity-Framework-Core-Kontextklasse (/Data/ApplicationDbContext.cs), die von IdentityDbContext abgeleitet ist (sie erbt über mehrere Ebenen von der Standardkontextklasse von Entity Framework Core: DbContext)

  • eine Migrationsklasse, um die für die Benutzerverwaltung benötigten Tabellen in einer Microsoft-SQL-Server-Datenbank anzulegen

  • in appsettings.json eine Verbindungszeichenfolge ("DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=Projektname-GUID;Trusted_Connection=True;MultipleActiveResultSets=true") zu dieser zukünftigen SQL-Server-Datenbank in der lokalen SQL-Server-Local-DB-Installation, die mit Visual Studio mitgeliefert wird

Diese SQL-Server-Datenbank muss der Entwickler anlegen, indem er Update Database im NuGet-Package-Manager in Visual Studio ausführt. Wird die Datenbank nicht angelegt, kann die Anwendung zwar starten, aber der Versuch, einen Benutzer zu registrieren oder anzumelden, scheitert mit der Fehlermeldung: „SqlException: Cannot open database requested by the login. The login failed.“ (Abb. 4). Neu seit ASP.NET Core 3.0 ist die Schaltfläche Apply Migrations, die das Anlegen der Datenbank auch zur Laufzeit erledigen kann.

schwichtenberg_blazor_4.tif_fmt1.jpgAbb. 4: Fehlermeldung, wenn die Benutzerdatenbank nicht angelegt wurde

Anpassung der Benutzerverwaltungsseiten

Will man die Gestaltung der Benutzerverwaltungsseiten bei Blazor Server anpassen, muss man die in Microsoft.AspNetCore.Identity.UI verborgenen Razor Pages zunächst in die Anwendung hineingenerieren. Das erledigt man im Solution Explorer in Visual Studio auf der Ebene des Projekts mit dem Kontextmenüeintrag Add | New Scaffolded Item | Identity....

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang