Blazor WebAssembly, Teil 3: Authentifizierung und Autorisierung

Seite 3: Anzeige des angemeldeten Benutzers

Inhaltsverzeichnis

Nun wäre es noch schön, wenn Benutzer nach der Anmeldung sehen könnten, unter welchem Konto sie angemeldet sind. Dazu können Entwickler in MainLayout.razor in die weiße Kopfzeile <AuthorizeView> mit <Authorized> und <NotAuthorized> einbauen. Die Daten der angemeldeten Benutzer kann man innerhalb von <AuthorizeView> vereinfacht über die vordefinierte Property context auslesen, zum Beispiel @context.User.Identity.Name[code] (s. Listing 4).

<span class="col-xs-6 col-lg-9 col-sm-7 col-md-8 hidden-xs" style="vertical-align: middle">
 <AuthorizeView>
  <Authorized>
   <h4 class="loginstatus">User: @context.User.Identity.Name <a href="/logout">Logout</a></h4>
  </Authorized>
  <NotAuthorized>
   <h4 class="loginstatus">You're not signed in!</h4>
  </NotAuthorized>
 </AuthorizeView>
</span>

Listing 4: Verwendung von <AuthorizeView> in MainLayout.razor

Für kleine Displays verwendet man den Ausgabeblock erneut unten, dieses Mal aber fensterbreitenfüllend mit den CSS-Klassen [code]col-xs-12 hidden-sm hidden-md hidden-lg. Statt die Tags zu duplizieren, lagert man den Code aus Listing 4 besser in eine weitere Razor Component UserStatus.razor aus und verwendet diese Komponente dann an beiden Stellen via Tag:

<span class="col-xs-12 hidden-sm hidden-md hidden-lg">
 <UserStatus></UserStatus>
</span>

Die Authentifizierung ist damit fertig. Die Integration war nicht ganz trivial, aber Blazor ist hier sehr flexibel für alle Fälle. Im vierten Teil wird die Persistierung von Daten im Webbrowser hinzugefügt, denn User sollen nicht jedes Mal zur Eingabe ihrer Anmeldedaten gezwungen werden, insbesondere nicht nach einem Reload im Browser.

Dr. Holger Schwichtenberg
ist Chief Technology Expert bei der MAXIMAGO-Softwareentwicklung. Mit dem Expertenteam bei www.IT-Visions.de bietet er zudem Beratung und Schulungen im Umfeld von Microsoft-, Java- und Web-Techniken an. Er ist Autor zahlreicher Bücher, u. a. "ASP.NET Core Blazor: Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio".

(ane)