Partager via

Démarrage rapide : Connexion des utilisateurs dans une application React à une seule page avec l’authentification native

S’applique à : cercle vert avec un symbole de coche blanc qui indique que le contenu suivant s’applique aux locataires externes. Locataires externes (en savoir plus)

Dans ce guide de démarrage rapide, vous utilisez une application monopage React (SPA) pour montrer comment authentifier les utilisateurs à l’aide de 'API d’authentification native. L’exemple d’application illustre l’inscription des utilisateurs, la connexion, la déconnexion et la réinitialisation de mot de passe avec un e-mail et un mot de passe.

Conditions préalables

Activer les flux d’authentification client public et natifs

Pour spécifier que cette application est un client public et peut utiliser l’authentification native, activez le client public et les flux d’authentification natifs :

  1. Dans la page inscriptions d’applications, sélectionnez l’inscription d’application pour laquelle vous souhaitez activer les flux d’authentification natifs et clients publics.
  2. Sous Gérer, sélectionnez Authentification.
  3. Sous Paramètres avancés, autorisez les flux de clients publics :
    1. Pour Activer les flux mobiles et de bureau suivants, sélectionnez Oui.
    2. Pour Activer led’authentification native, sélectionnez Oui.
  4. Sélectionnez le bouton Enregistrer.

Cloner ou télécharger un exemple de SPA

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-native-javascript-samples.git

Vous pouvez également Télécharger l’exemple, 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 terminal et accédez au répertoire qui contient l’exemple d’application React :

    cd API\React\ReactAuthSimple

  2. Exécutez la commande suivante pour installer les dépendances d’application :

    npm install

Configurer l’exemple d’application React

  1. Dans votre éditeur de code, ouvrez fichier src\config.ts.

  2. Recherchez l’espace réservé Enter_the_Application_Id_Here , puis remplacez-le par l’ID d’application (client) de l’application que vous avez inscrite précédemment.

  3. Enregistrez les modifications.

Configurer le serveur proxy CORS

Les API d'authentification natives ne prennent pas en charge la fonction Partage de ressources entre origines (CORS) vous devez donc mettre en place un serveur proxy entre votre application SPA et les API.

Cet exemple de code inclut un serveur proxy CORS qui transfère les demandes aux points de terminaison d’URL de l’API d’authentification native. Le serveur proxy CORS est un serveur Node.js qui écoute sur le port 3001.

Pour configurer le serveur proxy, ouvrez le fichier proxy.config.js, puis trouvez l'espace réservé :

  • tenantSubdomain et remplacez-le par le sous-domaine (locataire) du répertoire. Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous n'avez pas le sous-domaine de votre locataire, découvrez comment lire les détails de votre locataire.
  • tenantId et remplacez-le par l’ID de locataire du répertoire. Si vous n’avez pas votre identifiant de locataire, apprenez comment consulter les détails de votre locataire.

Exécuter et tester votre application

Vous avez maintenant configuré l’exemple d’application et il est prêt à s’exécuter.

  1. À partir de votre fenêtre de terminal, exécutez les commandes suivantes pour démarrer le serveur proxy CORS :

    cd API\React\ReactAuthSimple
npm run cors

  2. Pour démarrer votre application React, ouvrez une autre fenêtre de terminal, puis exécutez les commandes suivantes :

    cd API\React\ReactAuthSimple
npm start

  3. Ouvrez un navigateur web et accédez à http://localhost:3000/.

  4. Pour vous inscrire à un compte, sélectionnez S’inscrire, puis suivez les invites.

  5. Après vous être inscrit, testez la connexion et la réinitialisation du mot de passe en sélectionnant de connexion et réinitialiser le mot de passe respectivement.

Activer la connexion avec un alias ou un nom d’utilisateur

Vous pouvez autoriser les utilisateurs qui se connectent avec une adresse e-mail et un mot de passe à se connecter avec un nom d’utilisateur et un mot de passe. Le nom d’utilisateur, également appelé un identificateur de connexion alternatif, peut être un identifiant client, un numéro de compte ou un autre identificateur que vous choisissez d’utiliser comme nom d’utilisateur.

Vous pouvez affecter manuellement des noms d’utilisateur au compte d’utilisateur via le Centre d’administration Microsoft Entra ou l’automatiser dans votre application via l’API Microsoft Graph.

Utilisez les étapes de connexion avec un alias ou un nom d'utilisateur pour permettre à vos utilisateurs de se connecter en utilisant un nom d'utilisateur dans votre application :

  1. Activez le nom d’utilisateur dans la connexion.
  2. Créez des utilisateurs avec un nom d’utilisateur dans le Centre d’administration ou mettez à jour les utilisateurs existants en ajoutant un nom d’utilisateur. Vous pouvez également automatiser la création et la mise à jour des utilisateurs dans votre application à l’aide de l’API Microsoft Graph.

Contenu connexe

  • Last updated on