Configurer l’authentification dans un exemple d’API web Node.js à l’aide d’Azure Active Directory B2C

Dans cet article, vous allez apprendre à configurer un exemple d’application web Node.js pour appeler un exemple d’API web Node.js. L’API web doit être protégée par l’application Azure AD B2C elle-même. Dans cette configuration, une application web, telle que l’ID d’application : 1 appelle une API web, telle que l'ID d’application : 2. Les utilisateurs s’authentifient dans l’application web pour acquérir un jeton d’accès, qui est utilisé ensuite pour appeler une API web protégée.

Vue d'ensemble

L’authentification par jeton garantit que les demandes adressées à une API web sont accompagnées d’un jeton d’accès valide.

L’application web exécute les événements suivants :

• Elle authentifie les utilisateurs auprès d’Azure AD B2C.

• Elle obtient un jeton d’accès doté des autorisations requises (étendues) pour le point de terminaison de l’API web.

• Elle transmet le jeton d’accès comme jeton du porteur dans l’en-tête d’authentification de la requête HTTP. Elle utilise le format :

Authorization: Bearer <token>

L’API web exécute les événements suivants :

• Elle lit le jeton du porteur à partir de l’en-tête d’authentification dans la requête HTTP.

• Elle valide le jeton.

• Elle valide les autorisations (étendues) dans le jeton.

• Elle répond à la requête HTTP. Si le jeton n’est pas valide, le point de terminaison de l’API web répond avec une erreur HTTP 401 Unauthorized.

Vue d’ensemble de l’inscription de l’application

Pour permettre à votre application de se connecter avec Azure AD B2C et d’appeler une API web, vous devez inscrire deux applications dans le répertoire d’Azure AD B2C.

• L’inscription de l’application web permet à votre application de se connecter grâce à Azure AD B2C. Pendant l’inscription, vous spécifiez l’URI de redirection. L’URI de redirection est le point de terminaison vers lequel les utilisateurs sont redirigés par Azure AD B2C après s’être authentifiés. 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. Vous allez également générer une clé secrète client pour votre application. Votre application utilise la clé secrète client pour échanger un code d’autorisation pour un jeton d’accès.

• L’inscription de l’API web permet à votre application d’appeler une API web sécurisée. L’inscription comprend les étendues de l’API web. Les étendues permettent de gérer les autorisations d’accès aux ressources protégées, telles que votre API web. Vous accordez les autorisations de l’application web aux étendues de l’API web. Lorsqu’un jeton d’accès est demandé, votre application spécifie les autorisations souhaitées dans le paramètre d’étendue de la requête.

Les inscriptions et l’architecture des applications sont décrites dans le diagramme suivant :

Prérequis

• Node.js.

• Visual Studio Code ou un autre éditeur de code.

Étape 1 : Configurer votre 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 votre application web et l’API

Dans cette étape, vous allez créer les inscriptions d’application de l’application web et de l’API web, puis spécifier les étendues de votre API web.

Étape 2.1 : Inscrire l’application API web

Pour créer l’inscription d’application API web (ID d’application : 2), suivez les étapes suivantes :

1. Connectez-vous au portail Azure.

2. Veillez à bien utiliser l’annuaire qui contient votre locataire Azure AD B2C. Sélectionnez l’icône Répertoires + abonnements dans la barre d’outils du portail.

3. Sur la page Paramètres du portail | Répertoires + abonnements, recherchez votre répertoire AD B2C Azure dans la liste Nom de répertoire, puis sélectionnez Basculer.

4. Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.

5. Sélectionnez Inscriptions d’applications, puis Nouvelle inscription.

6. Dans le champ Nom, entrez un nom pour l’application (par exemple my-api1). Laissez les valeurs par défaut pour l'URI de redirection et les Types de comptes pris en charge.

7. Sélectionnez Inscription.

8. Une fois l’inscription de l’application terminée, sélectionnez Vue d’ensemble.

9. Enregistrez l’ID d’application (client) que vous utiliserez ultérieurement pour configurer l’application web.

   

Étape 2.2 : Configurer des étendues

1. Sélectionnez l’application my-api1 que vous avez créée (ID d’application : 2) pour ouvrir sa page Vue d’ensemble.

2. Sous Gérer, sélectionnez Exposer une API.

3. A côté d’URI d’ID d’application, sélectionnez le lien Définir. Remplacez la valeur par défaut (GUID) par un nom unique (par exemple, tasks-api), puis sélectionnez Enregistrer.

   Lorsque votre application web demande un jeton d’accès pour l’API web, elle doit ajouter cet URI en tant que préfixe de chaque étendue que vous définissez pour l’API.

4. Sous Étendues définies par cette API, sélectionnez Ajouter une étendue.

5. Pour créer une étendue qui définit l’accès en lecture à l’API :

   1. Pour Nom de l’étendue, entrez tâches.lecture.
   2. Pour Nom d’affichage du consentement administrateur, entrez Accès en lecture à l’API de tâches.
   3. Pour Description du consentement administrateur, entrez Autorise l’accès en lecture à l’API de tâches.

6. Sélectionnez Ajouter une étendue.

7. Sélectionnez Ajouter une étendue, puis ajoutez une étendue qui définit l’accès en écriture à l’API :

   1. Pour Nom de l’étendue, entrez tâches.écriture.
   2. Pour Nom d’affichage du consentement administrateur, entrez Accès en écriture à l’API de tâches.
   3. Pour Description du consentement administrateur, entrez Autorise l’accès en écriture à l’API de tâches.

8. Sélectionnez Ajouter une étendue.

Étape 2.3 : Inscrire l’application web

Pour créer l’inscription de l’application monopage, procédez comme suit :

1. Connectez-vous au portail Azure.
2. 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 Annuaires + abonnements.
3. Recherchez et sélectionnez Azure AD B2C.
4. Sélectionnez Inscriptions d’applications, puis Nouvelle inscription.
5. Entrez un Nom pour l’application (par exemple, ID d’application : 1).
6. 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) .
7. Sous URI de redirection, sélectionnez Web, puis entrez http://localhost:3000/redirect dans la zone de texte de l’URL
8. Sous Autorisations, cochez la case Accorder le consentement administrateur aux autorisations openid et offline access.
9. Sélectionnez Inscription.

Étape 2.4 : créer une clé secrète client

1. Dans la page Azure AD B2C – Inscriptions d’applications, sélectionnez l’application que vous avez créée, par exemple ID d’application : 1.
2. Dans le menu de gauche, 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, clientsecret1.
5. Sous Expire, sélectionnez une durée pendant laquelle le secret est valide, puis sélectionnez Ajouter.
6. Enregistrez la valeur du secret en prévision d’une utilisation dans le code de votre application cliente. Cette valeur secrète ne sera plus jamais affichée lorsque vous aurez quitté cette page. Vous utiliserez cette valeur comme secret d’application dans le code de votre application.

Étape 2.5 : Accorder des autorisations d’API à l’application web

Pour accorder des autorisations à votre application (ID d’application : 1), procédez comme suit :

1. Sélectionnez Inscriptions d’applications, puis l’application que vous avez créée (ID d’application : 1).

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 Mes API.

5. Sélectionnez l’API (ID d’application : 2) à laquelle l’application web doit être autorisée à accéder. Par exemple, saisissez my-api1.

6. Sous Autorisation, développez tâches, puis sélectionnez les étendues que vous avez définies auparavant (par exemple, tasks.read et tasks.write).

7. Sélectionnez Ajouter des autorisations.

8. Sélectionnez Accorder le consentement de l’administrateur pour <nom de votre locataire>.

9. Sélectionnez Oui.

10. Sélectionnez Actualiser, puis vérifiez que la mention Accordé pour ... apparaît sous État pour les deux étendues.

11. Dans la liste Autorisations configurées, sélectionnez votre étendue, puis copiez le nom complet de celle-ci.

    

Étape 3 : Obtenir le code de l’exemple d’application web

Cet exemple montre la façon dont une application web peut utiliser Azure AD B2C pour l’inscription et la connexion des utilisateurs. L’application acquiert ensuite un jeton d’accès et appelle une API web protégée.

Pour obtenir l’exemple de code de l’application web, vous pouvez effectuer l’une des opérations suivantes :

• Téléchargez un fichier zip. Vous extrayez le fichier zip pour accéder à l’exemple d’application web.

• Clonez l’exemple à partir de GitHub en exécutant la commande suivante :

  git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git
  

Étape 3.1 : Installer les dépendances d’application

1. 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-webapp/call-protected-api
   

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

       npm install && npm update
   

Étape 3.2 : Configurer l’exemple d’application web

Ouvrez votre application web dans un éditeur de code comme Visual Studio Code. Dans le dossier call-protected-api, ouvrez le fichier .env. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C. Mettez à jour les paramètres suivants de l’application :

Clé	Valeur
APP_CLIENT_ID	L’ID d’application (client) pour l’application web que vous avez inscrite à l’étape 2.3.
APP_CLIENT_SECRET	La valeur de la clé secrète client pour l’application web que vous avez créée à l’étape 2.4
SIGN_UP_SIGN_IN_POLICY_AUTHORITY	L’autorité du flux utilisateur Se connecter et s’inscrire pour le flux d’utilisateur que vous avez créé à l’étape 1 telle que 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.
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 Portail Azure. Cette URL 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.

Après la mise à jour, votre fichier de configuration final doit ressembler à l’exemple suivant :

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>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and 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>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
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

Étape 4 : Obtenir le code de l’exemple d’API web

Maintenant que l’API web est inscrite et que vous avez défini ses étendues, configurez le code de l’API web pour qu’il fonctionne avec votre locataire Azure AD B2C.

Pour obtenir l’exemple de code de l’API web, effectuez l’une des opérations suivantes :

• Téléchargez une archive *.zip.

• Clonez l’exemple de projet d’API web à partir de GitHub en exécutant la commande suivante :

  git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
  

• Vous pouvez également accéder directement au projet Azure-Samples/active-directory-b2c-javascript-nodejs-webapi sur GitHub.

Étape 4.1 : Mettre à jour l’API web

1. Dans votre éditeur de code, ouvrez le fichier config.json.

2. Modifiez les valeurs des variables avec le flux d'utilisateurs et l'enregistrement de l'application que vous avez créés précédemment :

   • Pour tenantName, utilisez le nom de votre locataire tel que fabrikamb2c.

   • Pour clientID, utilisez l’ID d’application (client) pour l’API web que vous avez créée à l’étape 2.1.

   • Pour policyName, utilisez le nom du flux d’utilisateur Se connecter et s'inscrire que vous avez créé à l’étape 1 tel que B2C_1_susi.

   Après la mise à jour, votre code doit ressembler à l’exemple suivant :

   config.json:

   {
       "credentials": {
           "tenantName": "fabrikamb2c",
           "clientID": "93733604-cc77-4a3c-a604-87084dd55348"
       },
       "policies": {
           "policyName": "B2C_1_susi"
       },
       "resource": {
           "scope": ["tasks.read"]
       },
       "metadata": {
           "authority": "login.microsoftonline.com",
           "discovery": ".well-known/openid-configuration",
           "version": "v2.0"
       },
       "settings": {
           "isB2C": true,
           "validateIssuer": true,
           "passReqToCallback": false,
           "loggingLevel": "info"
       }
   }
   

Étape 4.2 : Installer les dépendances d’application

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

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. Exécutez les commandes suivantes :

   npm install && npm update
   

Étape 5 : Exécuter l’application web et l’API

Vous êtes maintenant prêt à tester l’accès délimité de l’application web à l’API web. Enfin, vous exécutez à la fois l’API web Node.js et l’exemple d’application web sur votre machine locale.

1. Dans votre terminal, accédez à l’exemple d’API web et exécutez démarrer le serveur d’API Web Node.js. Par exemple : `

   cd active-directory-b2c-javascript-nodejs-webapi
   node index.js
   

   La fenêtre de console affiche le numéro de port de l’endroit où est hébergée l’application.

   Listening on port 5000...
   

2. Dans une autre instance de terminal, accédez à l’exemple d’application web et exécutez démarrer le serveur d’applications web Node.js. Par exemple :

       cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
       node index.js
   

   La fenêtre de console affiche le numéro de port de l’endroit où est hébergée l’application.

   Msal Node Auth Code Sample app listening on port !3000
   

3. Dans votre navigateur, accédez à http://localhost:3000. Vous devez voir la page avec deux boutons, Se connecter pour appeler l’API PROTÉGÉE et Ou appeler l’API ANONYME.

   

4. Pour appeler l’API anonyme, sélectionnez le bouton Ou appeler l’API ANONYME. L’API répond avec l’objet JSON avec la clé date comme suit :

       {"date":"2022-01-27T14:21:22.681Z"}
   

   L’API anonyme est un point de terminaison non protégé dans l’API web. Vous n’avez pas besoin d’un jeton d’accès pour y accéder.

5. Pour appeler le point de terminaison de l’API protégée, sélectionnez le bouton Se connecter pour appeler l’API PROTÉGÉE. Vous êtes invité à vous connecter.

6. 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 que vous vous êtes inscrit, la page suivante doit s’afficher avec le bouton Appeler l’API PROTÉGÉE.

   

7. Pour appeler l’API protégée, sélectionnez le bouton Appeler l’API PROTÉGÉE. L’API répond avec l’objet JSON avec une clé name dont la valeur est le nom de votre compte, par exemple :

       {"name": "User 1"} 
   

Étapes suivantes

Découvrir comment Activer l’authentification dans votre propre API web à l’aide d’Azure AD B2C