Teilen über

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

  • Artikel

Dieses Lernprogramm ist Teil 2 einer Reihe, die das Erstellen einer Python Flask-Web-App und das Hinzufügen von Anmeldeunterstützung mithilfe der Microsoft Identity Platform veranschaulicht. In Teil 1 dieser Reihehaben 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 von App-Abhängigkeiten
  • Hinzufügen der UI-Komponenten der Anwendung
  • Konfigurieren Ihrer Flask-Web-App für die Verwendung der Microsoft Entra-ID für die Authentifizierung

Voraussetzungen

Erstellen eines neuen Python-Web-App-Projekts

Um den Rest des Lernprogramms abzuschließen, müssen Sie ein Python Flask Web App-Projekt erstellen. Wenn Sie lieber ein vollständiges Codebeispiel zum Lernen verwenden, 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.pyund requirements.txt.
  3. Erstellen Sie eine env-Datei im Stammordner des Projekts.
  4. Erstellen Sie einen Ordner mit dem Namen Vorlagen in Ihrem Projektstammverzeichnis. Flask sucht in diesem Unterverzeichnis nach Renderingvorlagen.

Nachdem Sie die Dateien erstellt haben, sollte die Datei und das Verzeichnis Ihres Projekts der folgenden Struktur ähneln:

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

Installieren von App-Abhängigkeiten

Die anwendung, die Sie erstellen, verwendet das identity-Paket, ein Wrapper um die Microsoft Authentication Library (MSAL) für Python. Außerdem installieren Sie Flask, Flask Session, 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 Anwendungs-UI-Komponenten

In diesem Abschnitt erstellen Sie HTML-Vorlagen für jede der 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 jede dieser Seiten zu erstellen:

Anmeldevorlagen

Erstellen Sie im Vorlagenordner 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 benutzer sich bei Ihrer Anwendung anmelden können.

Indexvorlage

Erstellen Sie im Vorlagenordner 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 Homepage für die Web-App, die gerendert wird, wenn Benutzer die Stamm-URL der App besuchen.

Seite anzeigen

Diese Vorlage wird verwendet, um das Ergebnis eines nachgeschalteten API-Aufrufs anzuzeigen. Fügen Sie den folgenden Codeausschnitt zu display.htmlhinzu.

<!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 Vorlagenordner eine HTML-Datei namens auth_error.html, die fehlermeldungen anzeigt, die auftreten können. Fügen Sie den folgenden Code zum auth_error.htmlhinzu.

<!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 Vorlagenordner eine HTML-Datei namens config_error.html, die eine Meldung anzeigt, wenn eine erforderliche Konfiguration fehlt. Fügen Sie den folgenden Code zum config_error.htmlhinzu.

<!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 der Konfigurationsdatei

Öffnen Sie im Code-Editor app_config.py, die die Konfigurationsparameter enthält, 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 in unseren 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 Folgendes:

    • CLIENT_ID durch die Anwendungs-ID (Client) auf der Übersicht 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 (Mandant) ist auf der Übersicht für die App-Registrierung verfügbar.

Nächster Schritt

Erfahren Sie, wie Sie im nächsten Teil dieser Tutorial-Reihe Anmeldeunterstützung zu einer Python Flask-Web-App hinzufügen.

Lernprogramm: Hinzufügen der Anmeldeunterstützung zu einer Python Flask-Web-App