Sichern einer ASP.NET Core Blazor WebAssembly eigenständigen App mit Microsoft Entra ID

In diesem Artikel wird erläutert, wie Sie eine standalone Blazor WebAssembly app erstellen, die Microsoft Entra ID (ME-ID) für die Authentifizierung verwendet.

Weitere Sicherheitsszenario-Abdeckungen nach dem Lesen dieses Artikels finden Sie unter ASP.NET Core Blazor WebAssembly zusätzliche Sicherheitsszenarien.

Walkthrough

In den Unterabschnitten der Schritt-für-Schritt-Anleitung 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 die Anweisungen im 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 zum Microsoft Entra ID im Azure-Portal. Wählen Sie Applications>App-Registrierungen in der Randleiste 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).
3. Wählen Sie einen Unterstützten Kontotyp aus. Hier können Sie die Option Nur Konten in diesem Organisationsverzeichnis für dieses Erlebnis auswählen.
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 hinzufügen, während Sie den localhost Umleitungs-URI bereitstellen. 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 aus.

Notieren Sie sich folgende Informationen:

• Anwendungs-ID (Client-ID) (z. B. 00001111-aaaa-2222-bbbb-3333cccc4444)
• Verzeichnis-ID (Mandanten-ID) (z. B. aaaabbbb-0000-cccc-1111-dddd2222eeee)

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 unter Secure ASP.NET Core Blazor WebAssembly.
3. Die verbleibenden Standardwerte für die App sind für diese Erfahrung akzeptabel.
4. Wählen Sie die Schaltfläche Speichern aus, wenn Sie Änderungen vorgenommen haben.

Erstellen der Blazor-App

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

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

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

Fügen Sie MsalProviderOptions für User.Read-Berechtigung mit DefaultAccessTokenScopes hinzu:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes
        .Add("https://graph.microsoft.com/User.Read");
});

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) aus dem Ordner der App aus.

Pfade zur Remote-Authentifizierung

Remotebestätigungspfade werden mithilfe von RemoteAuthenticationApplicationPathsOptions in der RemoteAuthenticationOptions<TRemoteAuthenticationProviderOptions>.AuthenticationPaths-Eigenschaftsdatei der App Program angepasst. Die Standardpfadwerte des Frameworks finden Sie in der dotnet/aspnetcore Referenzquelle.

Wenn eine App einen Remoteauthentifizierungspfad anpasst, führen Sie eine der folgenden Ansätze aus:

• Vergleichen Sie den Pfad in hartkodierten Zeichenfolgen innerhalb der App.

• Injizieren Sie Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationOptions<TRemoteAuthenticationProviderOptions>, um den konfigurierten Wert in der App abzurufen. Im folgenden Beispiel wird der Ansatz für die RedirectToLogin Komponente veranschaulicht.

  Fügen Sie die folgenden Razor Direktiven am Anfang der Datei der Komponente Razor hinzu:

  @using Microsoft.Extensions.Options
  @inject IOptionsSnapshot<RemoteAuthenticationOptions<ApiAuthorizationProviderOptions>> RemoteOptions
  

  Ändern Sie die Umleitung der Komponente in der OnInitialized Methode:

  - Navigation.NavigateToLogin("authentication/login");
  + Navigation.NavigateToLogin(RemoteOptions.Get(Options.DefaultName)
  +     .AuthenticationPaths.LogInPath);
  

  Note

  Wenn andere Pfade von den Pfaden der Projektvorlage oder den Standardpfaden des Frameworks abweichen, verwalten Sie sie auf die gleiche Weise.

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 für die Verwendung von Geschäfts- oder Schulkonten (SingleOrg) erstellt wird, empfängt die App automatisch einen Paketverweis für die Microsoft Authentication Library (MSAL) (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 die Authentifizierung hinzufügen, fügen Sie der App manuell das Microsoft.Authentication.WebAssembly.Msal-Paket hinzu.

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

Unterstützung für Authentifizierungsdienste

Unterstützung für die Authentifizierung von Benutzern wird im Dienstcontainer mit der AddMsalAuthentication Erweiterungsmethode registriert, die von der Microsoft.Authentication.WebAssembly.Msal package bereitgestellt wird. Diese Methode richtet die Dienste ein, die erforderlich sind, damit die App mit dem Identity-Anbieter (IP) 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/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Example:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
    "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}");

Weitere Informationen finden Sie in den folgenden Ressourcen:

• Anfordern zusätzlicher Zugriffstoken
• Tokens an ausgehende Anfragen anhängen
• Schnellstart: Konfigurieren einer Anwendung für das Verfügbarmachen von Web-APIs
• Access-Tokenbereiche für Microsoft Graph-API

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 Umleitungs-Anmeldemodus 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.

Importiert die Datei

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

...
@using Microsoft.AspNetCore.Components.Authorization
...

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 App-Apps gefundenen Blazor Server-Komponente:

Aufgrund von Änderungen im Framework in verschiedenen Versionen von ASP.NET Core wird das Razor-Markup für die Komponente App (App.razor) in diesem Abschnitt nicht 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 Standardprojektvorlage Blazor WebAssembly 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 dem Verzweigungsselektor, und suchen Sie nach der Komponente im ProjectTemplates-Ordner des Repository, da sie im Laufe der Jahre verschoben wurde.

  Note

  Dokumentationslinks zu .NET-Referenzquellen laden normalerweise den Standardbranch des Repositorys, der die aktuelle Entwicklung der nächsten .NET-Veröffentlichung 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 Wie man einen Versionstag des ASP.NET Core-Quellcodes auswählt (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 zugreifen möchte, wird beibehalten, damit sie auf diese Seite zurückgegeben werden können, wenn die Authentifizierung erfolgreich verwendet wird:
  • Navigationsverlaufszustand in ASP.NET Core in .NET 7 oder höher.
  • Eine Abfragezeichenfolge in ASP.NET Core in .NET 6 oder früheren Versionen.

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

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
  • Bietet einen Link zur Benutzerprofilseite in ASP.NET Core Identity.
  • 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 Versionen von ASP.NET Core wird das Razor-Markup für die Komponente LoginDisplay in diesem Abschnitt nicht 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 Standardprojektvorlage Blazor WebAssembly für die Version von ASP.NET Core, die Sie verwenden möchten. Überprüfen Sie die Komponente LoginDisplay in der generierten App.

• Untersuchen Sie die LoginDisplay-Komponente in der Verweisquelle. Die Position 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.

  Note

  Dokumentationslinks zu .NET-Referenzquellen laden normalerweise den Standardbranch des Repositorys, der die aktuelle Entwicklung der nächsten .NET-Veröffentlichung 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 Wie man einen Versionstag des ASP.NET Core-Quellcodes auswählt (dotnet/AspNetCore.Docs #26205).

Authentifizierungskomponente

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 Microsoft.AspNetCore.Components.WebAssembly.Authentication package bereitgestellt.
• Verwaltet die Durchführung der 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; }
}

Troubleshoot

Logging

Informationen zum Aktivieren der Debug- oder Ablaufverfolgungsprotokollierung für die Blazor WebAssembly-Authentifizierung finden Sie im Abschnitt Clientseitige Authentifizierungsprotokollierung des ASP.NET Core Blazor Protokollierung, wobei die Artikelversionsauswahl auf ASP.NET Core in .NET 7 oder höher festgelegt ist.

Häufige Fehler

• Falsche Konfiguration der App oder des Identity-Anbieters (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 an einer localhost Entwicklungstestadresse ausgeführt wird, kein Port erforderlich ist. Allerdings müssen bei Nicht-localhost-Adressen die Portkonfiguration der App und der Port, auf dem die App läuft, ü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. Entwicklertools-Anleitung 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 vorherigen Foren gehören nicht Microsoft und werden nicht von Microsoft kontrolliert.

  Bei nicht sicherheitsrelevanten, nicht vertraulichen und nicht sensiblen, reproduzierbaren Framework-Fehlerberichten öffnen Sie ein Problem mit der Produkteinheit von ASP.NET Core. 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 vertraulich oder sensibel ist oder einen potenziellen Sicherheitsfehler im Produkt beschreibt, den Cyberangreifer ausnutzen könnten, lesen Sie Melden von Sicherheitsproblemen und Fehlern (dotnet/aspnetcore GitHub Repository).

• Nicht autorisierter Client für ME-ID

  info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Autorisierung 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 einen Browser im InPrivate- oder Inkognito-Modus in Visual Studio zu öffnen:
  • Öffnen Sie das Dialogfeld Browse With aus der Schaltfläche Visual Studio Run.
  • Wählen Sie die Schaltfläche Hinzufügen aus.
  • Geben Sie im Feld Programm den Pfad zu Ihrem Browser an. Die folgenden ausführbaren Pfade sind typische Installationsorte für Windows 10. Wenn Ihr Browser an einem anderen Speicherort installiert ist oder Sie Windows 10 nicht 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 funktionierende App kann unmittelbar nach dem Upgrade des .NET SDK auf dem Entwicklungscomputer oder beim Ändern von Paketversionen innerhalb 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.

Ü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)

Um ein JSON Web Token (JWT) zu decodieren, verwenden Sie Microsoft jwt.ms Tool. 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 decodiert vom Tool für eine App, die sich für Azure AAD B2C authentifiziert:

{
  "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]

Weitere Ressourcen

• Identity und Kontotypen für Einzel- und Mehrinstanzen-Apps
• ASP.NET Core Blazor WebAssembly zusätzliche Sicherheitsszenarien
• 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
• Microsoft Identity Platform und Microsoft Entra ID mit ASP.NET Core
• Microsoft-Identity-Plattform-Dokumentation
• Sicherheitsbestpraktiken für Anwendungeigenschaften in Microsoft Entra ID