Démarrage rapide : Connecter des utilisateurs dans un exemple d’application web

S’applique à : Cercle vert des locataires de main-d’œuvre Locataires externes (en savoir plus)

Dans ce guide de démarrage rapide, vous utilisez un exemple d'application web pour vous guider sur la manière de connecter des utilisateurs et d'appeler l'API Microsoft Graph dans votre locataire d'entreprise. L’exemple d’application utilise la bibliothèque d’authentification Microsoft pour gérer l’authentification.

Avant de commencer, utilisez le sélecteur Choisir un type de locataire en haut de cette page pour sélectionner un type de locataire. Microsoft Entra ID fournit deux configurations de locataire : employés et externe. Une configuration de tenant pour la gestion du personnel est destinée à vos employés, vos applications internes et à d'autres ressources organisationnelles. Un locataire externe est destiné à vos applications destinées aux clients.

Prerequisites

• Un compte Azure avec un abonnement actif. Si vous n’en avez pas encore, créez un compte gratuitement.
• Ce compte Azure doit disposer des autorisations nécessaires pour gérer des applications. Les rôles Microsoft Entra suivants incluent les autorisations requises :
  • Administrateur d’application
  • Développeur d’applications
• Un locataire d’employés. Vous pouvez utiliser votre répertoire par défaut ou configurer un nouveau locataire.
• Visual Studio Code ou un autre éditeur de code.

Nœud

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme Web . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:3000/auth/redirect
  • URL de déconnexion de canal frontal : https://localhost:5001/signout-callback-oidc
• Ajoutez une clé secrète client à votre inscription d’application. N’utilisez pas les secrets client dans les applications de production. Utilisez plutôt des certificats ou des informations d’identification fédérées. Pour plus d’informations, consultez ajouter des informations d’identification à votre application.
• Node.js

ASP.NET Core

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme Web . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : https://localhost:5001/signin-oidc
  • URL de déconnexion de canal frontal : https://localhost:5001/signout-callback-oidc
• Ajoutez un certificat auto-signé à votre inscription d’application. N’utilisez pas de certificats auto-signés dans les applications de production. Utilisez plutôt un certificat à partir d’une autorité de certification approuvée ou d’informations d’identification fédérées. Pour plus d’informations, consultez ajouter des informations d’identification à votre application. Créez le certificat à l’aide de la commande suivante :

  dotnet dev-certs https -ep ./certificate.crt --trust
  

• Exigence minimale du SDK .NET 8.0

Python Flask

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme Web . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:5000/getAToken
• Python 3 +
• Ajoutez une clé secrète client à votre inscription d’application. N’utilisez pas les secrets client dans les applications de production. Utilisez plutôt des certificats ou des informations d’identification fédérées. Pour plus d’informations, consultez ajouter des informations d’identification à votre application.

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 en tant que fichier .zip .

Nœud

• Téléchargez le fichier .zip, puis extrayez-le dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères ou clonez le référentiel :

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-node.git
  

ASP.NET Core

• Téléchargez le fichier .zip, puis extrayez-le dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères ou clonez le référentiel :

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-dotnet.git
  

Python Flask

• Téléchargez l’exemple de code Python , puis extrayez-le dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères ou clonez le référentiel :

• Pour cloner l’exemple, ouvrez une invite de commandes et 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/

Configurez l’échantillon d’application web

Pour permettre à l'application d'exemple de connecter les utilisateurs, vous devez la mettre à jour avec les informations de votre application et de votre locataire.

Nœud

Dans le dossier ms-identity-node , ouvrez le fichier App/.env , puis remplacez les espaces réservés suivants :

Variable	Descriptif	Exemple(s)
Enter_the_Cloud_Instance_Id_Here	Instance cloud Azure dans laquelle votre application est inscrite	https://login.microsoftonline.com/ (inclure la barre oblique de fin)
Enter_the_Tenant_Info_here	ID de locataire ou domaine principal	contoso.microsoft.com ou aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	ID client de l’application que vous avez inscrite	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Clé secrète du client de l'application que vous avez enregistrée	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	Instance cloud de l’API Microsoft Graph que votre application appelle	https://graph.microsoft.com/ (inclure la barre oblique de fin)
Enter_the_Express_Session_Secret_Here	Chaîne aléatoire de caractères utilisée pour signer le cookie de session Express	A1b-C2d_E3f.H4...

Une fois que vous avez apporté des modifications, votre fichier doit ressembler à l’extrait de code suivant :

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

ASP.NET Core

1. Dans votre IDE, ouvrez le dossier du projet, ms-identity-docs-code-dotnet\web-app-aspnet, contenant l’exemple.

2. Ouvrez appsettings.json et remplacez le contenu du fichier par l’extrait de code suivant ;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId : identificateur du locataire où l’application est inscrite. Remplacez le texte entre guillemets par Directory (tenant) ID enregistré précédemment à partir de la page d'aperçu de l'application inscrite.
   • ClientId : identificateur de l’application, également appelé client. Remplacez le texte entre guillemets par la Application (client) ID valeur enregistrée précédemment à partir de la page vue d’ensemble de l’application inscrite.
   • ClientCertificates : un certificat auto-signé est utilisé pour l’authentification dans l’application. Remplacez le texte du CertificateThumbprint par l’empreinte numérique du certificat précédemment enregistré.

Python Flask

1. Ouvrez l’application que vous avez téléchargée dans un IDE et accédez au dossier racine de l’exemple d’application.

   cd flask-web-app
   

2. Créez un fichier .env dans le dossier racine du projet à l’aide de .env.sample.entra-id comme guide.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Définissez la valeur de CLIENT_IDl’ID d’application (client) pour l’application inscrite, disponible sur la page vue d’ensemble.
   • Définissez la valeur de à la clé secrète client que vous avez créée dans les Certificats & Secrets de l’application inscrite.
   • Définissez la valeur de AUTHORITY à https://login.microsoftonline.com/<TENANT_GUID>. L’ID d’annuaire (locataire) est disponible sur la page d’aperçu de l’enregistrement de l’application.

   Les variables d’environnement sont référencées dans app_config.py et conservées dans un fichier .env distinct pour les préserver du contrôle de code source. Le fichier .gitignore fourni empêche l’enregistrement du fichier .env.

Exécuter et tester un exemple d’application web

Vous avez configuré votre exemple d’application. Vous pouvez continuer à l’exécuter et à le tester.

Nœud

1. Pour démarrer le serveur, exécutez les commandes suivantes à partir du répertoire du projet :

   cd App
   npm install
   npm start
   

2. Accédez à http://localhost:3000/.

3. Sélectionnez Se connecter pour démarrer le processus de connexion.

La première fois que vous vous connectez, vous êtes invité à fournir votre consentement pour autoriser l’application à vous connecter et à accéder à votre profil. Une fois que vous êtes connecté, vous êtes redirigé vers la page d’accueil de l’application.

Fonctionnement de l’application

L’exemple héberge un serveur web sur localhost, port 3000. Lorsqu’un navigateur web accède à cette adresse, l’application affiche la page d’accueil. Une fois que l’utilisateur sélectionne Se connecter, l’application redirige le navigateur vers l’écran de connexion à Microsoft Entra, via l’URL générée par la bibliothèque MSAL Node. Une fois que l’utilisateur a donné son consentement, le navigateur redirige l’utilisateur vers la page d’accueil de l’application, ainsi qu’un ID et un jeton d’accès.

ASP.NET Core

1. Dans le répertoire de votre projet, utilisez le terminal pour entrer les commandes suivantes :

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. Copiez l’URL https qui s’affiche dans le terminal, par exemple, https://localhost:5001et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

3. Suivez les étapes et entrez les détails nécessaires pour vous connecter avec votre compte Microsoft. Vous êtes invité à fournir une adresse e-mail afin qu’un code secret unique puisse être envoyé à vous. Entrez le code lorsque vous y êtes invité.

4. L’application demande l’autorisation de maintenir l’accès aux données que vous lui avez accordées, et de vous connecter et de lire votre profil. Sélectionnez Accepter. La capture d’écran suivante s’affiche. Il indique que vous êtes connecté à l’application et affichez les détails de votre profil à partir de l’API Microsoft Graph.

   

Se déconnecter de l’application

1. Recherchez le lien Se déconnecter en haut à droite de la page et sélectionnez-le.
2. Vous êtes invité à choisir un compte à partir duquel vous vous déconnectez. Sélectionnez le compte que vous avez utilisé pour vous connecter.
3. Un message s’affiche indiquant que vous vous êtes déconnecté. Vous pouvez maintenant fermer la fenêtre du navigateur.

Python Flask

1. Créez un environnement virtuel pour l’application :

   • Pour Windows, exécutez les commandes suivantes :

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

   • Pour macOS/Linux, exécutez les commandes suivantes :

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

2. Installez les conditions requises à l’aide de pip:

   pip install -r requirements.txt
   

3. Exécutez l’application à partir de la ligne de commande. Vérifiez que votre application s’exécute sur le même port que l’URI de redirection que vous avez configuré précédemment.

   flask run --debug --host=localhost --port=5000
   

4. Copiez l’URL https qui apparaît dans le terminal, par exemple, https://localhost:5000et collez-la dans un navigateur. Nous vous recommandons d’utiliser une session de navigateur privée ou incognito.

5. Suivez les étapes et entrez les détails nécessaires pour vous connecter avec votre compte Microsoft. Vous êtes invité à fournir une adresse e-mail et un mot de passe pour vous connecter.

6. L’application demande l’autorisation de conserver l’accès aux données que vous autorisez à accéder, puis de vous connecter, puis de lire votre profil, comme illustré dans la capture d’écran. Sélectionnez Accepter.

   

7. La capture d’écran suivante s’affiche, ce qui indique que vous êtes connecté à l’application.

Fonctionnement de l’application

Le diagramme suivant illustre le fonctionnement de l’exemple d’application :

1. L’application utilise le identity package pour obtenir un jeton d’accès à partir de la plateforme d’identités Microsoft. Ce package est basé sur la bibliothèque d’authentification Microsoft (MSAL) pour Python afin de simplifier l’authentification et l’autorisation dans les applications web.

2. Le jeton d’accès que vous obtenez à l’étape précédente est utilisé comme jeton du porteur pour authentifier l’utilisateur lors de l’appel de l’API Microsoft Graph.

Contenu connexe

Nœud

• Découvrez comment créer une application web Node.js qui connecte des utilisateurs et appelle l’API Microsoft Graph dans le didacticiel : connecter des utilisateurs et acquérir un jeton pour Microsoft Graph dans une application web Node.js &Express.

ASP.NET Core

• Découvrez en créant cette application web ASP.NET avec le didacticiel de la série : Inscrire une application auprès de la plateforme d’identités Microsoft.
• Démarrage rapide : Protéger une API web ASP.NET Core avec la plateforme d’identités Microsoft.
• Démarrage rapide : Déployer une application web ASP.NET sur Azure App Service

Python Flask

• Découvrez comment créer une application web Python qui connecte des utilisateurs et appelle une API web protégée dans tutoriel : application web qui connecte des utilisateurs.

Dans ce guide de démarrage rapide, vous utilisez un exemple d’application web pour vous montrer comment connecter des utilisateurs dans votre locataire externe. L’exemple d’application utilise la bibliothèque d’authentification Microsoft pour gérer l’authentification.

Avant de commencer, utilisez le sélecteur Choisir un type de locataire en haut de cette page pour sélectionner un type de locataire. Microsoft Entra ID fournit deux configurations de locataire : employés et externe. Une configuration de tenant pour la gestion du personnel est destinée à vos employés, vos applications internes et à d'autres ressources organisationnelles. Un locataire externe est destiné à vos applications destinées aux clients.

Prerequisites

• Un compte Azure avec un abonnement actif. Si vous n’en avez pas encore, créez un compte gratuitement.
• Ce compte Azure doit disposer des autorisations nécessaires pour gérer des applications. Les rôles Microsoft Entra suivants incluent les autorisations requises :
  • Administrateur d’application
  • Développeur d’applications
• Un locataire externe. Pour en créer un, choisissez parmi les méthodes suivantes :
  • Utilisez l’extension Microsoft Entra External ID pour configurer un locataire externe directement dans Visual Studio Code. (Conseillé)
  • Créer un nouveau locataire externe dans le Centre d’administration Microsoft Entra.
• Flux utilisateur. Pour découvrir plus d’informations, consultez Créer des flux d’utilisateur d’inscription en libre-service pour les applications dans des locataires externes. Ce flux utilisateur peut être utilisé pour plusieurs applications.
• Visual Studio Code ou un autre éditeur de code.

Nœud

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme Web . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:3000/auth/redirect
  • URL de déconnexion de canal frontal : https://localhost:5001/signout-callback-oidc
• Ajoutez une clé secrète client à votre inscription d’application. N’utilisez pas les secrets client dans les applications de production. Utilisez plutôt des certificats ou des informations d’identification fédérées. Pour plus d’informations, consultez ajouter des informations d’identification à votre application.
• Ajouter votre application au flux utilisateur
• Node.js

ASP.NET Core

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme Web . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : https://localhost:5001/signin-oidc
  • URL de déconnexion de canal frontal : https://localhost:5001/signout-callback-oidc
• Ajoutez une clé secrète client à votre inscription d’application. N’utilisez pas les secrets client dans les applications de production. Utilisez plutôt des certificats ou des informations d’identification fédérées. Pour plus d’informations, consultez ajouter des informations d’identification à votre application.
• Ajouter votre application au flux utilisateur
• Version minimale du Kit de développement logiciel (SDK) .NET 8.0.

Python Django

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme Web . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:5000/getAToken
• Ajouter votre application au flux utilisateur
• Python 3 +
• Ajoutez une clé secrète client à votre inscription d’application. N’utilisez pas les secrets client dans les applications de production. Utilisez plutôt des certificats ou des informations d’identification fédérées. Pour plus d’informations, consultez ajouter des informations d’identification à votre application.

Python Flask

• Inscrivez une nouvelle application dans le Centre d’administration Microsoft Entra, configurée pour les comptes dans cet annuaire organisationnel uniquement. Pour plus d’informations, reportez-vous à l'enregistrement d'une application. Enregistrez les valeurs suivantes à partir de la page Vue d’ensemble de l’application pour une utilisation ultérieure :
  • ID d’application (client)
  • ID de l’annuaire (locataire)
• Ajoutez les URI de redirection suivants à l’aide de la configuration de la plateforme Web . Pour plus d’informations, consultez Comment ajouter un URI de redirection dans votre application .
  • URI de redirection : http://localhost:5000/getAToken
• Ajouter votre application au flux utilisateur
• Python 3 +
• Ajoutez une clé secrète client à votre inscription d’application. N’utilisez pas les secrets client dans les applications de production. Utilisez plutôt des certificats ou des informations d’identification fédérées. Pour plus d’informations, consultez ajouter des informations d’identification à votre application.

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

Nœud

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger en tant que fichier .zip :

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-ciam-javascript-tutorial.git
  

• Vous pouvez également télécharger l’exemple de fichier .zip, puis l’extraire dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères.

Installer les dépendances de projet

1. Ouvrez une fenêtre de console et accédez au répertoire qui contient l’exemple d’application Node.js :

   cd 1-Authentication\5-sign-in-express\App
   

2. Exécutez les commandes suivantes pour installer les dépendances d’application :

   npm install
   

ASP.NET Core

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger en tant que fichier .zip.

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-ciam-dotnet-tutorial.git
  

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

Python Django

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger en tant que fichier .zip.

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

Installer les dépendances de projet

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

   cd django-web-app
   

2. Configurez l’environnement virtuel :

   • Pour Windows, exécutez les commandes suivantes :

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

   • Pour macOS/Linux, exécutez les commandes suivantes :

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

3. Pour installer les dépendances d’application, exécutez les commandes suivantes :

   python3 -m pip install -r requirements.txt
   

Python Flask

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger en tant que fichier .zip.

• Pour cloner l’exemple, ouvrez une invite de commandes et 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-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

Installer les dépendances de projet

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

   cd flask-web-app
   

2. Configurez l’environnement virtuel :

   • Pour Windows, exécutez les commandes suivantes :

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

   • Pour macOS/Linux, exécutez les commandes suivantes :

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

3. Pour installer les dépendances d’application, exécutez les commandes suivantes :

   python3 -m pip install -r requirements.txt
   

Configurez l’échantillon d’application web

Pour connecter les utilisateurs avec l'application d'exemple, vous devez la mettre à jour avec les détails de votre application et de votre client :

Nœud

1. Dans votre éditeur de code, ouvrez le fichier app\authConfig.js .

2. Trouvez l’espace réservé :

   • Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application inscrite précédemment.
   • Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine du répertoire (locataire). Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez de quelle manière consulter les détails de votre locataire.
   • Enter_the_Client_Secret_Here et remplacez-le par la valeur de secret d’application que vous avez copiée précédemment.

ASP.NET Core

1. Accédez au répertoire racine qui contient l’exemple d’application ASP.NET Core :

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Ouvrez le fichier appsettings.json .

3. Dans Autorité, recherchez et remplacez-le Enter_the_Tenant_Subdomain_Here par le sous-domaine de votre locataire. Par exemple, si votre domaine principal de locataire est caseyjensen@onmicrosoft.com, la valeur que vous devez entrer est casyjensen.

4. Recherchez la valeur et remplacez-la Enter_the_Application_Id_Here par l’ID d’application (clientId) de l’application que vous avez inscrite dans le Centre d’administration Microsoft Entra.

5. Remplacez Enter_the_Client_Secret_Here par la valeur de clé secrète client que vous avez configurée.

Python Django

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

2. Créez un fichier .env dans le dossier racine du projet à l’aide du fichier .env.sample.external-id comme guide.

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

   1. CLIENT_ID qui est l’ID d’application (client) de l’application que vous avez inscrite précédemment.
   2. CLIENT_SECRET la valeur secrète de l'application que vous avez copiée auparavant.
   3. AUTHORITY qui est l’URL qui identifie une autorité de jeton. Il doit s’agir du format https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Remplacez sous-domaine par le sous-domaine du répertoire locataire. Par exemple, si le domaine principal de votre 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. REDIRECT_URI qui doit être similaire à l’URI de redirection que vous avez inscrit précédemment doit correspondre à votre configuration.

Python Flask

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

2. Créez un fichier .env dans le dossier racine du projet à l’aide du fichier .env.sample.external-id 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 la valeur secrète de l’application que vous avez copiée plus tôt.
   • AUTHORITY qui est l’URL qui identifie une autorité de jeton. Il doit s’agir du format https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Remplacez subdomain par le sous-domaine du Répertoire (tenant). Par exemple, si le domaine principal de votre 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. Cette configuration se trouve dans le fichier app_config.py en tant que REDIRECT_PATH.

Exécuter et tester un exemple d’application web

Nœud

Vous pouvez maintenant tester l’exemple d’application web Node.js. Vous devez démarrer le serveur Node.js et y accéder via votre navigateur à l’adresse http://localhost:3000.

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

   npm start 
   

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 terminé, sélectionnez Se connecter lorsque vous y êtes invité.

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 aucun compte, sélectionnez le lien Vous n’avez pas de compte ? Créez un lien , qui lance le flux d’inscription.

5. Si vous choisissez l’option d’inscription, après avoir renseigné votre e-mail, votre code secret à usage unique, le nouveau mot de passe et plus de détails de compte, vous avez terminé l’intégralité du flux d’inscription. Vous observez une page similaire à la capture d’écran suivante. Vous observez une page similaire si vous choisissez l’option de connexion.

   

6. Sélectionnez Déconnectez pour déconnecter l’utilisateur de l’application web ou sélectionnez Afficher les assertions du jeton d’identification pour afficher les assertions du jeton d’identification retournées par Microsoft Entra.

Fonctionnement

Lorsque les utilisateurs sélectionnent le lien de connexion, l’application lance une demande d’authentification et redirige les utilisateurs vers l’ID externe Microsoft Entra. Dans la page de connexion ou d’inscription qui s’affiche, une fois qu’un utilisateur se connecte correctement ou crée un compte, l’ID externe Microsoft Entra retourne un jeton d’ID à l’application. L’application valide le jeton d’ID, lit les revendications et retourne une page sécurisée aux utilisateurs.

Lorsque les utilisateurs sélectionnent le lien De déconnexion, l’application efface sa session, puis redirige l’utilisateur vers le point de terminaison de déconnexion d’ID externe Microsoft Entra pour l’avertir que l’utilisateur s’est déconnecté.

Si vous souhaitez créer une application similaire à l’exemple que vous avez exécuté, suivez les étapes décrites dans l’article Connecter les utilisateurs dans votre propre application web Node.js.

ASP.NET Core

1. À partir de votre interpréteur de commandes ou de votre ligne de commande, exécutez les commandes suivantes :

   dotnet run
   

2. Ouvrez votre navigateur web et accédez à https://localhost:7274.

3. Connectez-vous avec un compte enregistré auprès du locataire externe.

4. Une fois connecté, le nom d’affichage s’affiche en regard du bouton Déconnexion , comme illustré dans la capture d’écran suivante.

   

5. Pour vous déconnecter de l’application, sélectionnez le bouton Se déconnecter.

Python Django

Lancez l'application pour voir l'expérience de connexion en action.

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

   python manage.py runserver localhost:5000                                             
   

   Vous pouvez utiliser un numéro de port de votre choix.

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

   

3. Une fois le chargement 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 aucun compte, sélectionnez le lien Vous n’avez pas de compte ? Créez un lien , qui lance le flux d’inscription.

5. Si vous choisissez l’option d’inscription, vous passez par le processus d’inscription. Renseignez votre courrier électronique, code secret unique, nouveau mot de passe et plus de détails de compte pour terminer l’ensemble du flux d’inscription.

6. Après vous être connecté ou inscrit, vous êtes redirigé vers l’application web. Vous voyez une page qui ressemble à la capture d’écran suivante :

   

7. Sélectionnez Déconnexion 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 de connexion, l’application lance une demande d’authentification et redirige les utilisateurs vers l’ID externe Microsoft Entra. Un utilisateur se connecte ou s'inscrit sur la page qui apparaît. Après avoir fourni les informations d’identification requises et le consentement aux étendues requises, Microsoft Entra External ID 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 à partir de l’ID externe Microsoft Entra.

Lorsque les utilisateurs sélectionnent le lien Déconnexion , l’application efface sa session, redirige l’utilisateur vers le point de terminaison de déconnexion d’ID externe Microsoft Entra pour l’avertir que l’utilisateur s’est déconnecté. L’utilisateur est ensuite redirigé vers l’application web.

Python Flask

Lancez l'application pour voir l'expérience de connexion en action.

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 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 aucun compte, sélectionnez le lien Vous n’avez pas de compte ? Créez un lien , qui lance le flux d’inscription.

5. Si vous choisissez l’option d’inscription, vous allez passer par le flux d’authentification. Renseignez votre courrier électronique, code secret unique, nouveau mot de passe et plus de détails de compte pour terminer l’ensemble du flux d’inscription.

6. Après vous être connecté ou inscrit, vous êtes redirigé vers l’application web. Une page semblable à la capture d’écran suivante s’affiche :

   

7. Sélectionnez Déconnexion 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 de connexion, l’application lance une demande d’authentification et redirige les utilisateurs vers l’ID externe Microsoft Entra. Un utilisateur se connecte ou s'inscrit sur la page qui apparaît. Après avoir fourni les informations d’identification requises et le consentement aux étendues requises, Microsoft Entra External ID 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 à partir de l’ID externe Microsoft Entra.

Lorsque les utilisateurs sélectionnent le lien Déconnexion , l’application efface sa session, redirige l’utilisateur vers le point de terminaison de déconnexion d’ID externe Microsoft Entra pour l’avertir que l’utilisateur s’est déconnecté. L’utilisateur est ensuite redirigé vers l’application web.

Contenu connexe

Nœud

• Connecter des utilisateurs dans votre application web Node.js
• Démarrage rapide - Connecter des utilisateurs et appeler une API web dans un exemple d’application web Node.js
• Démarrage rapide - Modifier le profil dans un exemple d’application web Node.js

ASP.NET Core

• Utilisez notre série de tutoriels en plusieurs parties pour générer cette application web ASP.NET à partir de zéro
• Activer la réinitialisation de mot de passe
• Adapter la personnalisation par défaut

Python Django

• Connecter des utilisateurs à l’aide d’un exemple d’application web Flask
• Activer la réinitialisation de mot de passe
• Adapter la personnalisation par défaut

Python Flask

• Activer la réinitialisation de mot de passe
• Adapter la personnalisation par défaut