Freigeben über

Vorbereiten einer Python Flask-Web-App für die Authentifizierung

  • Artikel

Dieses Tutorial ist Teil 2 einer Reihe, in der das Erstellen einer Python Flask-Web-App und das Hinzufügen von Anmeldeunterstützung mithilfe von Microsoft Identity Platform veranschaulicht werden. In Teil 1 dieser Reihe haben Sie die Anwendung in Ihrem Microsoft Entra ID-Mandanten registriert und konfiguriert.

In diesem Tutorial führen Sie Folgendes durch:

  • Erstellen eines neuen Python Flask-Web-App-Projekts
  • Installieren der App-Abhängigkeiten
  • Hinzufügen der UI-Komponenten der Anwendung
  • Konfigurieren Ihrer Flask-Web-App zur Authentifizierung mithilfe von Microsoft Entra ID

Voraussetzungen

Erstellen eines neuen Python-Web-App-Projekts

Um den Rest des Tutorials abzuschließen, müssen Sie ein Python Flask-Web-App-Projekt erstellen. Wenn Sie zum Lernen ein vollständiges Codebeispiel wünschen, laden Sie das Python Flask-Web-App-Beispiel von GitHub herunter.

Führen Sie die folgenden Schritte aus, um die Python Flask-Web-App von Grund auf neu zu erstellen:

  1. Erstellen Sie einen Ordner zum Hosten Ihrer Anwendung, und nennen Sie ihn flask-web-app.
  2. Navigieren Sie zu Ihrem Projektverzeichnis, und erstellen Sie drei Dateien mit dem Namen app.py, app.config.py und requirements.txt.
  3. Erstellen Sie eine ENV-Datei im Stammverzeichnis des Projekts.
  4. Erstellen Sie einen Ordner mit dem Namen templates im Projektstammverzeichnis. Flask sucht in diesem Unterverzeichnis nach Renderingvorlagen.

Nachdem Sie die Dateien erstellt haben, sollten die Datei und das Verzeichnis Ihres Projekts ungefähr folgende Struktur haben:

python-webapp/
├── templates/
│     ├── display.html
│     ├── index.html
│     ├── login.html
├── .env.sample
├── app.py
├── app.config.py
│── requirements.txt

Installieren der App-Abhängigkeiten

Die von Ihnen erstellte Anwendung verwendet das identity-Paket, ein Wrapper um die Microsoft-Authentifizierungsbibliothek (Microsoft Authentication Library, MSAL) für Python. Außerdem installieren Sie Flask, eine Flask-Sitzung, Anforderungen und alle anderen Abhängigkeiten, die die App benötigt. Aktualisieren Sie requirements.txt mit diesen Abhängigkeiten.

Flask>=2.2
Flask-Session>=0.3.2,<0.6
werkzeug>=2
requests>=2,<3
identity>=0.5.1,<0.6
python-dotenv<0.22

Hinzufügen von Benutzeroberflächenkomponenten der Anwendung

In diesem Abschnitt erstellen Sie HTML-Vorlagen für alle Routen, die Sie in der App definieren, einschließlich Anmeldung, Abmeldung, API-Aufrufe und Fehlervorlagen. Führen Sie die folgenden Schritte aus, um Vorlagen für die einzelnen Seiten zu erstellen:

Anmeldevorlagen

Erstellen Sie im Ordner „templates“ eine HTML-Datei mit dem Namen login.html, und fügen Sie den folgenden Inhalt hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Login</title>
</head>
<body>
    <h1>Microsoft Identity Python Web App</h1>

    {% if user_code %}
    <ol>
      <li>To sign in, type <b>{{ user_code }}</b> into
        <a href='{{ auth_uri }}' target=_blank>{{ auth_uri }}</a>
        to authenticate.
      </li>
      <li>And then <a href="{{ url_for('auth_response') }}">proceed</a>.</li>
    </ol>
    {% else %}
    <ul><li><a href='{{ auth_uri }}'>Sign In</a></li></ul>
    {% endif %}

    <hr>
    <footer style="text-align: right">Microsoft identity platform Web App Sample {{ version }}</footer>
</body>
</html>

Diese Vorlage stellt die Anmeldeseite dar, auf der sich Benutzer bei Ihrer Anwendung anmelden können.

Indexvorlage

Erstellen Sie im Ordner „templates“ eine HTML-Datei mit dem Namen index.html, und fügen Sie den folgenden Inhalt hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Index</title>
</head>
<body>
    <h1>Microsoft Identity Python Web App</h1>
    <h2>Welcome {{ user.get("name") }}!</h2>

    <ul>
    {% if config.get("ENDPOINT") %}
      <li><a href='/call_downstream_api'>Call a downstream API</a></li>
    {% endif %}

    <li><a href="/logout">Logout</a></li>
    </ul>

    <hr>
    <footer style="text-align: right">Microsoft identity platform Web App Sample {{ version }}</footer>
</body>
</html>

Die Indexvorlage dient als Startseite für die Web-App, die gerendert wird, wenn Benutzer die Stamm-URL der App aufrufen.

Anzeigeseite

Diese Vorlage wird verwendet, um das Ergebnis eines Downstream-API-Aufrufs anzuzeigen. Fügen Sie display.html den folgenden Codeschnipsel hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: API</title>
</head>
<body>
    <a href="javascript:window.history.go(-1)">Back</a> <!-- Displayed on top of a potentially large JSON response, so it will remain visible -->
    <h1>Result of the downstream API Call</h1>
    <pre>{{ result |tojson(indent=4) }}</pre> <!-- Just a generic json viewer -->
</body>
</html>

Fehlervorlagen

Vorlage für Authentifizierungsfehler

Erstellen Sie im Ordner „templates“ eine HTML-Datei namens auth_error.html, die eventuell auftretende Fehlermeldungen anzeigt. Fügen Sie auth_error.html den folgenden Code hinzu:

<!DOCTYPE html>*
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Error</title>
</head>
<body>
    <h2>Login Failure</h2>
    <dl>
      {#
        Flask automatically escapes these unsafe input, so we do not have to.
        See also https://flask.palletsprojects.com/en/2.0.x/templating/#jinja-setup
      #}
      <dt>{{ result.get("error") }}</dt>
      <dd>{{ result.get("error_description") }}</dd>
    </dl>
    <hr>
    <a href="{{ url_for('index') }}">Homepage</a>
</body>
</html>

Vorlage für Konfigurationsfehler

Erstellen Sie im Ordner „templates“ eine HTML-Datei namens config_error.html, die eine Meldung anzeigt, wenn eine erforderliche Konfiguration fehlt. Fügen Sie config_error.html den folgenden Code hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft Identity Python Web App: Error</title>
</head>
<body>
    <h2>Config Missing</h2>
    <p>
        Almost there. Did you forget to set up
<a target=_blank
href="https://learn.microsoft.com/azure/active-directory/develop/web-app-quickstart?pivots=devlang-python#step-5-configure-the-sample-app">
necessary environment variables</a> for your deployment?
    </p>
    <hr>
    <a href="{{ url_for('index') }}">Homepage</a>
</body>
</html>

Erstellen Sie die -Konfigurationsdatei.

Öffnen Sie in Ihrem Code-Editor app_config.py mit den Konfigurationsparametern, und fügen Sie den folgenden Code hinzu:

import os
AUTHORITY= os.getenv("AUTHORITY")

# Application (client) ID of app registration
CLIENT_ID = os.getenv("CLIENT_ID")
# Application's generated client secret: never check this into source control!
CLIENT_SECRET = os.getenv("CLIENT_SECRET")
 
REDIRECT_PATH = "/getAToken"  # Used for forming an absolute URL to your redirect URI.

ENDPOINT = 'https://graph.microsoft.com/v1.0/me'  
SCOPE = ["User.Read"]

# Tells the Flask-session extension to store sessions in the filesystem
SESSION_TYPE = "filesystem"

Erstellen Sie eine ENV-Datei zum Speichern von Konfigurationseinstellungen.

In diesem Beispiel verwenden Sie eine ENV-Datei, um die Konfigurationseinstellungen, Umgebungsvariablen und Anmeldeinformationen der Anwendung zu speichern und zu verwalten, die nicht im Code eingebettet werden sollten. Öffnen Sie die ENV-Datei, die Sie im Stammverzeichnis Ihres Projekts erstellt haben, und fügen Sie die folgenden Werte hinzu:

# The following variables are required for the app to run.
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
AUTHORITY=<Enter_your_authority_url>

Ersetzen Sie in der Datei .env.sample die Platzhalter für:

    • CLIENT_ID durch die Anwendungs-ID (Client-ID) auf der Übersichtsseite für die App-Registrierung.
    • CLIENT_SECRET durch den geheimen Clientschlüssel, den Sie unter Zertifikate und Geheimnisse erstellt haben.
    • AUTHORITY durch https://login.microsoftonline.com/<TENANT_GUID> Die Verzeichnis-ID (Mandanten-ID) ist auf der Übersichtsseite der App-Registrierung verfügbar.

Nächster Schritt

Im nächsten Teil der Tutorialreihe erfahren Sie, wie Sie einer Python Flask-Web-App Anmeldeunterstützung hinzufügen:

Tutorial: Hinzufügen von Anmeldeunterstützung zu einer Python Flask-Web-App