Konfigurieren Sie die Authentifizierung in einer Python-Webanwendung mit Azure AD B2C

In diesem Artikel wird anhand einer Python-Beispielwebanwendung veranschaulicht, wie Sie Ihren Webanwendungen die Authentifizierung von Azure Active Directory B2C (Azure AD B2C) hinzufügen.

Ü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 Web-App-Beispiel wird das Identitätspaket für Python verwendet, um das Hinzufügen von Authentifizierungs- und Autorisierungsunterstützung zu Python-Web-Apps zu vereinfachen.

Der Anmeldeflow umfasst die folgenden Schritte:

  1. Benutzer navigieren zur Web-App und wählen Anmelden aus.
  2. Die App löst eine Authentifizierungsanforderung aus und leitet Benutzer an Azure AD B2C um.
  3. Benutzer registrieren oder melden sich an, setzen das Passwort zurück, oder melden sich mit einem Social Account an.
  4. Nachdem die Benutzer sich erfolgreicher angemeldet haben, gibt Azure AD B2C ein ID-Token an die App zurück.
  5. Die App tauscht den Autorisierungscode gegen ein ID-Token aus, validiert das ID-Token, liest die Forderungen und gibt dann eine sichere Seite an die Benutzer zurück.

Voraussetzungen

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 einer Webanwendung

Damit sich Ihre Anwendung mit Azure AD B2C anmelden kann, müssen Sie Ihre App im Azure AD B2C-Verzeichnis registrieren. Durch das Registrieren Ihrer App wird eine Vertrauensstellung zwischen der App und Azure AD B2C eingerichtet.

Bei der App-Registrierung geben Sie den Umleitungs-URI an. Der Umleitungs-URI ist der Endpunkt, an den die Benutzer 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 App eindeutig identifiziert. Nachdem Ihre App registriert wurde, verwendet Azure AD B2C sowohl die Anwendungs-ID als auch den Umleitungs-URI, um Authentifizierungsanforderungen zu erstellen.

Schritt 2.1: Registrieren der App

Führen Sie die folgenden Schritte aus, um die Web-App-Registrierung zu erstellen:

  1. Melden Sie sich beim Azure-Portal an.

  2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C Mandanten zu wechseln.

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

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

  5. Geben Sie unter Name einen Namen für die Anwendung ein, (z. B. webapp1).

  6. Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Identitätsanbieter oder Organisationsverzeichnis (zum Authentifizieren von Benutzern mit Benutzerflows) aus.

  7. Wählen Sie unter Umleitungs-URI die Option Web aus, und geben Sie http://localhost:5000/getAToken in das URL-Feld ein.

  8. Aktivieren Sie unter Berechtigungen das Kontrollkästchen Administratoreinwilligung für OpenID- und Offlinezugriffsberechtigungen erteilen.

  9. Wählen Sie Registrieren.

  10. Wählen Sie Übersicht.

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

    Screenshot of the web app Overview page for recording your web app I D.

Schritt 2.2: Erstellen eines Web-App-Client-Geheimnisses

Erstellen Sie einen geheimen Clientschlüssel für die registrierte Webanwendung. Die Webanwendung verwendet den geheimen Clientschlüssel beim Anfordern von Token als Identitätsnachweis.

  1. Wählen Sie unter Verwalten die Option Zertifikate und Geheimnisse aus.
  2. Wählen Sie Neuer geheimer Clientschlüssel.
  3. Geben Sie im Feld Beschreibung eine Beschreibung für das Clientgeheimnis ein (z. B. clientsecret1).
  4. 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.
  5. Notieren Sie den Wert des Geheimnisses. Dieser Wert wird in einem späteren Schritt für die Konfiguration verwendet.

Schritt 3: Herunterladen des Web-App-Beispiels

Laden Sie die ZIP-Datei herunter, oder klonen Sie die Beispielwebanwendung von GitHub.

git clone https://github.com/Azure-Samples/ms-identity-python-webapp.git

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

Schritt 4: Konfigurieren der Beispiel-Web-App

Führen Sie im Stammverzeichnis des Projekts die folgenden Schritte aus:

  1. Erstellen Sie eine .env-Datei im Stammordner des Projekts und orientieren Sie sich dabei an .env.sample.

    FLASK_DEBUG=True
    B2C_TENANT_NAME=<tenant name>
    CLIENT_ID=<client id>
    CLIENT_SECRET=<client secret>
    SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
    EDITPROFILE_USER_FLOW=B2C_1_profile_editing
    RESETPASSWORD_USER_FLOW=B2C_1_reset_password
    
    Schlüssel Wert
    B2C_TENANT_NAME Der erste Teil Ihres Azure AD B2C-Mandantennamens (z. B. contoso).
    CLIENT_ID Die Web-API-Anwendungs-ID aus Schritt 2.1.
    CLIENT_SECRET Der Wert des Clientschlüssels, den Sie in Schritt 2.2 erstellt haben.
    *_USER_FLOW Die Benutzerflows, die Sie in Schritt 1 erstellt haben.

    Die Umgebungsvariablen werden in app_config.pyreferenziert und in einer separaten ENV-Datei gespeichert, damit sie außerhalb der Quellcodeverwaltung bleiben. Die bereitgestellte GITIGNORE-Datei verhindert, dass die ENV-Datei eingecheckt wird.

Schritt 5: Ausführen der Beispiel-Web-App

  1. Wechseln Sie in Ihrer Konsole oder Ihrem Terminal in das Verzeichnis, in dem sich das Beispiel befindet. Beispiel:

    cd ms-identity-python-webapp
    
  2. Installieren Sie die erforderlichen Pakete von PyPi und führen Sie die Webanwendung auf Ihrem lokalen Rechner aus, indem Sie die folgenden Befehle ausführen:

    python -m pip install -r requirements.txt
    python -m flask run --host localhost --port 5000
    

    Im Konsolenfenster wird die Portnummer der lokal ausgeführten Anwendung angezeigt:

     * Debug mode: on
       WARNING: This is a development server. Do not use it in a production deployment.
       Use a production WSGI server instead.
     * Running on `http://localhost:5000/` (Press CTRL+C to quit)
    
  3. Um die auf Ihrem lokalen Rechner laufende Webanwendung anzuzeigen, gehen Sie zu http://localhost:5000.

  4. Wählen Sie Anmelden aus.

    Screenshot showing the sign-in flow.

  5. Schließen Sie den Registrierungs- oder Anmeldevorgang ab.

  6. Nach erfolgreicher Authentifizierung sehen Sie Ihren Anzeigenamen, wie hier gezeigt:

    Screenshot showing the web app token's display name claim.

Schritt 6: Aufrufen einer Web-API

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

  • Die Webanwendung (Python) Registrierung, die Sie schon in Schritt 2 erstellt haben. Durch die Webanwendungsregistrierung kann sich Ihre Anwendung bei Azure AD B2C registrieren. Beim App-Registrierungsprozess wird eine Anwendungs-ID generiert, die auch als Client-ID bezeichnet wird und Ihre App eindeutig identifiziert. Beispiel: 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. Bei der App-Registrierung wird eine Anwendungs-ID generiert, die Ihre Web-API eindeutig identifiziert (zum Beispiel App-ID: 2). Erteilen Sie Ihrer App (App-ID: 1) Berechtigungen für die Web-API-Bereiche (App-ID: 2).

Die App-Registrierungen und die Anwendungsarchitektur werden in den folgenden Diagrammen beschrieben:

Diagram describing a web app with web API, registrations, and tokens.

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.

Schritt 6.1: Registrierung der Web-API-Anwendung

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 6.2: Konfigurieren von Geltungsbereichen

  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 6.3: Erteilen von Berechtigungen für die Webanwendung

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 6.4: Konfigurieren Sie Ihre Web-API

Dieses Beispiel erwirbt ein Zugriffstoken mit den entsprechenden Bereichen, das die Webanwendung für eine Web-API verwenden kann. Dieses Beispiel selbst fungiert nicht als Web-API. Stattdessen müssen Sie eine vorhandene Web-API verwenden oder eine neue erstellen. Ein Tutorial zum Erstellen einer Web-API in Ihrem B2C-Mandanten finden Sie unter Authentifizierung in Ihrer eigenen Web-API mithilfe von Azure AD B2C aktivieren.

Schritt 6.5: Konfigurieren Sie die Beispielanwendung mit der Web-API

Öffnen der Datei app_config.py. Diese Datei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter. Aktualisieren Sie die folgenden Eigenschaften der App-Einstellungen:

Key Wert
ENDPOINT Der URI Ihrer Web-API (z. B. https://localhost:6000/hello).
SCOPE Die web-API-Bereiche, die Sie erstellt haben (z. B. ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"]).

Schritt 6.6: Ausführen der Beispielanwendung

  1. Wechseln Sie in Ihrer Konsole oder Ihrem Terminal in das Verzeichnis, in dem sich das Beispiel befindet.

  2. Wenn die App noch nicht ausgeführt wird, starten Sie sie mit dem Befehl aus Schritt 5 neu.

  3. Wählen Sie Downstream-API aufrufen aus.

    Screenshot showing how to call a web API.

Schritt 7: Bereitstellen der Anwendung

In einer Produktionsanwendung handelt es sich bei dem Umleitungs-URI der App-Registrierung in der Regel um einen öffentlich zugänglichen Endpunkt, an dem Ihre App ausgeführt wird, z. B. https://contoso.com/getAToken.

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

  • Der Umleitungs-URI muss mit dem Schema „https“ beginnen.
  • Bei der Umleitungs-URL wird die Groß-/Kleinschreibung beachtet. Die Groß-/Kleinschreibung muss der Groß-/Kleinschreibung des URL-Pfads Ihrer ausgeführten Anwendung entsprechen.

Nächste Schritte