Sichern einer eigenständigen ASP.NET Core Blazor WebAssembly-App mit Microsoft-Konten

In diesem Artikel wird das Erstellen einer eigenständigen Blazor WebAssembly-App erläutert, die Microsoft-Konten mit Microsoft Entra-ID (ME-ID) für die Authentifizierung verwendet.

Nach dem Lesen dieses Artikels finden Sie weitere Informationen zu Sicherheitsszenarien unter Zusätzliche Sicherheitsszenarios für ASP.NET Core Blazor WebAssembly.

Exemplarische Vorgehensweise

In den Unterabschnitten der exemplarischen Vorgehensweise wird Folgendes erläutert:

• Erstellen eines Mandanten in Azure
• Registrieren einer App in Azure
• Erstellen der Blazor-App
• Ausführen der App

Erstellen eines Mandanten in Azure

Befolgen Sie den Leitfaden unter Schnellstart: Einrichten eines Mandanten, um einen Mandanten in ME-ID zu erstellen.

Registrieren einer App in Azure

Registrieren einer ME-ID-App:

1. Navigieren Sie im Azure-Portal zu Microsoft Entra-ID. Wählen Sie auf der Seitenleiste App-Registrierungen aus. Klicken Sie auf die Schaltfläche Neue Registrierung.
2. Geben Sie einen Namen für die App an (z. B. Blazor Standalone ME-ID MS Accounts).
3. Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Organisationsverzeichnis (Beliebiges Microsoft Entra-ID-Verzeichnis – mehrinstanzenfähig) aus.
4. Legen Sie in der Dropdownliste Umleitungs-URI die Option Single-Page-Webanwendung (SPA) fest, und geben Sie den folgenden Umleitungs-URI an: https://localhost/authentication/login-callback. Wenn Sie den Produktionsumleitungs-URI für den Azure-Standardhost (z. B. azurewebsites.net) oder den benutzerdefinierten Domänenhost (z. B. contoso.com) kennen, können Sie den Produktionsumleitungs-URI gleichzeitig mit dem Umleitungs-URI für localhost hinzufügen. Achten Sie darauf, die Portnummer für andere Ports als :443 in alle von Ihnen hinzugefügten Produktionsumleitungs-URIs einzuschließen.
5. Wenn Sie eine nicht verifizierte Herausgeberdomäne verwenden, deaktivieren Sie das Kontrollkästchen unter Berechtigungen>Administratoreinwilligung für openid- und offline_access-Berechtigungen erteilen. Wenn die Herausgeberdomäne verifiziert ist, ist dieses Kontrollkästchen nicht vorhanden.
6. Wählen Sie Registrieren.

Hinweis

Die Angabe der Portnummer für eine localhost-ME-ID Redirect URI ist nicht erforderlich. Weitere Informationen finden Sie unter Einschränkungen und Beschränkungen der Redirect URI (Antwort-URL): Localhost-Ausnahmen (Entra-Dokumentation).

Notieren Sie sich die Anwendungs-ID (Client-ID) (z. B. 00001111-aaaa-2222-bbbb-3333cccc4444).

Unter Authentifizierung>Plattformkonfigurationen>Single-Page-Webanwendung:

1. Vergewissern Sie sich, dass der Umleitungs-URI von https://localhost/authentication/login-callback vorhanden ist.
2. Stellen Sie sicher, dass im Abschnitt Implizite Gewährung die Kontrollkästchen Zugriffstoken und ID-Token nicht aktiviert sind. Die implizite Gewährung wird für Blazor-Apps mit MSAL v2.0 oder höher nicht empfohlen. Weitere Informationen finden Sie im Artikel Schützen der Blazor WebAssembly in ASP.NET Core.
3. Die verbleibenden Standardwerte für die App müssen für dieses Szenario nicht angepasst werden.
4. Wählen Sie die Schaltfläche Speichern aus, wenn Sie Änderungen vorgenommen haben.

Erstellen der Blazor-App

Erstellen der App Ersetzen Sie die Platzhalter im folgenden Befehl durch die zuvor notierten Informationen, und führen Sie den folgenden Befehl in einer Befehlsshell aus:

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {PROJECT NAME}

Platzhalter	Name im Azure-Portal	Beispiel
{PROJECT NAME}	—	BlazorSample
{CLIENT ID}	Anwendungs-ID (Client)	00001111-aaaa-2222-bbbb-3333cccc4444

Der mit der Option -o|--output angegebene Ausgabespeicherort erstellt einen Projektordner, sofern kein solcher vorhanden ist, und wird Teil des Projektnamens.

Fügen Sie ein Paar von MsalProviderOptions für openid und offline_access DefaultAccessTokenScopes hinzu:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("openid");
    options.ProviderOptions.DefaultAccessTokenScopes.Add("offline_access");
});

Ausführen der App

Verwenden Sie einen der folgenden Ansätze, um die App auszuführen:

• Visual Studio
  • Wählen Sie die Schaltfläche Ausführen.
  • Verwenden Sie im Menü Debuggen>Debuggen starten.
  • Drücken Sie F5.
• .NET CLI-Befehlsshell: Führen Sie den Befehl dotnet watch (oder dotnet run) im Ordner der App aus.

Bestandteile der App

In diesem Abschnitt wird erläutert, welche Teile einer App aus der Blazor WebAssembly-Projektvorlage generiert werden und wie die Konfiguration der App erfolgt. Es gibt in diesem Abschnitt keine speziellen Anleitungen für eine grundlegende funktionierende Anwendung, wenn Sie die App mithilfe der Anweisungen im Abschnitt Vorgehensweise erstellt haben. Die Anweisungen in diesem Abschnitt sind hilfreich, um die App mit Features zur Authentifizierung und Autorisierung von Benutzer*innen zu ergänzen. Eine alternativer Ansatz zum Aktualisieren einer App besteht darin, eine neue App anhand der Anweisungen im Abschnitt Vorgehensweise zu erstellen und die Komponenten, Klassen und Ressourcen der App in die neue App zu verschieben.

Authentifizierungspaket

Wenn eine App zum Verwenden von Geschäfts-, Schul- oder Unikonten (SingleOrg) erstellt wird, erhält die App automatisch einen Paketverweis für die Authentifizierungsbibliothek von Microsoft (Microsoft.Authentication.WebAssembly.Msal). Das Paket stellt einige Primitive bereit, die der App beim Authentifizieren von Benutzern und beim Abrufen von Token zum Aufrufen geschützter APIs helfen.

Wenn Sie einer App eine Authentifizierung hinzufügen, fügen Sie das Paket Microsoft.Authentication.WebAssembly.Msal der App manuell hinzu:

Hinweis

Eine Anleitung zum Hinzufügen von Paketen zu .NET-Anwendungen finden Sie in den Artikeln unter Pakete installieren und verwalten unter Workflow für die Paketnutzung (NuGet-Dokumentation). Überprüfen Sie unter NuGet.org, ob die richtige Paketversion verwendet wird.

Das Microsoft.Authentication.WebAssembly.Msal-Paket fügt der App das Microsoft.AspNetCore.Components.WebAssembly.Authentication-Paket transitiv hinzu.

Unterstützung für Authentifizierungsdienste

Die Unterstützung für die Authentifizierung von Benutzern wird im Dienstcontainer mit der vom Paket Microsoft.Authentication.WebAssembly.Msal bereitgestellten AddMsalAuthentication-Erweiterungsmethode registriert. Diese Methode richtet alle Dienste ein, die erforderlich sind, damit die App mit dem Identitätsanbieter interagiert.

In der Program-Datei:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});

Die AddMsalAuthentication-Methode akzeptiert einen Rückruf zum Konfigurieren der für die Authentifizierung der App erforderlichen Parameter. Die für die Konfiguration der App erforderlichen Werte können Sie der ME-ID-Konfiguration entnehmen, wenn Sie die App registrieren.

wwwroot/appsettings.json-Konfiguration

Die Konfiguration wird durch die Datei wwwroot/appsettings.json bereitgestellt:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Beispiel:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "ValidateAuthority": true
  }
}

Zugriffstokenbereiche

Die Blazor WebAssembly-Vorlage konfiguriert die App nicht automatisch so, dass diese ein Zugriffstoken für eine sichere API anfordert. Zum Bereitstellen eines Zugriffstokens als Teil des Anmeldeflows fügen Sie den Bereich den Standard-Zugriffstokenbereichen von MsalProviderOptions hinzu:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Geben Sie zusätzliche Bereiche mit AdditionalScopesToConsent an:

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Hinweis

AdditionalScopesToConsent für Microsoft Graph über die Zustimmungsoberfläche von Microsoft Entra ID, wenn ein Benutzer zum ersten Mal eine App verwendet, die in Microsoft Azure registriert ist. Weitere Informationen finden Sie unter Verwenden der Graph-API mit ASP.NET CoreBlazor WebAssembly.

Weitere Informationen finden Sie in den folgenden Abschnitten des Artikels zu zusätzlichen Szenarios:

• Anfordern zusätzlicher Zugriffstoken
• Anfügen von Token an ausgehende Anforderungen
• Schnellstart: Konfigurieren einer Anwendung für das Verfügbarmachen von Web-APIs

Anmeldemodus

Das Framework ist standardmäßig auf den Popup-Anmeldemodus festgelegt und greift auf den Umleitungsanmeldemodus zurück, wenn kein Popup geöffnet werden kann. Konfigurieren Sie MSAL, um den Umleitungsanmeldemodus zu verwenden, indem Sie die LoginMode-Eigenschaft von MsalProviderOptions auf redirect festlegen:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

Die Standardeinstellung ist popup, und der Zeichenfolgenwert berücksichtigt keine Groß-/Kleinschreibung.

Imports-Datei

Der Microsoft.AspNetCore.Components.Authorization-Namespace wird in der gesamten App über die _Imports.razor-Datei verfügbar gemacht:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared

Indexseite

Die Indexseite (wwwroot/index.html) enthält ein Skript, das den AuthenticationService in JavaScript definiert. AuthenticationService behandelt die Details des OIDC-Protokolls auf niedriger Ebene. Die App ruft intern die im Skript definierten Methoden auf, um die Authentifizierungsvorgänge auszuführen.

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

App-Komponente

Die App-Komponente (App.razor) ähnelt der in den Blazor Server-Apps gefundenen App-Komponente:

• Die AuthorizeRouteView-Komponente stellt sicher, dass der aktuelle Benutzer autorisiert ist, auf eine bestimmte Seite zuzugreifen; andernfalls wird die RedirectToLogin-Komponente gerendert.
• Die RedirectToLogin-Komponente verwaltet die Umleitung nicht autorisierter Benutzer auf die Anmeldeseite.

Aufgrund von Änderungen im Framework in den verschiedenen Releases von ASP.NET Core wird in diesem Abschnitt kein Razor-Markup für die Komponente App (App.razor) angezeigt. Wenn Sie das Markup der Komponente für ein bestimmtes Release überprüfen möchten, verwenden Sie einen der folgenden Ansätze:

• Erstellen Sie eine für die Authentifizierung bereitgestellte App aus der Blazor WebAssembly-Standardprojektvorlage für die Version von ASP.NET Core, die Sie verwenden möchten. Untersuchen Sie die App-Komponente (App.razor) in der generierten App.

• Untersuchen Sie die App-Komponente (App.razor) in der Verweisquelle. Wählen Sie die Version aus der Verzweigungsselektor aus, und suchen Sie nach der Komponente im ProjectTemplates-Ordner des Repositorys, da sie im Laufe der Jahre verschoben wurde.

  Hinweis

  Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).

RedirectToLogin-Komponente

Die RedirectToLogin-Komponente (RedirectToLogin.razor):

• Verwaltet die Umleitung nicht autorisierter Benutzer auf die Anmeldeseite.
• Die aktuelle URL, auf die der Benutzer zuzugreifen versucht, wird beibehalten, damit er zu dieser Seite zurückkehren kann, wenn die Authentifizierung erfolgreich Folgendes verwendet:
  • Navigationsverlaufsstatus in ASP.NET Core in .NET 7 oder höher.
  • Eine Abfragezeichenfolge in ASP.NET Core in .NET 6 oder früher.

Untersuchen Sie die RedirectToLogin-Komponente in der Verweisquelle. Der Speicherort der Komponente wurde im Laufe der Zeit geändert. Verwenden Sie daher GitHub-Suchtools, um die Komponente zu finden.

Hinweis

Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).

LoginDisplay-Komponente

Die LoginDisplay-Komponente (LoginDisplay.razor) wird in der MainLayout-Komponente (MainLayout.razor) gerendert, und sie verwaltet die folgenden Verhaltensweisen:

• Für authentifizierte Benutzer:
  • Zeigt den aktuellen Benutzernamen an
  • Stellt einen Link zur Benutzerprofilseite in ASP.NET Core-Identity bereit
  • Bietet eine Schaltfläche zum Abmelden von der App
• Für anonyme Benutzer:
  • Bietet die Option zum Registrieren
  • Bietet die Option zur Anmeldung

Aufgrund von Änderungen im Framework in den verschiedenen Releases von ASP.NET Core wird in diesem Abschnitt kein Razor-Markup für die Komponente LoginDisplay angezeigt. Wenn Sie das Markup der Komponente für ein bestimmtes Release überprüfen möchten, verwenden Sie einen der folgenden Ansätze:

• Erstellen Sie eine für die Authentifizierung bereitgestellte App aus der Blazor WebAssembly-Standardprojektvorlage für die Version von ASP.NET Core, die Sie verwenden möchten. Überprüfen Sie die Komponente LoginDisplay in der generierten App.

• Überprüfen Sie die Komponente LoginDisplay in der Verweisquelle. Der Speicherort der Komponente wurde im Laufe der Zeit geändert. Verwenden Sie daher GitHub-Suchtools, um die Komponente zu finden. Es wird der vorlagenbasierte Inhalt für Hosted gleich true verwendet.

  Hinweis

  Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).

Authentication-Komponente

Die von der Komponente Authentication (Pages/Authentication.razor) erstellte Seite definiert die Routen, die für die Verarbeitung unterschiedlicher Authentifizierungsstufen erforderlich sind.

Die Komponente RemoteAuthenticatorView:

• Wird vom Paket Microsoft.AspNetCore.Components.WebAssembly.Authentication bereitgestellt.
• Verwaltet die entsprechenden Aktionen in jeder Phase der Authentifizierung.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string? Action { get; set; }
}

Hinweis

Nullwerte zulassende Verweistypen (Nullable Reference Types, NRTs) und die statische Analyse des NULL-Zustands des .NET-Compilers wird in ASP.NET Core in .NET 6 oder höher unterstützt. Vor der Veröffentlichung von ASP.NET Core in .NET 6 wird der string-Typ ohne die NULL-Typbezeichnung (?) angezeigt.

Problembehandlung

Logging

Informationen zum Aktivieren der Debugging- oder Überwachungsprotokollierung für die Blazor WebAssembly-Authentifizierung finden Sie im Abschnitt Clientseitige Authentifizierungsprotokollierung im Artikel Blazor-Protokollierung in ASP.NET Core unter der Artikelversion ASP.NET Core 7.0 oder höher.

Häufige Fehler

• Falsche Konfiguration der App oder des Identity-Anbieters (Identity Provider, IP)

  Die häufigsten Fehler werden durch eine falsche Konfiguration verursacht. Im Folgenden finden Sie einige Beispiele:

  • In Abhängigkeit von den Anforderungen des Szenarios verhindert eine fehlende oder falsche Autorität, Instanz, Mandanten-ID, Mandantendomäne oder Client-ID oder ein fehlender oder falscher Umleitungs-URI, dass Clients von einer App authentifiziert werden.
  • Falsche Anforderungsbereiche verhindern, dass Clients auf die Web-API-Endpunkte des Servers zugreifen können.
  • Falsche oder fehlende Server-API-Berechtigungen verhindern, dass Clients auf Server-Web-API-Endpunkte zugreifen können.
  • Das Ausführen der App an einem anderen Port als dem, der im Umleitungs-URI der App-Registrierung für die IP konfiguriert ist. Beachten Sie, dass für Microsoft Entra ID und eine App, die unter einer localhost-Entwicklungstestadresse ausgeführt wird, kein Port erforderlich ist. Die Portkonfiguration der App und der Port, an dem die App ausgeführt wird, müssen bei Nicht-localhost-Adressen jedoch übereinstimmen.

  Die Konfigurationsabschnitte in den Anleitungen in diesem Artikel enthalten Beispiele für die richtige Konfiguration. Lesen Sie jeden Abschnitt des Artikels sorgfältig durch, und achten Sie auf falsche App- und IP-Konfigurationen.

  Wenn die Konfiguration anscheinend korrekt ist:

  • Analysieren Sie Anwendungsprotokolle.

  • Überprüfen Sie den Netzwerkdatenverkehr zwischen der Client-App und dem IP oder der Server-App mit den Entwicklertools des Browsers. Häufig wird vom IP oder von der Server-App eine präzise Fehlermeldung oder eine Meldung mit einem Hinweis auf die Ursache des Problems zurückgegeben, nachdem eine Anforderung erfolgt ist. Anleitungen zu den Entwicklertools finden Sie in den folgenden Artikeln:

    • Google Chrome (Google-Dokumentation)
    • Microsoft Edge
    • Mozilla Firefox (Mozilla-Dokumentation)

  • Decodieren Sie bei Blazor-Releases, in denen ein JSON Web Token (JWT) verwendet wird, den Inhalt des Tokens, das für die Authentifizierung eines Clients oder den Zugriff auf die Web-API des Servers verwendet wird. Letzteres hängt davon ab, wo das Problem auftritt. Weitere Informationen finden Sie unter Überprüfen des Inhalts eines JSON Web Tokens (JWT).

  Das Dokumentationsteam berücksichtigt Feedback zur Dokumentation und zu Fehlern in Artikeln. (Legen Sie im Feedbackbereich auf dieser Seite ein Ticket an.) Es leistet jedoch keinen Produktsupport. Es gibt einige öffentliche Supportforen, die bei der Problembehandlung für eine App weiterhelfen. Es wird Folgendes empfohlen:

  • Stack Overflow (Tag: blazor)
  • ASP.NET Core Slack-Team
  • Blazor Gitter

  Die genannten Foren werden nicht von Microsoft betrieben oder kontrolliert.

  Bei nicht sicherheitsbezogenen, nicht sensiblen und nicht vertraulichen Fehlerberichten zum Framework wird legen Sie ein Ticket für die ASP.NET Core-Produkteinheit an. Legen Sie ein Ticket für die Produkteinheit erst an, wenn Sie die Ursache eines Problems gründlich untersucht haben und es nicht selbst oder mithilfe der Community in einem öffentlichen Supportforum lösen konnten. Die Produkteinheit kann keine Problembehandlung für einzelne Apps durchführen, die aufgrund einer einfachen Fehlkonfiguration oder in Anwendungsfällen mit Drittanbieterdiensten nicht funktionieren. Wenn ein Bericht sensibler oder vertraulicher Natur ist oder eine potenzielle Sicherheitslücke im Produkt beschreibt, die von Cyberkriminellen ausgenutzt werden könnte, lesen Sie bitte Melden von Sicherheitsproblemen und Fehlern (dotnet/aspnetcore GitHub Repository).

• Nicht autorisierter Client für ME-ID

  Info: Die Autorisierung von Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Authorization ist fehlgeschlagen. Diese Anforderungen wurden nicht erfüllt: DenyAnonymousAuthorizationRequirement: Erfordert einen authentifizierten Benutzer.

  Anmelderückruffehler von ME-ID:

  • Fehler: unauthorized_client
  • Description (Beschreibung): AADB2C90058: The provided application is not configured to allow public clients.

  So beheben Sie den Fehler

  1. Greifen Sie im Azure-Portal auf das Manifest der App zu.
  2. Legen Sie das allowPublicClient-Attribut auf null oder true fest.

Cookies und Standortdaten

Cookies und Standortdaten können über App-Updates hinweg beibehalten werden und das Testen und die Problembehandlung beeinträchtigen. Entfernen Sie Folgendes, wenn Sie Änderungen am App-Code, Änderungen an den Benutzerkonten beim Anbieter oder Konfigurationsänderungen an Anbieter-Apps vornehmen:

• Anmelde-Cookies von Benutzern
• App-Cookies
• Zwischengespeicherte und gespeicherte Standortdaten

Ein Ansatz, um zu verhindern, dass veraltete Cookies und Standortdaten das Testen und die Problembehandlung beeinträchtigen, ist folgender:

• Browser konfigurieren
  • Verwenden Sie zum Testen einen Browser, den Sie so konfigurieren können, dass alle cookies und Standortdaten jedes Mal gelöscht werden, wenn der Browser geschlossen wird.
  • Stellen Sie sicher, dass der Browser manuell oder durch die IDE für alle Änderungen an der App, dem Testbenutzer oder der Anbieterkonfiguration geschlossen wird.
• Verwenden Sie einen benutzerdefinierten Befehl, um in Visual Studio einen Browser im privaten oder Inkognito-Modus zu öffnen:
  • Öffnen Sie mithilfe der Schaltfläche Ausführen von Visual Studio das Dialogfeld Browserauswahl.
  • Wählen Sie die Schaltfläche Hinzufügen aus.
  • Geben Sie im Feld Programm den Pfad zu Ihrem Browser an. Die folgenden Pfade für ausführbare Dateien sind typische Installationspfade für Windows 10. Wenn Ihr Browser an einem anderen Speicherort installiert ist oder Sie nicht Windows 10 verwenden, geben Sie den Pfad zur ausführbaren Datei des Browsers an.
    • Microsoft Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
    • Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
    • Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
  • Geben Sie im Feld Argumente die Befehlszeilenoption an, die der Browser verwendet, um im privaten oder Inkognito-Modus geöffnet zu werden. Für einige Browser ist die URL der App erforderlich.
    • Microsoft Edge: Verwenden Sie -inprivate.
    • Google Chrome: Verwenden Sie --incognito --new-window {URL}, wobei der Platzhalter {URL} die zu öffnende URL ist (z. B. https://localhost:5001).
    • Mozilla Firefox: Verwenden Sie -private -url {URL}, wobei der Platzhalter {URL} die zu öffnende URL ist (z. B. https://localhost:5001).
  • Geben Sie im Feld Anzeigename einen Namen ein. Beispielsweise Firefox Auth Testing.
  • Klicken Sie auf die Schaltfläche OK.
  • Um zu vermeiden, dass das Browserprofil für jede einzelne Testiteration einer App ausgewählt werden muss, legen Sie das Profil mithilfe der Schaltfläche Als Standard festlegen als Standard fest.
  • Stellen Sie sicher, dass der Browser von der IDE für alle Änderungen an der App, dem Testbenutzer oder der Anbieterkonfiguration geschlossen wird.

App-Upgrades

Eine funktionsfähige App kann direkt nach der Durchführung eines Upgrades für das .NET Core SDK auf dem Entwicklungscomputer oder einer Änderung der Paketversionen in der App fehlschlagen. In einigen Fällen können inkohärente Pakete eine App beschädigen, wenn größere Upgrades durchgeführt werden. Die meisten dieser Probleme können durch Befolgung der folgenden Anweisungen behoben werden:

1. Löschen Sie die Caches für NuGet-Pakete auf dem lokalen System, indem Sie dotnet nuget locals all --clear in einer Befehlsshell ausführen.
2. Löschen Sie die Ordner bin und obj des Projekts.
3. Stellen Sie das Projekt wieder her und erstellen Sie es neu.
4. Löschen Sie alle Dateien im Bereitstellungsordner auf dem Server, bevor Sie die App noch mal bereitstellen.

Hinweis

Die Verwendung von Paketversionen, die mit dem Zielframework der App nicht kompatibel sind, wird nicht unterstützt. Informationen zu einem Paket finden Sie mithilfe der NuGet Gallery oder des FuGet Package Explorer.

Überprüfen des Benutzers

Die folgende User-Komponente kann direkt in Anwendungen verwendet werden oder als Grundlage für weitere Anpassungen dienen.

User.razor:

@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService

<h1>@AuthenticatedUser?.Identity?.Name</h1>

<h2>Claims</h2>

@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
    <p class="claim">@(claim.Type): @claim.Value</p>
}

<h2>Access token</h2>

<p id="access-token">@AccessToken?.Value</p>

<h2>Access token claims</h2>

@foreach (var claim in GetAccessTokenClaims())
{
    <p>@(claim.Key): @claim.Value.ToString()</p>
}

@if (AccessToken != null)
{
    <h2>Access token expires</h2>

    <p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
    <p id="access-token-expires">@AccessToken.Expires</p>

    <h2>Access token granted scopes (as reported by the API)</h2>

    @foreach (var scope in AccessToken.GrantedScopes)
    {
        <p>Scope: @scope</p>
    }
}

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationState { get; set; }

    public ClaimsPrincipal AuthenticatedUser { get; set; }
    public AccessToken AccessToken { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var state = await AuthenticationState;
        var accessTokenResult = await AuthorizationService.RequestAccessToken();

        if (!accessTokenResult.TryGetToken(out var token))
        {
            throw new InvalidOperationException(
                "Failed to provision the access token.");
        }

        AccessToken = token;

        AuthenticatedUser = state.User;
    }

    protected IDictionary<string, object> GetAccessTokenClaims()
    {
        if (AccessToken == null)
        {
            return new Dictionary<string, object>();
        }

        // header.payload.signature
        var payload = AccessToken.Value.Split(".")[1];
        var base64Payload = payload.Replace('-', '+').Replace('_', '/')
            .PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');

        return JsonSerializer.Deserialize<IDictionary<string, object>>(
            Convert.FromBase64String(base64Payload));
    }
}

Überprüfen des Inhalts eines JSON Web Tokens (JWT)

Verwenden Sie zum Decodieren eines JSON Web Tokens (JWT) das Tool jwt.ms von Microsoft. Werte in der Benutzeroberfläche verlassen nie Ihren Browser.

Beispiel für ein codiertes JWT (für die Darstellung gekürzt):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Beispiel-JWT, das mit dem Tool für eine App decodiert wurde, das bei Azure AAD B2C authentifiziert wird:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
  "sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Zusätzliche Ressourcen

• Zusätzliche Sicherheitsszenarios für Blazor WebAssembly in ASP.NET Core
• Erstellen einer benutzerdefinierten Version der Authentication.MSAL-JavaScript-Bibliothek
• Nicht authentifizierte oder nicht autorisierte Web-API-Anforderungen in einer App mit einem sicheren Standardclient
• ASP.NET Core Blazor WebAssembly mit Microsoft Entra ID-Gruppen und -Rollen
• Schnellstart: Registrieren einer Anwendung bei der Microsoft identity-Plattform
• Schnellstart: Konfigurieren einer Anwendung für das Verfügbarmachen von Web-APIs