Configurer l’authentification dans un exemple d’application web qui appelle une API web à l’aide d’Azure Active Directory B2C

Cet article utilise un exemple d’application web ASP.NET qui appelle une API web pour illustrer comment ajouter une authentification Azure Active Directory B2C (Azure AD B2C) à vos applications web.

Vue d'ensemble

OpenID Connect (OIDC) est un protocole d’authentification basé sur OAuth 2.0. Vous pouvez utiliser OIDC pour connecter de façon sécurisée un utilisateur à une application. Cet exemple d’application web utilise Microsoft Identity Web. Microsoft Identity Web est un ensemble de bibliothèques ASP.NET Core qui simplifie l’ajout d’une prise en charge de l’authentification et de l’autorisation aux applications web qui peuvent appeler une API web sécurisée.

Le flux de connexion implique les étapes suivantes :

1. L’utilisateur accède à l’application web et sélectionne Connexion.

2. L’application lance une requête d’authentification et redirige les utilisateurs vers Azure AD B2C.

3. Les utilisateurs s’inscrivent ou se connectent et réinitialisent le mot de passe. Ils peuvent également se connecter avec un compte social.

4. Une fois les utilisateurs connectés, Azure AD B2C renvoie un code d’autorisation à l’application.

5. L’application effectue ensuite les opérations suivantes :

   a. Elle échange le code d’autorisation contre un jeton d’ID, un jeton d’accès et un jeton d’actualisation.
   b. Elle lit les revendications du jeton d’ID et conserve un cookie d’autorisation d’application.
   c. Elle stocke le jeton d’actualisation dans un cache en mémoire pour une utilisation ultérieure.

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 une fois leur authentification avec Azure AD B2C terminée. 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 créez également une clé secrète client, que votre application utilise pour acquérir les jetons en toute sécurité.

• 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 de l’application sont illustrées dans le diagramme suivant :

Appel à une API web

Une fois l’authentification terminée, les utilisateurs interagissent avec l’application, qui appelle une API web protégée. L’API web utilise l’authentification par jeton du porteur. Le jeton du porteur est le jeton d’accès obtenu par l’application auprès d’Azure AD B2C. L’application transmet le jeton dans l’en-tête d’autorisation de la requête HTTPS.

Authorization: Bearer <access token>

Si l’étendue du jeton d’accès ne correspond pas aux étendues de l’API web, la bibliothèque d’authentification obtient un nouveau jeton d’accès avec les étendues appropriées.

Se déconnecter

Le flux de déconnexion implique les étapes suivantes :

1. Dans l’application, les utilisateurs se déconnectent.
2. L’application efface ses objets de session, et la bibliothèque d’authentification efface son cache de jeton.
3. L’application dirige les utilisateurs vers le point de terminaison de déconnexion Azure AD B2C pour mettre fin à la session Azure AD B2C.
4. Les utilisateurs sont redirigés vers l’application.

Prérequis

Un ordinateur exécutant l’un des éléments suivants :

É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 des applications web

Au cours de cette étape, vous allez créer l’application web et l’inscription de l’application 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 les étendues de l’application API web

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 web, procédez comme suit :

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

2. Sous Nom, entrez un nom pour l’application (par exemple, webapp1).

3. 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) .

4. Sous URI de redirection, sélectionnez Web, puis entrez https://localhost:5000/signin-oidc dans la zone d’URL.

5. Sous Autorisations, cochez la case Accorder le consentement administrateur aux autorisations openid et offline access.

6. Sélectionnez Inscription.

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

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

   

Étape 2.4 : 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.

1. Sous Gérer, sélectionnez Certificats et secrets.
2. Sélectionnez Nouveau secret client.
3. Entrez une description pour la clé secrète client dans la zone Description (par exemple, clientsecret1).
4. Sous Expire, sélectionnez une durée pendant laquelle le secret est valide, puis sélectionnez Ajouter.
5. Enregistrez la Valeur du secret. Vous utiliserez cette valeur pour la configuration dans une étape ultérieure.

Étape 2.5 : Accorder à l’application web les autorisations pour l’API 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 l’exemple d’application web

Téléchargez le fichier zip ou exécutez la commande Bash suivante pour cloner l’exemple d’application web à partir de GitHub.

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Extrayez l’exemple de fichier dans un dossier où la longueur totale du chemin d’accès est égale ou inférieure à 260 caractères.

Étape 4 : Configurer l’exemple d’API web

Dans le dossier d’exemple, dans le dossier 4-WebApp-your-API/4-2-B2C/TodoListService, ouvrez le projet TodoListService.csproj avec Visual Studio ou Visual Studio Code.

Dans le dossier racine du projet, ouvrez le fichier appsettings.json. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C. L’application API web les utilise pour valider le jeton d’accès transmis comme jeton du porteur par l’application web. Mettez à jour les propriétés suivantes des paramètres de l’application :

Votre fichier config final doit ressembler au fichier JSON suivant :

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Étape 4.1 : Définir la stratégie d’autorisation

L’API web vérifie que l’utilisateur s’est authentifié avec le jeton du porteur et que le jeton du porteur possède les étendues acceptées configurées. Si le jeton du porteur n’a pas l’une de ces étendues acceptées, l’API web renvoie le code d’état HTTP 403 (Interdit) et écrit dans le corps de la réponse un message indiquant les étendues attendues dans le jeton.

Pour configurer les étendues acceptées, ouvrez la classe Controller/TodoListController.cs et définissez le nom de l’étendue, sans l’URI complet.

[RequiredScope("tasks.read")]

Étape 4.2 : Exécuter l’exemple d’application API web

Pour permettre à l’application web d’appeler l’exemple d’API web, exécutez l’API web en procédant comme suit :

1. Si vous y êtes invité, restaurez les dépendances.
2. Générez et exécutez le projet.
3. Une fois le projet généré, Visual Studio ou Visual Studio Code lance l’API web dans les navigateurs avec l’adresse suivante : https://localhost:44332.

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

Dans le dossier d’exemple, sous le dossier 4-WebApp-your-API/4-2-B2C/Client, ouvrez le projet TodoListClient.csproj avec Visual Studio ou Visual Studio Code.

Dans le dossier racine du projet, ouvrez le fichier appsettings.json. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C. L’application web utilise ces informations pour établir une relation de confiance avec Azure AD B2C, connecter et déconnecter les utilisateurs et acquérir des jetons et les valider. Mettez à jour les propriétés suivantes des paramètres de l’application :

Votre fichier config final doit ressembler au JSON suivant :

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

Étape 6 : Exécuter l’exemple d’application web

1. Générez et exécutez le projet.
2. Accédez à https://localhost:5000.
3. Terminez le processus d’inscription ou de connexion.

Une fois l’authentification réussie, votre nom d’affichage s’affiche dans la barre de navigation. Pour afficher les revendications que le jeton d’Azure AD B2C renvoie à votre application, sélectionnez TodoList.

Déployer votre application

Dans une application de production, l’URI de redirection de l’inscription de l’application est généralement un point de terminaison accessible publiquement dans lequel votre application s’exécute, comme https://contoso.com/signin-oidc.

Vous pouvez ajouter des URI de redirection à vos applications inscrites à tout moment et les modifier. Les restrictions suivantes s’appliquent aux URI de redirection :

• L’URL de réponse doit commencer par le schéma https.
• L’URL de réponse respecte la casse. Sa casse doit correspondre à celle du chemin d’URL de votre application en cours d’exécution.

Cache de jeton d’une application web

L’exemple d’application web utilise la sérialisation du cache de jeton en mémoire. Cette implémentation est idéale pour les tests. Elle est également adaptée aux applications de production, mais sachez que le cache de jeton est perdu lorsque l’application web est redémarrée.

Pour un environnement de production, nous vous recommandons d’utiliser un cache en mémoire distribuée. Par exemple, le cache Redis, NCache ou un cache SQL Server. Pour plus d’informations sur les implémentations du cache en mémoire distribuée, consultez Sérialisation du cache de jeton.

Étapes suivantes

• En savoir plus sur l’exemple de code.
• Découvrir comment Activer l’authentification dans votre propre application web à l’aide d’Azure AD B2C.
• Découvrir comment Activer l’authentification dans votre propre API web.