Konfigurieren der Authentifizierung in einem Beispiel einer WPF-Desktopanwendung mithilfe von Azure AD B2C

  • Artikel

In diesem Artikel wird anhand einer WPF-Beispieldesktopanwendung (Windows Presentation Foundation) veranschaulicht, wie Sie die Azure AD B2C-Authentifizierung für Ihre Desktop-Apps einrichten.

Übersicht

OpenID Connect (OIDC) ist ein Authentifizierungsprotokoll, das auf OAuth 2.0 basiert. Sie können OIDC verwenden, um Benutzer sicher bei einer Anwendung anzumelden. In diesem Beispiel für eine Desktop-App wird die Microsoft Authentication Library (MSAL) mit dem OIDC-Autorisierungscode Proof Key for Code Exchange (PKCE) verwendet. MSAL ist eine von Microsoft bereitgestellte Bibliothek, die das Hinzufügen von Authentifizierungs- und Autorisierungsunterstützung zu Desktop-Apps vereinfacht.

Der Anmeldeflow umfasst die folgenden Schritte:

  1. Benutzer*innen öffnen die App und wählen Anmelden aus.
  2. Die App öffnet den Systembrowser des Desktopgeräts und sendet eine Authentifizierungsanforderung an Azure AD B2C.
  3. Benutzer registrieren oder melden sich an, setzen das Passwort zurück, oder melden sich mit einem Social Account an.
  4. Nach erfolgreicher Benutzeranmeldung gibt Azure AD B2C einen Autorisierungscode an die App zurück.
  5. Die App führt die folgenden Aktionen aus:
    1. Sie tauscht den Autorisierungscode gegen ein ID-Token, ein Zugriffstoken und ein Aktualisierungstoken ein.
    2. Sie liest die ID-Tokenansprüche.
    3. Sie speichert die Token zur späteren Verwendung in einem In-Memory-Cache.

Ü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 Registrierung der Desktopanwendung kann sich Ihre App bei Azure AD B2C anmelden. Bei der App-Registrierung geben Sie den Umleitungs-URI an. Der Umleitungs-URI ist der Endpunkt, an den die Benutzer*innen von Azure AD B2C umgeleitet werden, nachdem sie sich mit Azure AD B2C authentifiziert haben. Beim App-Registrierungsprozess wird eine Anwendungs-ID generiert, die auch als Client-ID bezeichnet wird und Ihre Desktop-App eindeutig identifiziert (z. B. App-ID: 1).

  • Durch die Web-API-Registrierung kann Ihre App eine geschützte Web-API aufrufen. Die Registrierung macht die Web-API-Berechtigungen (Bereiche) verfügbar. Beim App-Registrierungsprozess wird eine Anwendungs-ID generiert, die Ihre Web-API eindeutig identifiziert (Beispiel: App-ID: 2). Erteilen Sie Ihrer Desktop-App (App-ID: 1) Berechtigungen für die Web-API-Bereiche (App-ID: 2).

Die Anwendungsregistrierung und -architektur werden in den folgenden Diagrammen dargestellt:

Diagram of the desktop app with web API, registrations, and tokens.

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.

Der Abmeldeflow

Der Abmeldeflow umfasst die folgenden Schritte:

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

Voraussetzungen

Ein Computer, auf dem Visual Studio 2019 mit der Workload „.NET-Desktopentwicklung“ ausgeführt wird

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. susi wird beispielsweise zu B2C_1_susi.

Schritt 2: Registrieren Ihrer Anwendungen

Erstellen Sie die Desktop-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:

  1. Melden Sie sich beim Azure-Portal an.

  2. 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.

  3. Suchen Sie auf der Seite Portaleinstellungen > Verzeichnisse und Abonnements das Azure AD B2C-Verzeichnis in der Liste Verzeichnisname, und klicken Sie dann auf Wechseln.

  4. Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.

  5. Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.

  6. 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.

  7. Wählen Sie Registrieren.

  8. Wählen Sie nach Abschluss der App-Registrierung Übersichtaus.

  9. Notieren Sie sich die Anwendungs- bzw. Client-ID, die Sie später beim Konfigurieren der Webanwendung verwenden.

    Screenshot that demonstrates how to get a web A P I application I D.

Schritt 2.2: Konfigurieren von Bereichen für die Web-API-App

  1. Wählen Sie die von Ihnen erstellte Anwendung my-api1 (App-ID: 2) aus, um deren Seite Übersicht zu öffnen.

  2. Wählen Sie unter Verwalten die Option Eine API verfügbar machen aus.

  3. 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.

  4. Wählen Sie unter Durch diese API definierte Bereiche die Option Bereich hinzufügen aus.

  5. 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.

  6. Wählen Sie Bereich hinzufügen aus.

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

  8. Wählen Sie Bereich hinzufügen aus.

Schritt 2.3: Registrieren der Desktop-App

Gehen Sie zum Registrieren der Desktop-App folgendermaßen vor:

  1. Melden Sie sich beim Azure-Portal an.
  2. Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.
  3. Geben Sie unter Name einen Namen für die Anwendung ein (z. B. desktop-app1).
  4. Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Identitätsanbieter oder Organisationsverzeichnis (zum Authentifizieren von Benutzern mit Benutzerflows) aus.
  5. Wählen Sie unter Umleitungs-URI die Option Öffentlicher Client/nativ (Desktop und Desktop) aus, und geben Sie dann in das URL-Feld https://your-tenant-name.b2clogin.com/oauth2/nativeclient ein. Ersetzen Sie your-tenant-name durch den Namen Ihres Mandanten. Weitere Optionen finden Sie unter Konfigurieren des Umleitungs-URI.
  6. Wählen Sie Registrieren.
  7. Wählen Sie nach Abschluss der App-Registrierung Übersichtaus.
  8. Notieren Sie sich die Anwendungs- bzw. Client-ID, da Sie diese später beim Konfigurieren der Desktopanwendung benötigen. Screenshot highlighting the desktop application ID.

Schritt 2.4: Erteilen von Berechtigungen für die Desktop-App zur Verwendung der Web-API

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

  1. Wählen Sie App-Registrierungen und dann die von Ihnen erstellte App (App-ID: 1) aus.

  2. Wählen Sie unter Verwalten die Option API-Berechtigungen.

  3. Wählen Sie unter Konfigurierte Berechtigungen die Option Berechtigung hinzufügen aus.

  4. Wählen Sie die Registerkarte Meine APIs aus.

  5. 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.

  6. Erweitern Sie unter Berechtigung den Eintrag Aufgaben, und wählen Sie die zuvor definierten Bereiche aus (Beispiel: tasks.read und tasks.write).

  7. Wählen Sie Berechtigungen hinzufügen aus.

  8. Wählen Sie Administratorzustimmung erteilen für<Name Ihres Mandanten> aus.

  9. Wählen Sie Ja.

  10. Wählen Sie Aktualisieren aus, und vergewissern Sie sich, dass für beide Bereiche unter Status der Status Gewährt für... angezeigt wird.

  11. Wählen Sie in der Liste Konfigurierte Berechtigungen Ihren Bereich aus, und kopieren Sie dann den vollständigen Namen des Bereichs.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Schritt 3: Konfigurieren der Beispiel-Web-API

In diesem Beispiel wird ein Zugriffstoken mit den relevanten Bereichen bezogen, die die Desktop-App für eine Web-API verwenden kann. Gehen Sie wie folgt vor, um eine Web-API aus Code aufzurufen:

  1. Verwenden Sie eine vorhandene Web-API, oder erstellen Sie eine neue. Weitere Informationen finden Sie unter Aktivieren der Authentifizierung in Ihrer eigenen Web-API mit Azure AD B2C.
  2. Nachdem Sie die Web-API konfiguriert haben, kopieren Sie den URI des Web-API-Endpunkts. In den nächsten Schritten verwenden Sie den Web-API-Endpunkt.

Tipp

Wenn Sie keine Web-API haben, können Sie dieses Beispiel trotzdem ausführen. In diesem Fall gibt die App das Token für den Zugriff zurück, kann aber die Web-API nicht aufrufen.

Schritt 4: Herunterladen des Beispiels für die WPF-Desktop-App

  1. Laden Sie die ZIP-Datei herunter, oder klonen Sie die mobile Beispielwebanwendung aus dem GitHub-Repository.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

  2. Öffnen Sie die Projektmappe active-directory-b2c-wpf (Datei: active-directory-b2c-wpf.sln) in Visual Studio.

Schritt 5: Konfigurieren der Beispiel-Web-App

Öffnen Sie im Projekt active-directory-b2c-wpf die Datei App.xaml.cs. Die Member der App.xaml.cs-Klasse enthalten Informationen zu Ihrem Azure AD B2C-Identitätsanbieter. Die Desktop-App verwendet diese Informationen, um eine Vertrauensstellung mit Azure AD B2C herzustellen, Benutzer*innen an- und abzumelden sowie Token zu beziehen und zu validieren.

Aktualisieren Sie die folgenden Klassenmember:

Schlüssel Wert
TenantName Der erste Teil Ihres Azure AD B2C-Mandantennamens (z. B. contoso.b2clogin.com).
ClientId Die ID der Desktopanwendung aus Schritt 2.3.
PolicySignUpSignIn Der Benutzerflow für die Registrierung oder Anmeldung oder die benutzerdefinierte Richtlinie, den bzw. die Sie in Schritt 1 erstellt haben
PolicyEditProfile Der Benutzerflow zur Profilbearbeitung oder die benutzerdefinierte Richtlinie, den bzw. die Sie in Schritt 1 erstellt haben
ApiEndpoint (Optional) Der Web-API-Endpunkt, den Sie in Schritt 3 erstellt haben (z. B. https://contoso.azurewebsites.net/hello)
ApiScopes Die Web-API-Bereiche, die Sie in Schritt 2.4 erstellt haben

Die endgültige App.xaml.cs-Datei sollte wie der folgende C#-Code aussehen:

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

Schritt 6: Ausführen und Testen der Desktop-App

  1. Stellen Sie die NuGet-Pakete wieder her.

  2. Drücken Sie F5, um das Beispiel zu kompilieren und auszuführen.

  3. Wählen Sie Registrieren, und melden Sie sich mit Ihrem lokalen oder Social Media-Konto für Azure AD B2C an.

    Screenshot highlighting how to start the sign-in flow.

  4. Nach einer erfolgreichen Registrierung oder Anmeldung werden die Tokendetails im unteren Bereich der WPF-App angezeigt.

    Screenshot highlighting the Azure AD B2C access token and user ID.

  5. Wählen Sie API aufrufen aus, um Ihre Web-API aufzurufen.

Nächste Schritte

Konfigurieren von Authentifizierungsoptionen in einer WPF-Desktop-App mithilfe von Azure AD B2C