Konfigurieren der Authentifizierung in einer Beispielweb-App, die eine Web-API mithilfe von Azure AD B2C aufruft

2025-05-08

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel wird ein Beispiel ASP.NET Webanwendung verwendet, die eine Web-API aufruft, um zu veranschaulichen, wie Azure Active Directory B2C (Azure AD B2C)-Authentifizierung zu Ihren Webanwendungen hinzugefügt wird.

Von Bedeutung

Das Beispiel ASP.NET Web-App, auf die in diesem Artikel verwiesen wird, wird verwendet, um eine Web-API mit einem Bearertoken aufzurufen. Eine Web-App, die keine Web-API aufruft, finden Sie unter Konfigurieren der Authentifizierung in einer Beispielwebanwendung mithilfe von Azure AD B2C.

Überblick

OpenID Connect (OIDC) ist ein Authentifizierungsprotokoll, das auf OAuth 2.0 basiert. Sie können OIDC verwenden, um einen Benutzer sicher bei einer Anwendung anzumelden. In diesem Web-App-Beispiel wird Microsoft Identity Web verwendet. Microsoft Identity Web ist eine Reihe von ASP.NET Core-Bibliotheken, die das Hinzufügen von Authentifizierungs- und Autorisierungsunterstützung zu Web-Apps vereinfachen, die eine sichere Web-API aufrufen können.

Der Anmeldeflow umfasst die folgenden Schritte:

Benutzer navigieren zur Web-App und wählen Anmelden aus.
Die App löst eine Authentifizierungsanforderung aus und leitet Benutzer an Azure AD B2C um.
Benutzer registrieren oder melden sich an und setzen das Kennwort zurück. Alternativ können sie sich mit einem Social Media-Konto anmelden.
Nach erfolgreicher Benutzeranmeldung gibt Azure AD B2C einen Autorisierungscode an die App zurück.
Die App führt dann die folgenden Aktionen aus:

a) Der Autorisierungscode wird in ein ID-Token, ein Zugriffstoken und ein Aktualisierungstoken umgewandelt.
b. Er liest die ID-Tokenansprüche und speichert ein Anwendungsautorisierungscookies.
Abschnitt c. Es speichert das Aktualisierungstoken für die spätere Verwendung in einem Speichercache.

Übersicht über die App-Registrierung

Damit sich Ihre App bei Azure AD B2C anmelden und eine Web-API aufrufen kann, registrieren Sie im Azure AD B2C-Verzeichnis zwei Anwendungen.

Durch die Webanwendungsregistrierung kann sich Ihre App bei Azure AD B2C anmelden. Während der Registrierung geben Sie den Umleitungs-URI an. Der Umleitungs-URI ist der Endpunkt, an den Benutzer von Azure AD B2C umgeleitet werden, nachdem die Authentifizierung mithilfe von Azure AD B2C abgeschlossen ist. Beim App-Registrierungsprozess wird eine Anwendungs-ID generiert, die auch als Client-ID bezeichnet wird und Ihre App eindeutig identifiziert. Außerdem erstellen Sie einen geheimen Clientschlüssel, der von Ihrer App zum sicheren Abrufen der Token verwendet wird.
Durch die Web-API-Registrierung kann Ihre App eine sichere Web-API aufrufen. Die Registrierung umfasst die Web-API-Bereiche. Die Bereiche bieten eine Möglichkeit, Berechtigungen für geschützte Ressourcen wie Ihre Web-API zu verwalten. Sie erteilen der Webanwendung Berechtigungen für die Bereiche der Web-API. Wenn ein Zugriffstoken angefordert wird, gibt Ihre App im Bereichsparameter der Anforderung die gewünschten Berechtigungen an.

App-Architektur und -Registrierungen sind im folgenden Diagramm dargestellt:

Diagramm einer Web-App mit Web-API-Aufrufregistrierungen und Token.

Aufrufen einer Web-API

Nach Abschluss der Authentifizierung interagieren Benutzer mit der App, die eine geschützte Web-API aufruft. Die Web-API verwendet die Authentifizierung per Bearertoken. Das Bearertoken ist das Zugriffstoken, das von Azure AD B2C abgerufen wird. Die App übergibt das Token im Autorisierungsheader der HTTPS-Anforderung.

Authorization: Bearer <access token>

Wenn der Zugriffstokenbereich nicht mit den Web-API-Bereichen übereinstimmt, ruft die Authentifizierungsbibliothek ein neues Zugriffstoken mit den richtigen Bereichen ab.

Abmelden

Der Abmeldeflow umfasst die folgenden Schritte:

In der App melden sich Benutzer ab.
Die App löscht ihre Sitzungsobjekte, und die Authentifizierungsbibliothek leert ihren Tokencache.
Die App leitet den Benutzer zum Azure AD B2C-Abmeldeendpunkt, um die Azure AD B2C-Sitzung zu beenden.
Benutzer werden zurück zur App geleitet.

Voraussetzungen

Ein Computer, auf dem eine der folgenden Aktionen ausgeführt wird:

Visual Studio
Visual Studio Code

Visual Studio 2022 17.0 oder höher mit der Arbeitsauslastung für ASP.NET und Webentwicklung
.NET 6.0 SDK

Schritt 1: Konfigurieren Ihres Benutzerflows

Wenn Benutzer versuchen, sich bei Ihrer App anzumelden, startet die App über einen Benutzerflow eine Authentifizierungsanforderung an den Autorisierungsendpunkt. Der Benutzerflow definiert und kontrolliert die Benutzeroberfläche. Nachdem Benutzer den Benutzerflow abgeschlossen haben, generiert Azure AD B2C ein Token und leitet den Benutzer anschließend wieder zurück zu Ihrer Anwendung.

Falls noch nicht geschehen, erstellen Sie einen Benutzerflow oder eine benutzerdefinierte Richtlinie. Wiederholen Sie die Schritte, um drei separate Benutzerflows wie folgt zu erstellen:

Kombinierter Benutzerflow für Registrierung und Anmeldung, z. B. susi. Dieser Benutzerflow unterstützt auch die Umgebung Kennwort vergessen.
Benutzerflow für die Profilbearbeitung, z. B. edit_profile.
Benutzerflow für die Kennwortzurücksetzung, z. B. reset_password.

Azure AD B2C stellt B2C_1_ dem Benutzerflownamen voran. Beispielsweise wird susi zu B2C_1_susi.

Schritt 2: Registrieren von Webanwendungen

In diesem Schritt erstellen Sie die Web-App und die Web-API-Anwendungsregistrierung und geben die Bereiche Ihrer Web-API an.

Schritt 2.1: Registrieren der Web-API-App

Führen Sie die folgenden Schritte aus, um die Web-API-App-Registrierung (App-ID: 2) zu erstellen:

Melden Sie sich beim Azure-Portal an.
Stellen Sie sicher, dass Sie das Verzeichnis verwenden, das Ihren Azure AD B2C-Mandanten enthält. Wählen Sie auf der Symbolleiste des Portals das Symbol Verzeichnisse und Abonnements aus.
Suchen Sie auf der Seite Portaleinstellungen > Verzeichnisse und Abonnements das Azure AD B2C-Verzeichnis in der Liste Verzeichnisname, und klicken Sie dann auf Wechseln.
Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.
Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.
Geben Sie für Name einen Namen für die Anwendung ein, z. B. my-api1. Behalten Sie die Standardwerte für Umleitungs-URI und Unterstützte Kontotypen bei.
Wählen Sie Registrieren aus.
Wählen Sie nach Abschluss der App-Registrierung Übersichtaus.
Notieren Sie sich die Anwendungs- bzw. Client-ID, die Sie später beim Konfigurieren der Webanwendung verwenden.

Schritt 2.2: Konfigurieren von Web-API-App-Bereichen

Wählen Sie die von Ihnen erstellte Anwendung my-api1 (App-ID: 2) aus, um deren Seite Übersicht zu öffnen.
Wählen Sie unter Verwalten die Option Eine API verfügbar machen aus.
Wählen Sie neben Anwendungs-ID-URI den Link Festlegen aus. Ersetzen Sie den Standardwert (GUID) durch einen eindeutigen Namen, z. B. tasks-api, und wählen Sie dann Speichern aus.

Wenn Ihre Webanwendung ein Zugriffstoken für die Web-API anfordert, sollte sie diesen URI als Präfix für jeden Bereich hinzufügen, den Sie für die API definieren.
Wählen Sie unter Durch diese API definierte Bereiche die Option Bereich hinzufügen aus.
So erstellen Sie einen Bereich, der Lesezugriff auf die API festlegt:
1. Geben Sie für Bereichsnametasks.read ein.
2. Geben Sie für Anzeigename der AdministratoreinwilligungLesezugriff auf Aufgaben-API ein.
3. Geben Sie für Beschreibung der AdministratoreinwilligungLässt Lesezugriff auf die Aufgaben-API zu ein.
Wählen Sie "Bereich hinzufügen" aus.
Wählen Sie Bereich hinzufügen aus, und geben Sie dann einen Bereich ein, der den Schreibzugriff auf die API festlegt:
1. Geben Sie für Bereichsnametasks.write ein.
2. Geben Sie für Anzeigename der AdministratoreinwilligungSchreibzugriff auf Aufgaben-API ein.
3. Geben Sie für Beschreibung der AdministratoreinwilligungLässt Schreibzugriff auf die Aufgaben-API zu ein.
Wählen Sie "Bereich hinzufügen" aus.

Schritt 2.3: Registrieren der Web-App

Gehen Sie wie folgt vor, um die Web-App-Registrierung zu erstellen:

Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.
Geben Sie unter "Name" einen Namen für die Anwendung ein (z. B. webapp1).
Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Identitätsanbieter oder Organisationsverzeichnis (zum Authentifizieren von Benutzenden mit Benutzerflows) aus.
Wählen Sie unter Umleitungs-URI die Option Web aus, und geben Sie https://localhost:5000/signin-oidc in das URL-Feld ein.
Aktivieren Sie unter Berechtigungen das Kontrollkästchen Administratoreinwilligung für OpenID- und Offlinezugriffsberechtigungen erteilen.
Wählen Sie Registrieren aus.
Wählen Sie nach Abschluss der App-Registrierung Übersichtaus.
Notieren Sie sich die Anwendungs- bzw. Client-ID, die Sie später beim Konfigurieren der Webanwendung verwenden.

Schritt 2.4: Erstellen eines geheimen Web-App-Clientschlüssels

Erstellen Sie einen geheimen Clientschlüssel für die registrierte Webanwendung. Die Webanwendung verwendet den geheimen Clientschlüssel, um seine Identität zu beweisen, wenn sie Token anfordert.

Wählen Sie unter Verwalten die Option Zertifikate und Geheimnisse aus.
Wählen Sie Neuen geheimen Clientschlüsselaus.
Geben Sie im Feld "Beschreibung " eine Beschreibung für den geheimen Clientschlüssel ein (z. B. Clientsecret1).
Wählen Sie unter Läuft ab einen Zeitraum aus, für den das Geheimnis gültig ist, und wählen Sie dann Hinzufügen aus.
Notieren Sie den Wert des Geheimnisses. Dieser Wert wird in einem späteren Schritt für die Konfiguration verwendet.

Schritt 2.5: Erteilen der Web-App-Berechtigungen für die Web-API

Führen Sie die folgenden Schritte aus, um Ihrer App (App-ID: 1) Berechtigungen zu erteilen:

Wählen Sie App-Registrierungen und dann die von Ihnen erstellte App (App-ID: 1) aus.
Wählen Sie unter Verwaltendie Option API-Berechtigungenaus.
Wählen Sie unter Konfigurierte Berechtigungen die Option Berechtigung hinzufügen aus.
Wählen Sie die Registerkarte Meine APIs aus.
Wählen Sie die API aus, für die der Webanwendung Zugriff gewährt werden soll (App-ID: 2). Geben Sie z. B. my-api1 ein.
Erweitern Sie unter Berechtigung den Eintrag Aufgaben, und wählen Sie die zuvor definierten Bereiche aus (Beispiel: tasks.read und tasks.write).
Wählen Sie "Berechtigungen hinzufügen" aus.
Wählen Sie Administratorzustimmung erteilen für<Name Ihres Mandanten> aus.
Wählen Sie Ja aus.
Wählen Sie Aktualisieren aus, und vergewissern Sie sich, dass für beide Bereiche unter Status der Status Gewährt für... angezeigt wird.
Wählen Sie in der Liste Konfigurierte Berechtigungen Ihren Bereich aus, und kopieren Sie dann den vollständigen Namen des Bereichs.

Schritt 3: Herunterladen des Web-App-Beispiels

Laden Sie die ZIP-Datei herunter, oder führen Sie den folgenden Bash-Befehl aus, um die Beispielwebanwendung von GitHub zu klonen.

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Extrahieren Sie die Beispieldatei in einen Ordner, bei dem die Gesamtlänge des Pfads 260 oder weniger Zeichen oder umfasst.

Schritt 4: Konfigurieren der Beispielweb-API

Öffnen Sie im Beispielordner im Ordner 4-WebApp-your-API/4-2-B2C/TodoListService das Projekt TodoListService.csproj mit Visual Studio oder Visual Studio Code.

Öffnen Sie im Projektstammordner die Datei appsettings.json. Diese Datei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter. Die Web-API-App verwendet diese Informationen, um das Zugriffstoken zu überprüfen, das die Web-App als Bearertoken übergibt. Aktualisieren Sie die folgenden Eigenschaften der App-Einstellungen:

`Section`	Schlüssel	Wert
AzureAdB2C	Beispiel	Der erste Teil Ihres Azure AD B2C-Mandantennamens. Beispiel: `https://contoso.b2clogin.com`.
AzureAdB2C	Domäne	Der vollständige Mandantenname Ihres Azure AD B2C-Mandanten. Beispiel: `contoso.onmicrosoft.com`.
AzureAdB2C	ClientId	Die Web-API-Anwendungs-ID aus Schritt 2.1.
AzureAdB2C	SignUpSignInPolicyId	Die Benutzerflows oder die benutzerdefinierte Richtlinie, die Sie in Schritt 1 erstellt haben.

Die endgültige Konfigurationsdatei sollte wie die folgende JSON-Datei aussehen:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Schritt 4.1: Festlegen der Berechtigungsrichtlinie

Die Web-API überprüft, ob der Benutzer mit dem Bearertoken authentifiziert wurde, und das Bearertoken hat die konfigurierten akzeptierten Bereiche. Wenn das Bearertoken keinen dieser akzeptierten Bereiche aufweist, gibt die Web-API DEN HTTP-Statuscode 403 (Verboten) zurück und schreibt in den Antworttext eine Meldung, die angibt, welche Bereiche im Token erwartet werden.

Um die akzeptierten Bereiche zu konfigurieren, öffnen Sie die Controller/TodoListController.cs Klasse, und legen Sie den Bereichsnamen ohne den vollständigen URI fest.

[RequiredScope("tasks.read")]

Schritt 4.2: Ausführen der Beispielweb-API-App

Führen Sie die Web-API wie folgt aus, um der Web-App das Aufrufen des Web-API-Beispiels zu ermöglichen:

Wenn Sie dazu aufgefordert werden, stellen Sie Abhängigkeiten wieder her.
Erstellen Sie das Projekt, und führen Sie es aus.
Nachdem das Projekt erstellt wurde, startet Visual Studio oder Visual Studio Code die Web-API in den Browsern mit der folgenden Adresse: https://localhost:44332.

Schritt 5: Konfigurieren der Web-Beispiel-App

Öffnen Sie im Beispielordner unter dem 4-WebApp-your-API/4-2-B2C/Client Ordner das Projekt TodoListClient.csproj mit Visual Studio oder Visual Studio Code.

Öffnen Sie appsettings.json die Datei unter dem Projektstammordner. Diese Datei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter. Die Web-App verwendet diese Informationen, um eine Vertrauensstellung mit Azure AD B2C herzustellen, Benutzer anzumelden und abzumelden, Token zu erwerben und zu validieren. Aktualisieren Sie die folgenden Eigenschaften der App-Einstellungen:

`Section`	Schlüssel	Wert
AzureAdB2C	Beispiel	Der erste Teil Ihres Azure AD B2C-Mandantennamens (z. B. `https://contoso.b2clogin.com`).
AzureAdB2C	Domäne	Der vollständige Name Ihres Azure AD B2C-Mandanten Mandantenname (z. B., `contoso.onmicrosoft.com`).
AzureAdB2C	ClientId	Die Webanwendungs-ID aus Schritt 2.3.
AzureAdB2C	ClientSecret	Der geheime Webanwendungsschlüssel aus Schritt 2.4.
AzureAdB2C	SignUpSignInPolicyId	Der Benutzer fließt oder benutzerdefinierte Richtlinie, die Sie in Schritt 1 erstellt haben.
Todo-Liste	TodoListScope	Die Web-API-Bereiche, die Sie in Schritt 2.5 erstellt haben.
Todo-Liste	TodoListBaseAddress	Der Basis-URI Ihrer Web-API (z. B `https://localhost:44332`. ).

Die endgültige Konfigurationsdatei sollte wie der folgende JSON-Code aussehen:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

Schritt 6: Ausführen der Beispielweb-App

Erstellen Sie das Projekt, und führen Sie es aus.
Navigieren Sie zu https://localhost:5000.
Schließen Sie den Registrierungs- oder Anmeldevorgang ab.

Nach erfolgreicher Authentifizierung sehen Sie Ihren Anzeigenamen in der Navigationsleiste. Um die Ansprüche anzuzeigen, die das Azure AD B2C-Token an Ihre App zurückgibt, wählen Sie TodoList aus.

Screenshot der Web-App-Tokenansprüche.

Stellen Sie Ihre Anwendung bereit

In einer Produktionsanwendung ist der App-Registrierungsumleitungs-URI in der Regel ein öffentlich zugänglicher Endpunkt, auf den Ihre App ausgeführt wird, z https://contoso.com/signin-oidc. B. .

Sie können Umleitungs-URIs in Ihren registrierten Anwendungen jederzeit hinzufügen und ändern. Für Umleitungs-URIs gelten die folgenden Einschränkungen:

Die Antwort-URL muss mit dem Schema https beginnen.
Bei der Antwort-URL muss die Groß-/Kleinschreibung beachtet werden. Die Groß-/Kleinschreibung muss der Groß-/Kleinschreibung des URL-Pfads Ihrer ausgeführten Anwendung entsprechen.

Tokencache für eine Web-App

Im Web-App-Beispiel wird die Serialisierung des Caches im Arbeitsspeicher verwendet. Diese Implementierung eignet sich hervorragend in Beispielen. Es ist auch in Produktionsanwendungen gut, vorausgesetzt, Sie denken nicht daran, wenn der Tokencache verloren geht, wenn die Web-App neu gestartet wird.

Für die Produktionsumgebung wird empfohlen, einen verteilten Speichercache zu verwenden. Beispielsweise Redis-Cache, NCache oder sql Server-Cache. Ausführliche Informationen zu den Implementierungen des verteilten Speichercaches finden Sie unter Serialisierung des Tokencaches.

Nächste Schritte

Erfahren Sie mehr über das Codebeispiel.
Erfahren Sie, wie Sie die Authentifizierung in Ihrer eigenen Webanwendung mithilfe von Azure AD B2C aktivieren.
Erfahren Sie, wie Sie die Authentifizierung in Ihrer eigenen Web-API aktivieren.

Freigeben über