Delen via

Een Python Flask-web-app voorbereiden voor verificatie

  • Artikel

Deze zelfstudie is deel 2 van een reeks die laat zien hoe u een Python Flask-web-app bouwt en ondersteuning voor aanmelden toevoegt met behulp van het Microsoft Identity Platform. In deel 1 van deze reeks hebt u de toepassing geregistreerd en geconfigureerd in uw Microsoft Entra ID-tenant.

In deze zelfstudie hebt u:

  • Een nieuw Python Flask-web-app-project maken
  • App-afhankelijkheden installeren
  • De ui-onderdelen van de toepassing toevoegen
  • Uw Flask-web-app configureren voor het gebruik van Microsoft Entra-id voor verificatie

Vereisten

Een nieuw Python-web-app-project maken

Als u de rest van de zelfstudie wilt voltooien, moet u een Python Flask-web-app-project maken. Als u liever een voltooid codevoorbeeld gebruikt voor leren, downloadt u het Python Flask-web-app-voorbeeld van GitHub.

Als u de volledig nieuwe Python Flask-web-app wilt bouwen, voert u de volgende stappen uit:

  1. Maak een map om uw toepassing te hosten en geef deze de naam flask-web-app.
  2. Navigeer naar de projectmap en maak drie bestanden met de naam app.py, app.config.py en requirements.txt.
  3. Maak een .env-bestand in de hoofdmap van het project.
  4. Maak een map met de naam sjablonen in de hoofdmap van uw project. Flask zoekt naar renderingsjablonen in deze submap.

Nadat u de bestanden hebt gemaakt, moeten het bestand en de map van uw project vergelijkbaar zijn met de volgende structuur:

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

App-afhankelijkheden installeren

De toepassing die u bouwt, maakt gebruik van het identity pakket, een wrapper rond de Microsoft Authentication Library (MSAL) voor Python. U installeert ook Flask, Flask-sessie, aanvragen en alle andere afhankelijkheden die de app nodig heeft. Werk requirements.txt bij met deze afhankelijkheden.

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

Onderdelen van de gebruikersinterface van de toepassing toevoegen

In deze sectie maakt u HTML-sjablonen voor elk van de routes die u in de app definieert, waaronder aanmelden, afmelden, API-aanroepen en foutsjablonen. Volg deze stappen om sjablonen te maken voor elk van deze pagina's:

Aanmeldingssjablonen

Maak in de map sjablonen een HTML-bestand met de naam login.html en voeg de volgende inhoud toe:

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

Deze sjabloon vertegenwoordigt de aanmeldingspagina waar gebruikers zich kunnen aanmelden bij uw toepassing.

Indexsjabloon

Maak in de map sjablonen een HTML-bestand met de naam index.html en voeg de volgende inhoud toe:

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

De indexsjabloon fungeert als startpagina voor de web-app, weergegeven wanneer gebruikers de hoofd-URL van de app bezoeken.

Pagina weergeven

Deze sjabloon wordt gebruikt om het resultaat van een downstream-API-aanroep weer te geven. Voeg het volgende fragment toe aan 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>

Foutsjablonen

Verificatiefoutsjabloon

Maak in de map sjablonen een HTML-bestand met de naam auth_error.html waarin foutberichten worden weergegeven die kunnen worden weergegeven. Voeg de volgende code toe aan auth_error.html.

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

Configuratiefoutsjabloon

Maak in de map sjablonen een HTML-bestand met de naam config_error.html dat een bericht weergeeft wanneer een vereiste configuratie ontbreekt. Voeg de volgende code toe aan config_error.html.

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

Het configuratiebestand maken

Open in de code-editor app_config.py, waarin de configuratieparameters zijn opgeslagen en voeg de volgende code toe:

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"

Maak een .env-bestand om configuratie-instellingen op te slaan.

In dit voorbeeld gebruikt u een .env-bestand om de configuratie-instellingen, omgevingsvariabelen en referenties van de toepassing op te slaan en te beheren die niet moeten worden ingesloten in onze code. Open het .env-bestand dat u hebt gemaakt in de hoofdmap van uw projectmap en voeg de volgende waarden toe.

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

Vervang in het .env.sample-bestand de tijdelijke aanduidingen voor:

    • CLIENT_ID met de toepassings-id (client) die beschikbaar is op de overzichtspagina van de app-registratie.
    • CLIENT_SECRET met het clientgeheim dat u hebt gemaakt in de certificaten en geheimen
    • AUTHORITY door https://login.microsoftonline.com/<TENANT_GUID>. De map-id (tenant) is beschikbaar op de overzichtspagina van de app-registratie.

Volgende stap

Meer informatie over het toevoegen van aanmeldingsondersteuning aan een Python Flask-web-app in het volgende deel van deze reeks zelfstudies:

Zelfstudie: Aanmeldingsondersteuning toevoegen aan een Python Flask-web-app