Sdílet prostřednictvím

Příprava webové aplikace Python Flask na ověřování

  • Článek

Tento kurz je druhou částí série, která ukazuje vytvoření webové aplikace Python Flask a přidání podpory přihlašování pomocí platformy Microsoft Identity Platform. V části 1 této sériejste zaregistrovali a nakonfigurovali aplikaci v tenantovi Microsoft Entra ID.

V tomto kurzu:

  • Vytvoření nového projektu webové aplikace Python Flask
  • Nainstalujte závislosti aplikace
  • Přidání komponent uživatelského rozhraní aplikace
  • Nakonfigurujte webovou aplikaci Flask tak, aby pro ověřování používala ID Microsoft Entra.

Požadavky

Vytvoření nového projektu webové aplikace v Pythonu

Pokud chcete dokončit zbytek kurzu, musíte vytvořit projekt webové aplikace Python Flask. Pokud dáváte přednost použití ukázky dokončeného kódu pro výuku, stáhněte si ukázku webové aplikace Python Flask z GitHubu.

Pokud chcete webovou aplikaci Python Flask sestavit úplně od začátku, postupujte takto:

  1. Vytvořte složku pro hostování aplikace a pojmenujte ji flask-web-app.
  2. Přejděte do adresáře projektu a vytvořte tři soubory s názvem app.py, app_config.pya requirements.txt.
  3. V kořenové složce projektu vytvořte soubor .env.
  4. Vytvořte složku s názvem templates v kořenovém adresáři projektu. Flask hledá šablony vykreslování v tomto podadresáři.

Po vytvoření souborů by se soubor a adresář projektu měly podobat následující struktuře:

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

Nainstalovat závislosti aplikace

Aplikace, kterou sestavíte, používá balíček identity, obálku kolem knihovny MSAL (Microsoft Authentication Library) pro Python. Také nainstalujete Flask, Flask-Session, Requests a všechny ostatní závislosti, které aplikace vyžaduje. Aktualizujte requirements.txt pomocí těchto závislostí.

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

Přidání komponent uživatelského rozhraní aplikace

V této části vytvoříte šablony HTML pro každou trasu, kterou definujete v aplikaci, včetně přihlášení, odhlášení, volání rozhraní API a šablon chyb. Při vytváření šablon pro každou z těchto stránek postupujte takto:

Šablony přihlášení

Ve složce šablon vytvořte soubor HTML s názvem login.html a přidejte následující obsah:

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

Tato šablona představuje přihlašovací stránku, kde se uživatelé můžou přihlásit k vaší aplikaci.

Šablona indexu

Ve složce šablon vytvořte soubor HTML s názvem index.html a přidejte následující obsah:

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

Šablona indexu slouží jako domovská stránka webové aplikace, která se vykreslí, když uživatelé navštíví kořenovou adresu URL aplikace.

Zobrazit stránku

Tato šablona slouží k zobrazení výsledku podřízeného volání rozhraní API. Přidejte následující fragment kódu do display.html.

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

Šablony chyb

šablona chyby ověřování

Ve složce šablon vytvořte soubor HTML s názvem auth_error.html, který zobrazí všechny chybové zprávy, které se můžou objevit. Do auth_error.htmlpřidejte následující kód.

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

šablona chyby konfigurace

Ve složce šablon vytvořte soubor HTML s názvem config_error.html, který zobrazí zprávu, když chybí požadovaná konfigurace. Do config_error.htmlpřidejte následující kód.

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

Vytvoření konfiguračního souboru

V editoru kódu otevřete app_config.py, který obsahuje parametry konfigurace, a přidejte následující kód:

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"

Vytvořte soubor .env pro uložení nastavení konfigurace.

V této ukázce použijete soubor .env k ukládání a správě nastavení konfigurace aplikace, proměnných prostředí a přihlašovacích údajů, které by neměly být vloženy do našeho kódu. Otevřete soubor .env, který jste vytvořili v kořenovém adresáři projektu, a přidejte následující hodnoty.

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

V souboru .env.sample nahraďte zástupné symboly pro:

    • CLIENT_ID s ID aplikace (klienta) k dispozici na stránce s přehledem registrace aplikace.
    • CLIENT_SECRET s tajným klíčem klienta, který jste vytvořili v certifikátech & tajných klíčů
    • AUTHORITY s https://login.microsoftonline.com/<TENANT_GUID>. ID adresáře (tenanta) je k dispozici na stránce s přehledem registrace aplikace.

Další krok

V další části této série kurzů se dozvíte, jak do webové aplikace Python Flask přidat podporu přihlašování:

Kurz : Přidání podpory přihlašování do webové aplikace Python Flask