Connecter des utilisateurs dans un exemple d’application web Flask Python

Dans cet article, vous explorez une application web Python Flask sécurisée par ID externe Microsoft Entra. Cet exemple vous guide tout au long de l’expérience de connexion des clients qui s’authentifient dans une application web Flask Python. L’exemple d’application web utilise la bibliothèque d’authentification Microsoft pour Python (MSAL Python) pour gérer l’authentification de l’utilisateur.

Prérequis

• Visual Studio Code ou un autre éditeur de code.
• Python 3+.
• Un client externe. Pour en créer un, choisissez l’une des méthodes suivantes :
  • (Recommandé) Utilisez l’extension ID externe Microsoft Entra pour configurer un locataire externe directement dans Visual Studio Code.
  • Créez un locataire externe dans le centre d’administration Microsoft Entra.

Inscrire l’application web

ID externe Microsoft Entra doit être informé de l’existence de l’application que vous créez pour permettre à votre application de connecter des utilisateurs avec Microsoft Entra. L’inscription d’application établit une relation de confiance entre l’application et Microsoft Entra. Lorsque vous enregistrez une application, l'ID externe génère un identifiant unique appelé ID d'application (client), une valeur utilisée pour identifier votre application lors de la création de demandes d'authentification.

Les étapes suivantes vous montrent comment inscrire votre application dans le centre d’administration Microsoft Entra :

1. Connectez-vous au centre d’administration de Microsoft Entra au minimum en tant que Développeur d’application.

2. Si vous avez accès à plusieurs tenants, utilisez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant externe depuis le menu Répertoires + abonnements.

3. Accédez à Identité>Applications>Inscriptions d’applications.

4. Sélectionnez + Nouvelle inscription.

5. Dans la page Inscrire une application qui s’affiche ;

   1. Dans Nom, entrez un nom d’application explicite qui va être présenté aux utilisateurs de l’application, par exemple ciam-client-app.
   2. Sous Types de comptes pris en charge, sélectionnez Comptes dans cet annuaire organisationnel uniquement.

6. Sélectionnez Inscription.

7. Le volet Vue d’ensemble de l’application s’affiche après une inscription réussie. Enregistrez l’ID d’application (client) à utiliser dans le code source de votre application.

Pour spécifier le type de votre application dans votre inscription d’application, suivez ces étapes :

1. Sous Gérer, sélectionnez Authentification
2. Dans la page Configurations de plateforme, sélectionnez Ajouter une plateforme, puis sélectionnez l’option Web.
3. Pour les URI de redirection, entrezhttp://localhost:3000/getAToken. Cet URI de redirection est l’emplacement où le serveur d’autorisation envoie le jeton d’accès. Vous pouvez le personnaliser en fonction de votre cas d’usage.
4. Sélectionnez Configurer pour enregistrer vos modifications.

Ajouter une clé secrète client d’application

Créez un secret client pour l’application inscrite. L’application utilise la clé secrète client pour prouver son identité quand elle demande des jetons.

1. Dans la page inscriptions d’applications, sélectionnez l’application que vous avez créée (par exemple, ciam-client-app) pour ouvrir sa page Vue d’ensemble.
2. Sous Gérer, sélectionnez Certificats et secrets.
3. Sélectionnez Nouveau secret client.
4. Entrez une description pour la clé secrète client dans la zone Description (par exemple clé secrète client ciam).
5. Sous Expire, sélectionnez la durée de validité de la clé secrète (en fonction des règles de sécurité de votre organisation), puis sélectionnez Ajouter.
6. Enregistrez la Valeur du secret. Vous utiliserez cette valeur pour la configuration dans une étape ultérieure. La valeur du secret ne sera plus affichée et sera irrécupérable une fois que vous quittez les Certificats et secrets. Veillez à l’enregistrer.

Accorder un consentement d’administrateur

Une fois que vous avez inscrit votre application, celle-ci reçoit l’autorisation User.Read. Toutefois, comme le locataire est un locataire externe, les utilisateurs clients ne peuvent pas eux-mêmes consentir à cette autorisation. En qualité d’administrateur, vous devez consentir à ces autorisations au nom de tous les utilisateurs du client :

1. Dans la page inscriptions d’applications, sélectionnez l’application que vous avez créée (par exemple ciam-client-app) pour ouvrir sa page Vue d’ensemble.

2. Sous Gérer, sélectionnez Autorisations de l’API.

   1. Sélectionnez Accorder le consentement administrateur pour <nom de votre client>, puis sélectionnez Oui.
   2. Sélectionnez Actualiser, puis vérifiez que Accordé pour <votre nom de votre locataire> s’affiche sous État pour l’autorisation.

Créez un flux utilisateur

Suivez ces étapes pour créer un flux utilisateur qu’un client peut utiliser pour se connecter ou s’inscrire à une application.

1. Connectez-vous au Centre d’administration Microsoft Entra au moins en tant qu’Administrateur de flux d’utilisateurs ID externe.

2. Si vous avez accès à plusieurs tenants, utilisez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant externe depuis le menu Répertoires + abonnements.

3. Accédez à Identité>Identités externes>Flux utilisateur.

4. Sélectionnez + Nouveau flux utilisateur.

5. Dans la page Créer :

   1. Entrez un nom pour le flux utilisateur, par exemple, SignInSignUpSample.

   2. Dans la liste Fournisseurs d’identité, sélectionnez Comptes de messagerie. Ce fournisseur d’identité permet aux utilisateurs de se connecter ou de s’inscrire avec leur adresse e-mail.

      Notes

      Les fournisseurs d’identité supplémentaires sont listés ici seulement une fois que vous avez configuré la fédération avec eux. Par exemple, si vous configurez la fédération avec Google ou Facebook, vous pouvez sélectionner ces fournisseurs d’identité supplémentaires ici.

   3. Sous Comptes de messagerie, vous pouvez sélectionner une des deux options. Pour ce tutoriel, sélectionnez E-mail avec mot de passe.

      • E-mail avec mot de passe : permet aux nouveaux utilisateurs de s’inscrire et de se connecter en utilisant une adresse e-mail comme nom de connexion et un mot de passe comme informations d’identification de premier facteur.
      • Code secret à usage unique par e-mail : permet aux nouveaux utilisateurs de s’inscrire et de se connecter en utilisant une adresse e-mail comme nom de connexion et un code secret à usage unique par e-mail comme informations d’identification de premier facteur. Le code secret à usage unique par e-mail doit être activé au niveau du locataire (Tous les fournisseurs d’identité>Code secret à usage unique par e-mail) pour que cette option soit disponible au niveau du flux utilisateur.

   4. Sous Attributs utilisateur, choisissez les attributs à collecter auprès de l’utilisateur lors de l’inscription. Sélectionnez Afficher plus afin de choisir des attributs et des revendications pour Pays/région, Nom d’affichage et Code postal. Sélectionnez OK. (Les utilisateurs sont invités à fournir ces attributs que lors de leur première inscription.)

6. Sélectionnez Create (Créer). Le nouveau flux d’utilisateurs apparaît dans la liste Flux d’utilisateurs. Si nécessaire, actualisez la page.

Pour activer la réinitialisation de mot de passe en libre-service, suivez les étapes décrites dans l’article Activer la réinitialisation de mot de passe en libre-service.

Associer l’application web au flux utilisateur

Pour que les utilisateurs du client voient l’expérience d’inscription ou de connexion lorsqu’ils utilisent votre application, vous devez associer votre application à un flux utilisateur. Bien que de nombreuses applications puissent être associées à votre flux utilisateur, chaque application peut être associée à un seul flux utilisateur.

1. Dans le menu de la barre latérale, sélectionnez Identité.

2. Sélectionnez External Identities, puis Flux utilisateur.

3. Dans la page Flux utilisateur, sélectionnez le nom du flux utilisateur que vous avez créé précédemment, par exemple SignInSignUpSample.

4. Sous Utiliser, sélectionnez Applications.

5. Sélectionnez Ajouter une application.

6. Sélectionnez l’application dans la liste, par exemple, ciam-client-app, ou utilisez la barre de recherche pour la trouver, puis sélectionnez-la.

7. Choisissez Sélectionner.

Une fois que vous avez associé votre application à un flux utilisateur, vous pouvez le tester en simulant l’expérience d’inscription ou de connexion d’un utilisateur avec votre application à partir du Centre d’administration Microsoft Entra. Pour ce faire, suivez les étapes décrites dans Tester votre flux utilisateur d’inscription et de connexion.

Cloner ou télécharger un exemple d’application web

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger sous la forme d’un fichier .zip.

• Pour cloner l’exemple, ouvrez une invite de commandes, accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Téléchargez le fichier .zip. Extrayez-la dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères.

Installer les dépendances du projet

1. Ouvrez une fenêtre de console et passez au répertoire qui contient l’exemple d’application web Flask :

   cd flask-web-app
   

2. Configurer un environnement virtuel

   Windows

   py -m venv .venv
   .venv\scripts\activate
   

   macOS/Linux

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Exécutez les commandes suivantes pour installer les dépendances d’applications :

   python3 -m pip install -r requirements.txt
   

Configurer l’exemple d’application web

1. Ouvrez vos fichiers projet dans Visual Studio Code ou dans l’éditeur que vous utilisez.

2. Créez un fichier .env dans le dossier racine du projet en vous servant du fichier .env.sample comme guide.

3. Dans votre fichier .env, fournissez les variables d’environnement suivantes :

   • CLIENT_ID, qui est l’ID d’application (client) de l’application que vous avez inscrite précédemment.
   • CLIENT_SECRET, qui est la valeur du secret d’application que vous avez copiée précédemment.
   • AUTHORITY, qui est l’URL identifiant une autorité de jeton. Elle doit être au format https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Remplacez subdomain par le sous-domaine de l’annuaire (locataire). Par exemple, si votre domaine principal du locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous n’avez pas votre sous-domaine de locataire, découvrez comment lire les détails de votre locataire.

4. Vérifiez que l’URI de redirection est bien configuré. L’URI de redirection que vous avez inscrit précédemment doit correspondre à votre configuration. Cet exemple définit par défaut le chemin d’URI de redirection sur /getAToken. Cela est configuré dans le fichier app_config.py sous REDIRECT_PATH.

Exécuter et tester l’exemple d’application web

Exécutez l’application pour voir l’expérience de connexion en action.

Remarque

Cet exemple utilise la bibliothèque tierce d’identité Python. La bibliothèque n’est pas officiellement gérée par Microsoft, mais elle est recommandée pour votre utilisation. Cette bibliothèque facilite l’ajout de l’authentification à votre application web, car elle reprend beaucoup de détails de MSAL Python.

1. Dans votre terminal, exécutez la commande suivante :

   python3 -m flask run --debug --host=localhost --port=3000
   

   Vous pouvez utiliser le port de votre choix. Il doit s’agir du port de l’URI de redirection que vous avez inscrit précédemment.

2. Ouvrez votre navigateur, puis accédez à http://localhost:3000. Vous devez voir une page similaire à la capture d’écran suivante :

   

3. Une fois le chargement de la page terminé, sélectionnez le lien Se connecter. Vous êtes invité à vous connecter.

4. Dans la page de connexion, tapez votre Adresse e-mail, sélectionnez Suivant, tapez votre Mot de passe, puis sélectionnez Se connecter. Si vous n’avez pas de compte, sélectionnez le lien Pas de compte ? En créer un, qui démarre le flux d’inscription.

5. Si vous choisissez l’option d’inscription, vous suivez le flux d’inscription. Renseignez votre e-mail, le code secret à usage unique, le nouveau mot de passe et d’autres détails de compte pour effectuer l’ensemble du processus d’inscription.

6. Après la connexion ou l’inscription, vous êtes redirigé vers l’application web. Vous devez voir une page similaire à la capture d’écran suivante :

   

7. Sélectionnez Se déconnecter pour déconnecter l’utilisateur de l’application web ou sélectionnez Appeler une API en aval pour effectuer un appel à un point de terminaison Microsoft Graph.

Fonctionnement

Lorsque les utilisateurs sélectionnent le lien Se connecter, l’application lance une requête d’authentification et redirige les utilisateurs vers ID externe Microsoft Entra. Ensuite, un utilisateur se connecte ou s’inscrit dans la page qui s’affiche. Après avoir fourni les informations d’identification demandées et consenti aux étendues nécessaires, ID externe Microsoft Entra redirige l’utilisateur vers l’application web avec un code d’autorisation. L’application web utilise ensuite ce code d’autorisation pour acquérir un jeton auprès d’ID externe Microsoft Entra.

Quand l’utilisateur sélectionne le lien Déconnexion, l’application efface sa session et redirige l’utilisateur vers le point de terminaison de déconnexion ID externe Microsoft Entra pour l’informer que l’utilisateur s’est déconnecté. L’utilisateur est ensuite redirigé vers l’application web.

Contenu connexe

• Connecter des utilisateurs dans un exemple d’application web Django
• Activer la réinitialisation du mot de passe
• Adapter la personnalisation par défaut
• Configurer la connexion avec Google