Préparer une application web Python Flask pour l’authentification

Article
04/25/2024

Ce tutoriel est la deuxième partie d'une série qui montre comment créer une application web Python Flask et ajouter la prise en charge de la connexion à l’aide de la plateforme d’identité Microsoft. Dans première partie de cette série, vous avez inscrit et configuré l’application dans votre locataire Microsoft Entra ID.

Dans ce tutoriel, vous allez :

Créer un projet d’application web Python Flask
Installer les dépendances de l’application
Ajouter les composants de l’interface utilisateur de l’application
Configurer votre application web Flask pour utiliser Microsoft Entra ID pour l’authentification

Prérequis

Suivez les étapes du Tutoriel : inscrire une application web Python avec la plateforme d’identité Microsoft.
Visual Studio Code ou un autre IDE.
Python 3.9 ou version ultérieure installé localement.

Créer un projet d’application web Python

Pour suivre le reste du tutoriel, vous devez créer un projet d’application web Python Flask. Si vous préférez utiliser un exemple de code complet pour l’apprentissage, téléchargez l’exemple d’application web Python Flask à partir de GitHub.

Pour créer l’application web Python Flask à partir de zéro, procédez comme suit :

Créez un dossier pour héberger votre application et nommez-la flask-web-app.
Accédez au répertoire de votre projet et créez trois fichiers nommés app.py, app.config.pyet requirements.txt.
Créez un fichier .env dans le dossier racine du projet.
Créez un dossier nommé modèles dans le répertoire racine de votre projet. Flask recherche des modèles de rendu dans ce sous-répertoire.

Après avoir créé les fichiers, le fichier et le répertoire de votre projet devraient ressembler à ce qui suit :

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

Installer les dépendances de l’application

L’application que vous créez utilise le identitypackage, un wrapper autour de la bibliothèque d’authentification Microsoft (MSAL) pour Python. Vous installez également Flask, Flask Session, requêtes et toutes les autres dépendances requises par l’application. Mettez à jour requirements.txt avec ces dépendances.

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

Ajouter les composants d'interface utilisateur de l'application

Dans cette section, vous allez créer des modèles HTML pour chacun des itinéraires que vous définissez dans l’application, notamment la connexion, la déconnexion, les appels d’API et les modèles d’erreur. Procédez comme suit pour créer des modèles pour chacune de ces pages :

Dans le dossier modèles, créez un fichier HTML nommé login.html et ajoutez le contenu suivant :

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

Ce modèle représente la page de connexion dans laquelle les utilisateurs peuvent se connecter à votre application.

Modèle d’index

Dans le dossier modèles, créez un fichier HTML nommé index.html et ajoutez le contenu suivant :

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

Le modèle d’index sert de page d’accueil pour l’application web, rendu lorsque les utilisateurs visitent l’URL racine de l’application.

Page d'affichage

Ce modèle est utilisé pour afficher le résultat d’un appel d’API en aval. Ajoutez l’extrait de code suivant à 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>

Modèles d’erreur

Modèle d’erreur d’authentification

Dans le dossier des modèles, créez un fichier HTML appelé auth_error.html qui affiche les messages d’erreur qui peuvent apparaître. Ajoutez le code suivant à 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>

Modèle d’erreur de configuration

Dans le dossier modèles, créez un fichier HTML appelé config_error.html qui affiche un message lorsqu’une configuration requise est manquante. Ajoutez le code suivant à 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>

Créez le fichier de configuration

Dans votre éditeur de code, ouvrez app_config.py, qui contient les paramètres de configuration et ajoutez le code suivant :

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"

Créez un fichier .env pour stocker les paramètres de configuration.

Dans cet exemple, vous utilisez un fichier .env pour stocker et gérer les paramètres de configuration, les variables d’environnement et les informations d’identification de l’application qui ne doivent pas être incorporés dans notre code. Ouvrez le fichier .env que vous avez créé à la racine de votre répertoire de projet et ajoutez les valeurs suivantes.

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

Dans votre fichier .env.sample, remplacez les espaces réservés pour :

- CLIENT_ID par l’ID d’application (client) disponible sur la page Vue d’ensemble de l’enregistrement de l’application.
- CLIENT_SECRET par la clé secrète client que vous avez créée dans les Certificats et secrets
- AUTHORITY par https://login.microsoftonline.com/<TENANT_GUID>. L’ID d’annuaire (locataire) est disponible dans la page Vue d’ensemble de l’inscription de l’application.

Étape suivante

Découvrez comment ajouter la prise en charge de la connexion à une application web Python Flask dans la prochaine partie de cette série de tutoriels :

Tutoriel : ajouter la prise en charge de la connexion à une application web Python Flask

Partager via

Préparer une application web Python Flask pour l’authentification

Prérequis

Créer un projet d’application web Python

Installer les dépendances de l’application

Ajouter les composants d'interface utilisateur de l'application

Modèle d’index

Page d'affichage

Modèles d’erreur

Créez le fichier de configuration

Créez un fichier .env pour stocker les paramètres de configuration.

Étape suivante

Commentaires

Ressources supplémentaires

Partager via

Préparer une application web Python Flask pour l’authentification

Prérequis

Créer un projet d’application web Python

Installer les dépendances de l’application

Ajouter les composants d'interface utilisateur de l'application

Modèles de connexion

Modèle d’index

Page d'affichage

Modèles d’erreur

Créez le fichier de configuration

Créez un fichier .env pour stocker les paramètres de configuration.

Étape suivante

Commentaires

Ressources supplémentaires