Share via

Tutoriel : préparer votre locataire externe à l’authentification d’utilisateurs dans une application monopage React

  • Article

Cette série de tutoriels montre comment créer une application monopage (SPA) React, puis la préparer à l’authentification à l’aide du Centre d’administration Microsoft Entra. Vous allez utiliser la Bibliothèque d’authentification Microsoft pour JavaScript pour authentifier votre application auprès de votre locataire externe. Enfin, vous allez exécuter l’application, puis tester les expériences de connexion et de déconnexion.

Dans ce tutoriel,

  • Inscrire une application SPA dans le centre d’administration Microsoft Entra, puis enregistrer ses identificateurs
  • Définir la plateforme et les URL
  • Accorder des autorisations à l’application SPA pour accéder à Microsoft API Graph
  • Créer un flux utilisateur de connexion et de déconnexion dans le Centre d’administration Microsoft Entra
  • Associer votre application monopage à un flux utilisateur

Prérequis

  • Un locataire externe. Si vous n’en avez pas, créez un locataire d’essai ou un locataire avec un abonnement avant de commencer.
  • 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
    • Administrateur d'applications cloud

Inscrire l’application SPA, puis enregistrer les identificateurs

Pour permettre à votre application de connecter des utilisateurs avec Microsoft Entra, lD externe Microsoft Entra doit être informé de l’existence de l’application que vous créez. 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.

Ajouter une URL de redirection de plateforme

Pour spécifier le type de votre application dans votre inscription d’application, effectuez les étapes suivantes :

  1. Sous Gérer, sélectionnez Authentification.
  2. Dans la page Configurations de plateforme, sélectionnez Ajouter une plateforme, puis Application monopage.
  3. Pour les URI de redirection, entrez http://localhost:3000.
  4. Sélectionnez Configurer pour enregistrer vos modifications.

Accorder des autorisations de connexion

  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.

  3. Sous Autorisations configurées, sélectionnez Ajouter une autorisation.

  4. Sélectionnez l’onglet API Microsoft.

  5. Dans la section API Microsoft couramment utilisées, sélectionnez Microsoft Graph.

  6. Sélectionnez l’option Autorisations déléguées.

  7. Dans la section Sélectionner les autorisations, recherchez et sélectionnez les deux autorisations openid et offline_access.

  8. Sélectionnez le bouton Ajouter des autorisations.

  9. À ce stade, vous avez attribué les autorisations correctement. Toutefois, comme le locataire est celui d’un client, les utilisateurs consommateurs eux-mêmes ne peuvent pas donner leur consentement à ces autorisations. En qualité d’administrateur, vous devez consentir à ces autorisations au nom de tous les utilisateurs du locataire :

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

Créer un flux utilisateur d’inscription et de connexion

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 de l’article Activer la réinitialisation de mot de passe en libre-service.

Associer l’application à votre flux utilisateur

Bien que de nombreuses applications puissent être associées à votre flux utilisateur, une seule et même application peut être associée à un seul flux utilisateur. Un flux utilisateur permet de configurer l’expérience utilisateur pour des applications spécifiques. Par exemple, vous pouvez configurer un flux d’utilisateurs qui demande aux utilisateurs de se connecter ou de s’inscrire avec une adresse e-mail.

  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.

Étape suivante

Partie 2 : créer un projet d’application monopage React pour l’authentification dans un locataire externe