Ajoutez la fonctionnalité de connexion à votre application Flask

Ajoutez l’authentification Auth0 à une application Web Flask avec une fonctionnalité de connexion, des routes protégées et des profils utilisateur

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

• Python 3.9 ou une version ultérieure
• pip 20.0 ou une version ultérieure
• jq - Requis pour configurer Auth0 CLI

Compatibilité des versions de Flask : Ce guide de démarrage rapide utilise Flask 2.0+ avec l’extra [async] pour la prise en charge de l’asynchrone.

​

Pour commencer

Ce guide de démarrage rapide explique comment ajouter l’authentification Auth0 à une application Flask. Vous créerez une application Web sécurisée avec une fonctionnalité de connexion, des routes protégées et l’accès au profil de l’utilisateur à l’aide du SDK WebApp Python d’Auth0.

1. Configurez votre environnement

   Créez un nouveau répertoire pour votre projet Flask :

   mkdir auth0-flask-app && cd auth0-flask-app
   

   Créez un environnement virtuel :

   python -m venv venv
   source venv/bin/activate  # Sur Windows : venv\Scripts\activate
   
2. Installez les dépendances

   Créez requirements.txt pour répertorier vos dépendances :

   requirements.txt

   auth0-server-python>=1.0.0b7
   flask[async]>=2.0.0
   python-dotenv>=1.0.0
   

   Le fichier requirements.txt répertorie toutes les dépendances du projet. Pour les installer, exécutez :

   pip install -r requirements.txt
   
3. Configurez votre application Auth0

   Ensuite, créez une nouvelle application sur votre locataire Auth0 et ajoutez les variables d’environnement à votre projet.

   Vous pouvez effectuer cette opération automatiquement en exécutant une commande CLI ou manuellement via le Auth0 Dashboard :

   CLI

   Exécutez la commande shell suivante à la racine de votre projet pour créer une application Auth0 et générer un fichier .env :

   Mac

   AUTH0_APP_NAME="My Flask App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:5000/callback -l http://localhost:5000 -o http://localhost:5000 --reveal-secrets --json > app-details.json && CLIENT_ID=$(python3 -c "import json; print(json.load(open('app-details.json'))['client_id'])") && CLIENT_SECRET=$(python3 -c "import json; print(json.load(open('app-details.json'))['client_secret'])") && DOMAIN=$(auth0 tenants list --json | python3 -c "import sys, json; print([t['name'] for t in json.load(sys.stdin) if t.get('active')][0])") && SECRET=$(openssl rand -hex 64) && echo "AUTH0_DOMAIN=${DOMAIN}" > .env && echo "AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "AUTH0_SECRET=${SECRET}" >> .env && echo "AUTH0_REDIRECT_URI=http://localhost:5000/callback" >> .env && rm app-details.json && echo ".env file created with your Auth0 details:" && cat .env
   

   Dashboard

   Avant de commencer, créez un fichier .env à la racine de votre projet :

   .env

   # Configuration Auth0
   AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
   AUTH0_CLIENT_ID=YOUR_CLIENT_ID
   AUTH0_CLIENT_SECRET=YOUR_CLIENT_SECRET
   AUTH0_SECRET=YOUR_GENERATED_SECRET
   AUTH0_REDIRECT_URI=http://localhost:5000/callback
   

   1. Accédez à Auth0 Dashboard → Applications → Applications
   2. Cliquez sur Create Application
   3. Donnez un nom à votre application (par ex., “My Flask App”) et sélectionnez Regular Web Application
   4. Cliquez sur Create
   5. Dans l’onglet Settings, configurez les éléments suivants :
      • Allowed Callback URLs: http://localhost:5000/callback
      • Allowed Logout URLs: http://localhost:5000
      • Allowed Web Origins: http://localhost:5000
   6. Cliquez sur Save Changes
   7. Remplacez YOUR_AUTH0_DOMAIN dans .env par votre Domaine indiqué dans l’onglet Settings (par ex., your-tenant.auth0.com)
   8. Remplacez YOUR_CLIENT_ID dans .env par votre ID client
   9. Remplacez YOUR_CLIENT_SECRET dans .env par votre Secret client

   Générez un secret sécurisé pour AUTH0_SECRET :

   openssl rand -hex 64
   

   Important : Ne validez jamais votre fichier .env dans votre système de contrôle de version. Ajoutez-le à .gitignore.

4. Créer la configuration d’authentification, les routes et les modèles

   Créer des fichiers

   mkdir templates static && touch app.py auth.py templates/index.html templates/profile.html static/style.css
   

   Et ajoutez les extraits de code suivants :

   Développement uniquement : Cet exemple utilise de simples classes de stockage en mémoire (MemoryStateStore et MemoryTransactionStore) à des fins de démonstration. Ces mécanismes de stockage perdront toutes les données de session au redémarrage de votre application et ne fonctionneront pas dans des déploiements à instances multiples.

   Pour les applications de production, vous devez mettre en place un stockage persistant. Le SDK est indépendant du framework et vous oblige à fournir des implémentations personnalisées de StateStore et TransactionStore. Consultez les exemples officiels de stockage du SDK pour obtenir des directives détaillées sur la mise en œuvre de Redis, PostgreSQL ou d’autres solutions de stockage persistant.

5. Lancez votre application

   Démarrez le serveur de développement Flask :

   python app.py
   

   Votre application sera accessible à l’adresse http://localhost:5000. Le SDK Auth0 prend automatiquement en charge les routes d’authentification.

Point de contrôle

Vous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle qui s’exécute sur votre localhost

---

​

Utilisation avancée

Accès aux jetons d’API

Si vous devez appeler une API protégée, récupérez un jeton d’accès :

@app.route('/api-call')
@require_auth
async def api_call():
    try:
        # Récupérer le jeton d’accès pour votre API
        access_token = await auth0.get_access_token(
            audience='https://your-api.example.com',
            store_options=g.store_options
        )
        
        # Utiliser le jeton pour appeler votre API
        # headers = {'Authorization': f'Bearer {access_token}'}
        # response = requests.get('https://your-api.example.com/data', headers=headers)
        
        return f"Access token retrieved: {access_token[:20]}..."
    except Exception as e:
        return f"Error getting access token: {str(e)}", 500

Pour utiliser cette fonctionnalité, vous devez :

1. Définir AUTH0_AUDIENCE dans votre fichier .env
2. Inclure offline_access dans vos scopes (pour les jetons d’actualisation)
3. Mettre à jour authorization_params dans auth.py :
   authorization_params={
       'scope': 'openid profile email offline_access',
       'audience': os.getenv('AUTH0_AUDIENCE')
   }
   

Configuration d’un stockage personnalisé

Par défaut, le SDK utilise un stockage basé sur des cookies. Pour les environnements de production ayant des besoins particuliers (mise à l’échelle horizontale, partage de session entre services), vous pouvez configurer des backends de stockage personnalisés comme Redis ou PostgreSQL.

Quand utiliser un stockage personnalisé :

• Vous devez partager les sessions entre plusieurs serveurs
• Vos données de session dépassent les limites de taille des cookies
• Vous avez besoin d’une gestion centralisée des sessions pour la déconnexion par canal arrière

Exemple Redis :

auth.py

from auth0_server_python.stores.redis_state_store import RedisStateStore
import redis.asyncio as redis

# Initialiser un magasin d’état personnalisé
redis_client = redis.from_url(os.getenv('REDIS_URL', 'redis://localhost:6379'))
state_store = RedisStateStore(
    secret=os.getenv('AUTH0_SECRET'),
    redis_client=redis_client
)

# Passer à ServerClient
auth0 = ServerClient(
    domain=os.getenv('AUTH0_DOMAIN'),
    client_id=os.getenv('AUTH0_CLIENT_ID'),
    client_secret=os.getenv('AUTH0_CLIENT_SECRET'),
    secret=os.getenv('AUTH0_SECRET'),
    redirect_uri=os.getenv('AUTH0_REDIRECT_URI'),
    state_store=state_store,  # Stockage personnalisé
    authorization_params={'scope': 'openid profile email'}
)

Pour la plupart des applications, le stockage par défaut basé sur des cookies est suffisant. Le stockage personnalisé exige l’implémentation de l’interface StateStore. Consultez les exemples du SDK pour obtenir des implémentations détaillées.

---

​

Problèmes courants

MissingRequiredArgumentError

Problème : Vous voyez “MissingRequiredArgumentError: secret” au démarrage de l’application

Cause : La variable d’environnement AUTH0_SECRET est absente ou ne se charge pas correctement.

Solution :

1. Vérifiez que votre fichier .env se trouve à la racine du projet
2. Assurez-vous que python-dotenv est installé : pip install python-dotenv
3. Générez un nouveau secret au besoin : openssl rand -hex 64
4. Ajoutez-le à .env : AUTH0_SECRET=your_generated_secret
5. Redémarrez votre application Flask

Erreur : URL de rappel invalide

Problème : Vous voyez l’erreur “Callback URL mismatch” ou “invalid_request” lors de la connexion

Cause : L’URI de redirection dans votre code ne correspond pas à celle enregistrée dans Auth0 Dashboard.

Solution :

1. Vérifiez votre fichier .env : AUTH0_REDIRECT_URI=http://localhost:5000/callback
2. Accédez à Auth0 Dashboard → Applications → Votre application → Settings
3. Ajoutez http://localhost:5000/callback à Allowed Callback URLs
4. Cliquez sur Save Changes
5. Redémarrez votre application Flask

Erreurs liées à la boucle d’événements AsyncIO

Problème : Vous voyez “RuntimeError: This event loop is already running” ou des erreurs asynchrones semblables

Cause : La prise en charge de l’asynchrone dans Flask 2.0+ peut poser problème avec certaines configurations.

Solution :

Installez Flask avec la prise en charge de l’asynchrone :

pip install "flask[async]"

Redémarrez ensuite votre application Flask.

Erreurs « Module introuvable »

Problème : Vous voyez “ModuleNotFoundError: No module named ‘auth0_server_python’” ou un message semblable

Cause : Le SDK n’est pas installé ou l’environnement virtuel n’est pas activé.

Solution :

1. Assurez-vous que votre environnement virtuel est activé :
   source venv/bin/activate  # macOS/Linux
   # ou
   venv\Scripts\activate  # Windows
   
2. Installez le SDK :
   pip install auth0-server-python "flask[async]" python-dotenv
   
3. Vérifiez l’installation :

pip list | grep auth0

Erreur ClaimDecodingFailed

Problème : Vous voyez l’erreur “ClaimDecodingFailed” ou “Failed to decode claims” lors de l’authentification

Cause : Le jeton d’identité ou le jeton d’accès reçu depuis Auth0 n’a pas pu être décodé correctement, souvent pour l’une des raisons suivantes :

• format JWT invalide
• données de session corrompues
• algorithmes de signature incompatibles
• décalage horaire entre votre serveur et Auth0

Solution :

1. Assurez-vous que votre AUTH0_CLIENT_SECRET est correct dans le fichier .env
2. Vérifiez que l’heure de votre système est synchronisée (NTP) :
   # macOS
   sudo sntp -sS time.apple.com
   
   # Linux
   sudo ntpdate -s time.nist.gov
   
3. Effacez les témoins du navigateur et relancez l’authentification
4. Vérifiez que AUTH0_DOMAIN n’inclut pas le préfixe https://
5. Vérifiez que Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth → JsonWebToken Signature Algorithm correspond à la configuration de votre SDK

Jeton expiré ou invalide

Problème : Vous voyez les erreurs “Token has expired” ou “invalid_token”

Cause : Le jeton d’accès ou le jeton d’identité a expiré, ou la session a pris fin.

Solution :

1. Le SDK gère automatiquement l’actualisation du jeton si vous incluez le scope offline_access :
   authorization_params={
       'scope': 'openid profile email offline_access',
   }
   
2. Pour les API, assurez-vous de demander de nouveaux jetons :
   access_token = await auth0.get_access_token(
       audience='https://your-api.example.com',
       force_refresh=True  # Forcer l’actualisation au besoin
   )
   
3. Réglez la durée de vie des jetons dans Auth0 Dashboard → Applications → Your App → Settings → Advanced → OAuth
4. Implémentez une gestion appropriée des erreurs afin de rediriger les utilisateurs vers la connexion lorsque les jetons expirent

CORS et erreurs inter-origines

Problème : Vous voyez des erreurs CORS ou “Blocked by CORS policy” dans la console du navigateur

Cause : L’origine de votre application n’est pas configurée correctement dans Auth0.

Solution :

1. Ajoutez votre origine dans Auth0 Dashboard → Applications → Your App → Settings :
   • Allowed Web Origins: http://localhost:5000
   • Allowed Callback URLs: http://localhost:5000/callback
   • Allowed Logout URLs: http://localhost:5000
2. En production, ajoutez vos URL de production :
   https://yourdomain.com
   https://yourdomain.com/callback
   
3. Assurez-vous que votre application Flask a une configuration CORS appropriée si vous appelez les API Auth0 à partir du JavaScript côté client :
   from flask_cors import CORS
   CORS(app, origins=['http://localhost:5000'])
   

Limite de requêtes dépassée

Problème : Vous voyez des erreurs “Trop de requêtes” ou “Rate limit exceeded”

Cause : Votre application a dépassé les limites de requêtes d’Auth0 pour les demandes d’authentification.

Solution :

1. Consultez Auth0 Dashboard → Monitoring → Logs pour obtenir des détails sur les limites de requêtes
2. Implémentez un délai d’attente exponentiel pour les nouvelles tentatives :
   import time
   from auth0_server_python.error import ApiError
   
   async def login_with_retry():
       max_retries = 3
       for attempt in range(max_retries):
           try:
               return await auth0.start_interactive_login({}, g.store_options)
           except ApiError as e:
               if e.status_code == 429 and attempt < max_retries - 1:
                   wait_time = 2 ** attempt
                   time.sleep(wait_time)
               else:
                   raise
   
3. Vérifiez les limites de votre forfait Auth0
4. Optimisez le flux d’authentification pour réduire les demandes de jetons inutiles
5. Mettez les jetons en cache de façon appropriée au lieu d’en demander fréquemment de nouveaux