Tutoriel : Authentifier et autoriser des utilisateurs de bout en bout dans Azure App Service

L’authentification dans cette procédure est fournie au niveau de la couche de plateforme d’hébergement par Azure App Service. Vous devez déployer l’application frontale et back-end et configurer l’authentification pour que cette application web soit utilisée avec succès.

Une fois ce scénario terminé, passez au tutoriel suivant pour découvrir comment vous connecter aux services Azure en tant qu’utilisateur authentifié. Les scénarios courants incluent un accès au Stockage Azure ou à une base de données en tant qu’utilisateur disposant de capacités spécifiques ou d’un accès à des tables ou des fichiers spécifiques.

Dans ce tutoriel, vous allez :

Prérequis

Si vous ne disposez pas d’un compte Azure, créez-en un gratuitement avant de commencer.

• Node.js (LTS)

• Utilisez l’environnement Bash dans Azure Cloud Shell. Pour obtenir plus d’informations, consultez Démarrage d’Azure Cloud Shell.

  

• Si vous préférez exécuter les commandes de référence de l’interface de ligne de commande localement, installez l’interface Azure CLI. Si vous exécutez sur Windows ou macOS, envisagez d’exécuter Azure CLI dans un conteneur Docker. Pour plus d’informations, consultez Guide pratique pour exécuter Azure CLI dans un conteneur Docker.

  • Si vous utilisez une installation locale, connectez-vous à Azure CLI à l’aide de la commande az login. Pour finir le processus d’authentification, suivez les étapes affichées dans votre terminal. Pour obtenir d’autres options de connexion, consultez S’authentifier auprès d’Azure à l’aide d’Azure CLI.

  • Quand vous y êtes invité, installez l’extension Azure CLI à la première utilisation. Pour plus d’informations sur les extensions, consultez Utiliser et gérer des extensions avec Azure CLI.

  • Exécutez az version pour rechercher la version et les bibliothèques dépendantes installées. Pour effectuer une mise à niveau vers la dernière version, exécutez az upgrade.

Obtenir le profil utilisateur

L’application frontale est configurée pour utiliser en toute sécurité l’API back-end. L’application frontale fournit une connexion Microsoft pour l’utilisateur, puis permet à l’utilisateur d’obtenir son faux profil à partir du serveur principal. Ce tutoriel utilise un faux profil pour simplifier les étapes permettant de suivre le scénario.

Avant que votre code source ne s’exécute sur le front-end, App Service injecte l’accessToken authentifié partir de l’en-tête x-ms-token-aad-access-token App Service. Le code source frontal accède ensuite au serveur de back-end et envoie le accessToken à ce serveur. Le serveur frontal envoie le jeton en tant que bearerToken pour accéder en toute sécurité à l'API back-end. Le serveur back-end valide le bearerToken avant de le passer à votre code source back-end. Une fois que votre code source back-end reçoit le bearerToken, il peut être utilisé.

Dans le prochain tutoriel de cette série, bearerToken est remplacé par un jeton ayant une portée pour accéder à l’API Microsoft Graph. L’API Microsoft Graph retourne les informations de profil de l’utilisateur.

Clonage de l’exemple d’application

Dans Azure Cloud Shell, exécutez la commande suivante pour cloner l’exemple de référentiel :

git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app

Créer et déployer des applications

Créez le groupe de ressources, le plan d’application web et l’application web, puis déployez-le en une seule étape.

Configurer le paramètre d’application

L’application frontale doit connaître l’URL de l’application principale pour les demandes d’API. Utilisez la commande Azure CLI suivante pour configurer le paramètre d’application. L’URL doit être https://<back-end-app-name>.azurewebsites.net.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

Le serveur frontal appelle le serveur principal

Accédez à l’application côté client et renvoyez le faux profil à partir du côté serveur. Cette action vérifie que le serveur frontal demande correctement le profil à partir du serveur principal et que le serveur principal retourne le profil.

1. Ouvrez l’application web frontale dans un navigateur : https://<front-end-app-name>.azurewebsites.net.

   

2. Sélectionnez le lien Obtenir le profil de l’utilisateur .

3. Affichez le faux profil retourné par l’application web principale.

   

   La valeur withAuthentication de false indique que l’authentification n’est pas encore configurée.

Configurer l’authentification

Dans cette section, activez l’authentification et l’autorisation pour les deux applications web. Ce tutoriel utilise Microsoft Entra ID comme fournisseur d’identité.

Vous configurez également l’application frontale pour :

• Accorder à l’application frontale l’accès à l’application principale
• Configurer App Service pour renvoyer un jeton utilisable
• Utiliser le jeton dans votre code

Pour plus d’informations, consultez Configurer l’authentification Microsoft Entra pour votre application App Services.

Activer l’authentification et l’autorisation pour l’application principale

1. Dans le portail Azure, recherchez et sélectionnez Groupes de ressources.

2. Dans Groupes de ressources, recherchez et sélectionnez votre groupe de ressources. Dans Vue d’ensemble, sélectionnez votre application back-end.

3. Dans le menu de gauche de votre application principale, sélectionnezAuthentification>, puis ajoutez un fournisseur d’identité.

4. Dans la page Ajouter un fournisseur d’identité , pour le fournisseur d’identité, sélectionnez Microsoft pour vous connecter à l’aide des identités Microsoft et Microsoft Entra.

5. Sélectionnez une valeur pour l’expiration du secret client.

   

6. Pour les autres valeurs, acceptez les paramètres par défaut et sélectionnez Ajouter.

7. La page Authentification s’ouvre. Copiez l’ID client de l’application Microsoft Entra dans le Bloc-notes. Vous aurez besoin de cette valeur ultérieurement.

   

Si vous vous arrêtez ici, vous disposez d'une application autonome que l'authentification et l'autorisation App Service sécurisent. Les sections restantes vous montrent comment sécuriser une solution d’application multiple en déplaçant l’utilisateur authentifié du serveur frontal vers le serveur principal.

Activer l’authentification et l’autorisation pour l’application frontale

1. Dans le portail Azure, recherchez et sélectionnez Groupes de ressources.

2. Dans Groupes de ressources, recherchez et sélectionnez votre groupe de ressources. Dans Vue d’ensemble, sélectionnez votre application frontale.

3. Dans le menu de gauche de votre application frontale, sélectionnez Paramètres>, puis sélectionnez Ajouter un fournisseur d’identité.

4. Dans la page Ajouter un fournisseur d’identité , pour le fournisseur d’identité, sélectionnez Microsoft pour vous connecter à l’aide des identités Microsoft et Microsoft Entra.

5. Sélectionnez une valeur pour l’expiration du secret client. Pour les autres valeurs, acceptez les paramètres par défaut et sélectionnez Ajouter.

6. La page Authentification s’ouvre. Copiez l’ID client de l’application Microsoft Entra dans le Bloc-notes. Vous aurez besoin de cette valeur ultérieurement.

Accorder l’accès de l’application front-end à l’application de back-end

Vous avez activé l’authentification et l’autorisation pour les deux applications. Pour procéder à l’authentification, vous devez faire trois choses :

• Exposer l’application back-end en tant qu’API en définissant une étendue
• Accorder à l’application front-end l’accès à l’application back-end
• Configurer App Service pour renvoyer un jeton utilisable
• Utiliser le jeton dans votre code

Dans cette section, vous accordez à l’application frontale l’accès à l’application principale au nom de l’utilisateur. Techniquement, vous accordez à l’application AD du serveur frontal les autorisations nécessaires pour accéder à l’application AD du serveur principal au nom de l’utilisateur.

1. Dans la page Authentification de l’application frontale, sous Fournisseur d’identité, sélectionnez le nom de votre application frontale. L’inscription de cette application a été automatiquement générée pour vous.

2. Sélectionnez Gérer les>autorisations d’API dans le menu de gauche.

3. Sélectionnez Ajouter une autorisation, puis Mes API><back-end-app-name>.

4. Dans la page Demander des autorisations d’API pour l’application principale, sélectionnez Autorisations déléguées et user_impersonation, puis sélectionnez Ajouter des autorisations.

   

Configurer App Service pour renvoyer un jeton d’accès utilisable

L’application frontale dispose désormais des autorisations requises pour accéder à l’application principale en tant qu’utilisateur connecté. Dans cette section, configurez l’authentification et l’autorisation App Service pour vous donner un jeton d’accès utilisable pour accéder au serveur principal. Pour cette étape, vous avez besoin de l'ID client du backend, que vous avez copié à partir de Activer l'authentification et l'autorisation pour l'application backend.

Dans Cloud Shell, exécutez les commandes suivantes sur l’application frontale pour ajouter le scope paramètre au paramètre identityProviders.azureActiveDirectory.login.loginParametersd’authentification. Remplacez <front-end-app-name> et <back-end-client-id>.

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Les commandes ajoutent une propriété loginParameters avec d’autres étendues personnalisées. Voici une explication des étendues demandées :

• openid est déjà demandé par App Service par défaut. Pour plus d’informations, consultez Étendues OpenID Connect.
• offline_access est inclus ici pour des raisons pratiques, au cas où vous souhaitez actualiser les jetons.
• api://<back-end-client-id>/user_impersonation est une API exposée dans l’inscription de votre application back-end. Il s’agit de l’étendue qui vous donne un jeton JWT comprenant l’application back-end en tant qu’audience de jeton.

Vos applications sont désormais configurées. Le serveur frontal est maintenant prêt à accéder au serveur principal avec un jeton d’accès approprié.

Pour plus d’informations sur la configuration du jeton d’accès pour d’autres fournisseurs, consultez Actualiser les jetons de fournisseur d’identité.

Configurer le serveur principal App Service pour qu’il accepte un jeton uniquement à partir de l’App Service frontal

Vous devez également configurer le Service d'application back-end pour qu'il accepte uniquement un jeton en provenance du Service d'application frontal. Si vous ne configurez pas cette étape, une erreur 403 : Interdit survient lorsque vous transmettez le jeton du front end au back end.

Vous pouvez implémenter cette approche à l’aide du même processus Azure CLI que celui que vous avez utilisé à l’étape précédente.

1. Obtenez l’appId de l’instance App Service front-end. Vous pouvez obtenir cette valeur sur la page Authentification du service d'application frontal.

2. Exécutez l’interface Azure CLI suivante, en remplaçant le <back-end-app-name> et <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

Le front-end appelle le back-end authentifié

L’application front-end doit passer l’authentification de l’utilisateur avec l’étendue user_impersonation appropriée au back-end. Les étapes suivantes passent en revue le code fourni dans l’exemple pour cette fonctionnalité.

Affichez le code source de l’application frontale :

1. Utilisez l’en-tête x-ms-token-aad-access-token injecté du service App front-end pour récupérer automatiquement l'accessToken de l’utilisateur.

   // ./src/server.js
   const accessToken = req.headers['x-ms-token-aad-access-token'];
   

2. Utilisez l’accessToken dans l’en-tête Authentication comme valeur bearerToken.

   // ./src/remoteProfile.js
   // Get profile from backend
   const response = await fetch(remoteUrl, {
       cache: "no-store", // no caching -- for demo purposes only
       method: 'GET',
       headers: {
           'Authorization': `Bearer ${accessToken}`
       }
   });
   if (response.ok) {
       const { profile } = await response.json();
       console.log(`profile: ${profile}`);
   } else {
       // error handling
   }
   

   Ce tutoriel retourne un faux profil pour simplifier le scénario. Le tutoriel suivant de cette série montre comment remplacer le back-end bearerToken par un nouveau jeton requis pour un service Azure en aval, tel que Microsoft Graph.

Le serveur principal retourne le profil au serveur frontal

Si la requête du serveur frontal n’est pas autorisée, l’App Service back-end rejette la requête avec un code d’erreur HTTP 401 avant que la requête atteigne le code de votre application. Lorsque le code back-end est atteint, car il inclut un jeton autorisé, extrayez-le bearerToken pour obtenir le accessToken.

Affichez le code source de l’application principale :

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

Accéder aux applications

1. Utilisez le site web frontal dans un navigateur. L’URL est https://<front-end-app-name>.azurewebsites.net/.

2. Le navigateur demande votre authentification auprès de l’application web. Procédez à l’authentification.

   

3. Une fois l’authentification terminée, l’application frontale retourne la page d’accueil de l’application.

   

4. Sélectionnez Obtenir le profil de l’utilisateur. Cette action passe votre authentification dans le jeton du porteur au back-end.

5. Le back-end répond avec le faux nom de profil codé en dur : John Doe.

   

   La withAuthentication valeur true indique que l’authentification est configurée maintenant.

Nettoyer les ressources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources.

1. Supprimez le groupe de ressources en exécutant la commande suivante dans Cloud Shell. L’exécution de cette commande peut prendre une minute.

   az group delete --name myAuthResourceGroup
   

2. Utilisez l’ID client des applications d’authentification, que vous avez précédemment trouvé et noté dans les sections Enable authentication and authorization des applications back-end et front-end.

3. Supprimez les inscriptions d’applications pour les applications front-end et back-end.

   # delete app - do this for both frontend and backend client ids
   az ad app delete --id <client-id>
   

Forum aux questions

Comment tester cette authentification sur mon ordinateur de développement local ?

L’authentification dans cette procédure est fournie au niveau de la couche de plateforme d’hébergement par Azure App Service. Il n’existe pas d’émulateur équivalent. Vous devez déployer l’application frontend et backend et configurer l’authentification pour chacune d’elles pour l’utiliser.

L’application n’affiche pas de profil faux, comment puis-je le déboguer ?

Les applications front-end et back-end ont toutes des itinéraires /debug pour permettre de déboguer l’authentification lorsque l’application en question ne retourne pas le faux profil. L’itinéraire de débogage front-end fournit les éléments critiques à valider :

• Variables d’environnement :

  • La BACKEND_URL est configurée correctement en tant que https://<back-end-app-name>.azurewebsites.net. N’incluez pas la barre oblique de fin ou l’itinéraire.

• En-têtes HTTP :

  • Les en-têtes x-ms-token-* sont injectés.

• Le nom du profil Microsoft Graph pour l’utilisateur connecté s’affiche.

• L’étendue de l’application front-end pour le jeton a user_impersonation. Si votre étendue n’inclut pas cette valeur, il peut s’agir d’un problème de minutage. Vérifiez les paramètres login de votre application front-end dans les ressources Azure. Patientez quelques minutes pendant la réplication de l’authentification.

Le code source de l’application s’est-il correctement déployé sur chaque application web ?

1. Dans le portail Azure pour l’application web, sélectionnez Outils de développement>Outils avancés, puis sélectionnez Go. Cette action ouvre un nouvel onglet ou une nouvelle fenêtre de navigateur.

2. Dans le nouvel onglet du navigateur, sélectionnez Parcourir le site d’annuaire>wwwroot.

3. Vérifiez que les éléments suivants se trouvent dans le répertoire :

   • package.json
   • node_modules.tar.gz
   • /src/index.js

4. Vérifiez que la propriété package.jsonname est identique au nom web, soit frontendbackend.

5. Si vous avez modifié le code source et que vous devez redéployer, utilisez la commande az webapp up à partir du répertoire contenant le fichier package.json pour cette application.

L’application a-t-elle démarré correctement ?

Les deux applications web doivent retourner quelque chose lorsque la page d’accueil est demandée. Si vous ne pouvez pas accéder à /debug dans une application web, l’application n’a pas démarré correctement. Passez en revue les journaux d’erreurs de cette application web.

1. Dans le portail Azure pour l’application web, sélectionnez Outils de développement>Outils avancés, puis sélectionnez Go. Cette action ouvre un nouvel onglet ou une nouvelle fenêtre de navigateur.
2. Dans le nouvel onglet du navigateur, sélectionnez Parcourir le répertoire>Journaux de déploiement.
3. Passez en revue chaque journal pour rechercher les problèmes signalés.

L’application frontale est-elle en mesure de communiquer avec l’application back-end ?

Étant donné que l’application frontale appelle l’application principale à partir du code source du serveur, ce comportement n’est pas quelque chose que vous pouvez voir dans le trafic réseau du navigateur. Utilisez la liste suivante pour déterminer la réussite de la demande de profil back-end :

• L’application web back-end retourne des erreurs à l’application front-end si elle est atteinte. Si cela n’a pas été atteint, l'application front-end signale le code d'état et le message.

  • 401 : L’utilisateur n’a pas réussi l’authentification. Ce message peut indiquer que l’étendue n’est pas correctement définie.
  • 404 : L’URL du serveur ne correspond pas à un itinéraire dont dispose le serveur

• Utilisez les journaux de streaming de l’application back-end à surveiller pendant que vous effectuez la demande front-end pour le profil de l’utilisateur. Il existe des informations de débogage dans le code source avec console.log, ce qui permet de déterminer où l’échec s’est produit.

Que se passe-t-il lorsque le jeton frontal expire ?

Votre jeton d’accès expire après un certain laps de temps. Pour plus d’informations sur la façon d’actualiser vos jetons d’accès sans obliger les utilisateurs à se réauthentifier auprès de votre application, consultez Actualiser les jetons de fournisseur d’identité.

Si j’ai une application basée sur un navigateur sur l’application front-end, peut-elle communiquer directement avec le serveur principal ?

Cette approche nécessite que le code du serveur passe le jeton d’accès au code JavaScript exécuté dans le navigateur client. Étant donné qu’il n’existe aucun moyen de protéger le jeton d’accès dans le navigateur, nous vous déconseillons cette approche. Actuellement, nous vous recommandons le modèle Backend-for-Frontend.

Si cela est appliqué à l'exemple de ce tutoriel, le code du navigateur sur l'application front-end effectuerait des appels d'API dans une session authentifiée vers son code serveur comme intermédiaire. Le code serveur de l’application frontale effectue ensuite les appels d’API à l’application back-end en utilisant la valeur d’en-tête x-ms-token-aad-access-token comme jeton d’authentification. Tous les appels de votre code de navigateur au code serveur sont protégés par la session authentifiée.

Étape suivante

Passez au tutoriel suivant pour apprendre à utiliser l’identité de cet utilisateur et accéder à un service Azure.