Configurer l’authentification dans un exemple d’application web Node.js à l’aide d’Azure Active Directory B2C
Cet article utilise un exemple d’application web Node.js pour illustrer comment ajouter une authentification Azure Active Directory B2C (Azure AD B2C) à une application web Node.js. L’exemple d’application permet aux utilisateurs de se connecter, de se déconnecter, de mettre à jour leur profil et de réinitialiser leur mot de passe à l’aide des flux d’utilisateurs Azure AD B2C. L’exemple d’application web utilise la bibliothèque d’authentification Microsoft (MSAL) pour Node pour gérer l’authentification et l’autorisation.
Dans cet article, vous effectuez les tâches suivantes :
- Inscrire une application web dans le portail Azure
- Créer des flux d’utilisateur combinés de connexion et d’inscription, de modification de profil et de réinitialisation de mot de passe pour l’application dans le portail Azure
- Mettre à jour un exemple d’application Node pour utiliser votre propre application Azure AD B2C et vos propres flux utilisateur
- Tester l’exemple d’application
Prérequis
- Node.js.
- Visual Studio Code ou un autre éditeur de code.
- Locataire Azure AD B2C. Si vous n’avez pas déjà créé le vôtre, suivez les étapes du Tutoriel : Créer un locataire Azure Active Directory B2C et enregistrez le nom de votre locataire.
Étape 1 : Configurer vos flux d’utilisateurs
Lorsqu’un utilisateur tente de se connecter à votre application, l’application lance une requête d’authentification auprès du point de terminaison d’autorisation via un flux d’utilisateur. Le flux d’utilisateur définit et contrôle l’expérience de l’utilisateur. Une fois que l’utilisateur a terminé le flux d’utilisateur, Azure AD B2C génère un jeton, puis redirige l’utilisateur vers votre application.
Si vous ne l’avez pas déjà fait, créez un flux d’utilisateur ou une stratégie personnalisée. Répétez les étapes pour créer trois flux utilisateur distincts comme suit :
- Un flux d’utilisateur Inscription et connexion combiné, par exemple
susi. Ce flux utilisateur prend également en charge l’expérience Mot de passe oublié. - Un flux utilisateur Modification de profil, tel que
edit_profile. - Un flux utilisateur Réinitialisation du mot de passe, tel que
reset_password.
Azure AD B2C ajoute B2C_1_ devant le nom du flux utilisateur. Par exemple, susi devient B2C_1_susi.
Étape 2 : Inscrire une application web
Pour permettre à votre application de se connecter avec Azure AD B2C, inscrivez votre application dans le répertoire Azure AD B2C. L’inscription de l’application établit une relation de confiance entre l’application et Azure AD B2C.
Pendant l’inscription de l’application, vous spécifiez l’URI de redirection. L’URI de redirection est le point de terminaison vers lequel l’utilisateur est redirigé par Azure AD B2C après s’être authentifié avec Azure AD B2C. Le processus d’inscription de l’application génère un ID d’application, également appelé ID client, qui identifie votre application de façon unique. Une fois votre application inscrite, Azure AD B2C utilise à la fois l’ID d’application et l’URI de redirection pour créer des requêtes d’authentification.
Étape 2.1 : Inscrire l’application
Pour inscrire l’application web, procédez comme suit :
Connectez-vous au portail Azure.
Si vous avez accès à plusieurs locataires, sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre locataire Azure AD B2C à partir du menu Répertoires + abonnements.
Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.
Sélectionnez Inscriptions d’applications, puis Nouvelle inscription.
Sous Nom, entrez un nom pour l’application (par exemple, webapp1).
Sous Types de comptes pris en charge, sélectionnez Comptes dans un fournisseur d’identité ou annuaire organisationnel (pour authentifier les utilisateurs avec des flux d’utilisateurs) .
Sous URI de redirection, sélectionnez Web, puis entrez
http://localhost:3000/redirectdans la zone d’URL.Sous Autorisations, cochez la case Accorder le consentement administrateur aux autorisations openid et offline access.
Sélectionnez Inscription.
Sélectionnez Vue d’ensemble.
Enregistrez l’ID d’application (client) que vous utiliserez ultérieurement pour configurer l'application web.
Étape 2.2 : Créer une clé secrète client d’application web
Créez une clé secrète client pour l’application web inscrite. L’application Web utilise la clé secrète client pour prouver son identité lorsqu’elle demande des jetons.
- Sous Gérer, sélectionnez Certificats et secrets.
- Sélectionnez Nouveau secret client.
- Entrez une description pour la clé secrète client dans la zone Description (par exemple, clientsecret1).
- Sous Expire, sélectionnez une durée pendant laquelle le secret est valide, puis sélectionnez Ajouter.
- Enregistrez la Valeur du secret. Vous utiliserez cette valeur pour la configuration dans une étape ultérieure.
Étape 3 : Obtenir l’exemple d’application web
Téléchargez un fichier zip ou clonez l’exemple d’application web à partir de GitHub.
git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git
Extrayez l’exemple de fichier dans un dossier. Vous obtenez alors une application web avec la structure de répertoires suivante :
active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
└── layouts/
└── main.hbs
└── signin.hbs
Le dossier views contient des fichiers Handlebars pour l’interface utilisateur de l’application.
Étape 4 : Installer des dépendances
Ouvrez une fenêtre de console et accédez au répertoire qui contient l’exemple d’application Node.js. Par exemple :
cd active-directory-b2c-msal-node-sign-in-sign-out-webappExécutez les commandes suivantes pour installer les dépendances d’applications :
npm install && npm update
Étape 5 : Configurer l’exemple d’application web
Ouvrez votre application wdans un éditeur de code comme Visual Studio Code. Dans le dossier racine du projet, ouvrez le fichier .env. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C. Mettez à jour les propriétés suivantes des paramètres de l’application :
| Clé | Valeur |
|---|---|
APP_CLIENT_ID |
L’ID d’application (client) pour l’application web que vous avez inscrite à l’étape 2.1. |
APP_CLIENT_SECRET |
La valeur de la clé secrète client pour l’application web que vous avez créée à l’étape 2.2 |
SIGN_UP_SIGN_IN_POLICY_AUTHORITY |
L’autorité de flux d’utilisateur Inscription et connexion, par exemple https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>. Remplacez <your-tenant-name> par le nom de votre locataire et <sign-in-sign-up-user-flow-name> par le nom de votre flux d’utilisateur Inscription et connexion, par exemple B2C_1_susi. Découvrez comment Récupérer votre nom de locataire. |
RESET_PASSWORD_POLICY_AUTHORITY |
L’autorité de flux d’utilisateur Réinitialiser le mot de passe telle que https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>. Remplacez <your-tenant-name> par le nom de votre locataire et <reset-password-user-flow-name> par le nom de votre flux d’utilisateur Réinitialiser le mot de passe, par exemple B2C_1_reset_password_node_app. |
EDIT_PROFILE_POLICY_AUTHORITY |
L’autorité de flux d’utilisateur Modification de profil telle que https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>. Remplacez <your-tenant-name> par le nom de votre locataire et <reset-password-user-flow-name> par le nom de votre flux d’utilisateur Réinitialiser le mot de passe, par exemple B2C_1_edit_profile_node_app. |
AUTHORITY_DOMAIN |
Le domaine d’autorité Azure AD B2C tel que https://<your-tenant-name>.b2clogin.com. Remplacez <your-tenant-name> par le nom de votre locataire. |
APP_REDIRECT_URI |
L’URI de redirection de l’application où Azure AD B2C renverra les réponses d’authentification (jetons). Il correspond à l’URI de redirection que vous avez défini lors de l’inscription de votre application dans le portail Azure, et il doit être accessible publiquement. Laissez la valeur telle quelle. |
LOGOUT_ENDPOINT |
Le point de terminaison de déconnexion Azure AD B2C, par exemple https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000. Remplacez <your-tenant-name> par le nom de votre locataire et <sign-in-sign-up-user-flow-name> par le nom de votre flux d’utilisateur Inscription et connexion, par exemple B2C_1_susi. |
Votre fichier config final doit ressembler à l’exemple suivant :
#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
Exécuter l’exemple d’application web
Vous pouvez maintenant tester l’exemple d’application. Vous devez démarrer le serveur Node et y accéder par le biais de votre navigateur sur http://localhost:3000.
Dans votre terminal, exécutez le code suivant pour démarrer le serveur web Node.js :
node index.jsDans votre navigateur, accédez à
http://localhost:3000. Vous devriez voir s’afficher la page avec un bouton Se connecter.
Tester la connexion
Une fois le chargement de la page avec le bouton Se connecter chargée, sélectionnez Se connecter. Vous êtes invité à vous connecter.
Entrez vos informations d’identification de connexion, telles que l’adresse e-mail et le mot de passe. Si vous n’avez pas de compte, sélectionnez S’inscrire maintenant pour en créer un. Une fois que vous vous êtes connecté ou inscrit, vous devriez voir s’afficher la page suivante montrant l’état de la connexion.
Tester la modification du profil
- Après vous être connecté, sélectionnez Modifier le profil.
- Entrez les nouvelles modifications requises, puis sélectionnez Continuer. Vous devriez voir la page avec l’état de connexion présentant les nouvelles modifications, telles que le Prénom.
Tester la réinitialisation du mot de passe
- Après vous être connecté, sélectionnez Réinitialiser le mot de passe.
- Dans la boîte de dialogue suivante qui s’affiche, vous pouvez annuler l’opération en sélectionnant Annuler. Vous pouvez également entrer votre adresse e-mail, puis sélectionner Envoyer le code de vérification. Vous recevrez un code de vérification pour votre compte de messagerie. Copiez le code de vérification dans votre e-mail, entrez-le dans la boîte de dialogue de réinitialisation du mot de passe, puis sélectionnez Vérifier le code.
- Sélectionnez Continuer.
- Entrez votre nouveau mot de passe, puis sélectionnez Continuer. Vous devriez voir la page qui affiche l’état de la connexion.
Tester la déconnexion
Après vous être connecté, sélectionnez Se déconnecter. Vous devriez voir la page contenant un bouton Se connecter.