Tutoriel : Authentifier et autoriser des utilisateurs de bout en bout dans Azure App ServiceTutorial: Authenticate and authorize users end-to-end in Azure App Service

Azure App Service offre un service d’hébergement web hautement évolutif appliquant des mises à jour correctives automatiques.Azure App Service provides a highly scalable, self-patching web hosting service. En outre, App Service prend, de base, en charge l’authentification et l’autorisation des utilisateurs.In addition, App Service has built-in support for user authentication and authorization. Ce tutoriel montre comment sécuriser vos applications avec l’authentification et l’autorisation App Service.This tutorial shows how to secure your apps with App Service authentication and authorization. Il utilise comme exemple une application ASP.NET Core avec un front-end Angular.js.It uses a ASP.NET Core app with an Angular.js front end as an example. L’authentification et l’autorisation App Service prennent en charge tous les runtimes de langage, et vous pouvez apprendre comment les appliquer à votre langage préféré en suivant le tutoriel.App Service authentication and authorization support all language runtimes, and you can learn how to apply it to your preferred language by following the tutorial.

Azure App Service fournit un service d’hébergement web hautement évolutif appliquant des mises à jour correctives automatiques à l’aide du système d’exploitation Linux.Azure App Service provides a highly scalable, self-patching web hosting service using the Linux operating system. En outre, App Service prend, de base, en charge l’authentification et l’autorisation des utilisateurs.In addition, App Service has built-in support for user authentication and authorization. Ce tutoriel montre comment sécuriser vos applications avec l’authentification et l’autorisation App Service.This tutorial shows how to secure your apps with App Service authentication and authorization. Il utilise comme exemple une application ASP.NET Core avec un front-end Angular.js.It uses an ASP.NET Core app with an Angular.js front end as an example. L’authentification et l’autorisation App Service prennent en charge tous les runtimes de langage, et vous pouvez apprendre comment les appliquer à votre langage préféré en suivant le tutoriel.App Service authentication and authorization support all language runtimes, and you can learn how to apply it to your preferred language by following the tutorial.

Authentification et autorisation simples

Il vous montre également comment sécuriser une application multiniveau, en accédant à une API de serveur principal sécurisée pour le compte de l’utilisateur authentifié, à partir du code du serveur et à partir du code du navigateur.It also shows you how to secure a multi-tiered app, by accessing a secured back-end API on behalf of the authenticated user, both from server code and from browser code.

Authentification et autorisation avancées

Il s’agit uniquement de quelques scénarios d’authentification et d’autorisation possibles dans App Service.These are only some of the possible authentication and authorization scenarios in App Service.

Voici une liste plus complète de ce que vous allez apprendre dans ce tutoriel :Here's a more comprehensive list of things you learn in the tutorial:

  • Activer l’authentification et l’autorisation intégréesEnable built-in authentication and authorization
  • Sécuriser des applications contre des requêtes non authentifiéesSecure apps against unauthenticated requests
  • Utiliser Azure Active Directory en tant que fournisseur d’identitéUse Azure Active Directory as the identity provider
  • Accéder à une application à distance pour le compte de l’utilisateur connectéAccess a remote app on behalf of the signed-in user
  • Sécuriser des appels entre des services avec un jeton d’authentificationSecure service-to-service calls with token authentication
  • Utiliser des jetons d’accès à partir du code du serveurUse access tokens from server code
  • Utiliser des jetons d’accès à partir du code du client (navigateur)Use access tokens from client (browser) code

Vous pouvez suivre les étapes de ce tutoriel sur macOS, Linux, Windows.You can follow the steps in this tutorial on macOS, Linux, Windows.

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.If you don't have an Azure subscription, create a free account before you begin.

PrérequisPrerequisites

Pour suivre ce tutoriel :To complete this tutorial:

  • Installez GitInstall Git
  • Installez la dernière version du kit SDK .NET Core 3.1 - Utilisez l’environnement Bash dans Azure Cloud Shell.Use the Bash environment in Azure Cloud Shell.Lancer Cloud Shell dans une nouvelle fenêtreLaunch Cloud Shell in a new window - Si vous préférez, installez l’interface Azure CLI pour exécuter les commandes de référence de l’interface de ligne de commande.If you prefer, install the Azure CLI to run CLI reference commands.- Si vous utilisez une installation locale, connectez-vous à Azure CLI à l’aide de la commande az login.If you're using a local installation, sign in to the Azure CLI by using the az login command. Pour finir le processus d’authentification, suivez les étapes affichées dans votre terminal.To finish the authentication process, follow the steps displayed in your terminal. Pour connaître les autres options de connexion, consultez Se connecter avec Azure CLI.For additional sign-in options, see Sign in with the Azure CLI.- Lorsque vous y êtes invité, installez les extensions Azure CLI lors de la première utilisation.When you're prompted, install Azure CLI extensions on first use. Pour plus d’informations sur les extensions, consultez Utiliser des extensions avec Azure CLI.For more information about extensions, see Use extensions with the Azure CLI. - Exécutez az version pour rechercher la version et les bibliothèques dépendantes installées.Run az version to find the version and dependent libraries that are installed. Pour effectuer une mise à niveau vers la dernière version, exécutez az upgrade.To upgrade to the latest version, run az upgrade.Install the latest .NET Core 3.1 SDK - Utilisez l’environnement Bash dans Azure Cloud Shell.Use the Bash environment in Azure Cloud Shell.Lancer Cloud Shell dans une nouvelle fenêtreLaunch Cloud Shell in a new window - Si vous préférez, installez l’interface Azure CLI pour exécuter les commandes de référence de l’interface de ligne de commande.If you prefer, install the Azure CLI to run CLI reference commands.- Si vous utilisez une installation locale, connectez-vous à Azure CLI à l’aide de la commande az login.If you're using a local installation, sign in to the Azure CLI by using the az login command. Pour finir le processus d’authentification, suivez les étapes affichées dans votre terminal.To finish the authentication process, follow the steps displayed in your terminal. Pour connaître les autres options de connexion, consultez Se connecter avec Azure CLI.For additional sign-in options, see Sign in with the Azure CLI.- Lorsque vous y êtes invité, installez les extensions Azure CLI lors de la première utilisation.When you're prompted, install Azure CLI extensions on first use. Pour plus d’informations sur les extensions, consultez Utiliser des extensions avec Azure CLI.For more information about extensions, see Use extensions with the Azure CLI. - Exécutez az version pour rechercher la version et les bibliothèques dépendantes installées.Run az version to find the version and dependent libraries that are installed. Pour effectuer une mise à niveau vers la dernière version, exécutez az upgrade.To upgrade to the latest version, run az upgrade.

Création de l’application .NET Core localeCreate local .NET Core app

Cette étape consiste à configurer le projet .NET Core local.In this step, you set up the local .NET Core project. Vous utilisez le même projet pour déployer une application API principale et une application web frontale.You use the same project to deploy a back-end API app and a front-end web app.

Cloner et exécuter l’exemple d’applicationClone and run the sample application

Exécutez les commandes suivantes pour cloner l’exemple de référentiel et l’exécuter.Run the following commands to clone the sample repository and run it.

git clone https://github.com/Azure-Samples/dotnet-core-api
cd dotnet-core-api
dotnet run

Accédez à http://localhost:5000 et essayez d’ajouter, de modifier et de supprimer des éléments de liste de tâches.Navigate to http://localhost:5000 and try adding, editing, and removing todo items.

API ASP.NET Core exécuté en local

Pour arrêter ASP.NET Core à tout moment, appuyez sur Ctrl+C dans le terminal.To stop ASP.NET Core at any time, press Ctrl+C in the terminal.

Déployer des applications dans AzureDeploy apps to Azure

Dans cette étape, vous déployez le projet dans deux applications App Service.In this step, you deploy the project to two App Service apps. La première est l’application frontale, et la deuxième est l’application principale.One is the front-end app and the other is the back-end app.

Configuration d’un utilisateur de déploiementConfigure a deployment user

Vous pouvez déployer le protocole FTP et Git local sur une application web Azure en faisant appel à un utilisateur de déploiement.FTP and local Git can deploy to an Azure web app by using a deployment user. Une fois que vous avez créé votre utilisateur de déploiement, vous pouvez l’utiliser pour tous vos déploiements Azure.Once you configure your deployment user, you can use it for all your Azure deployments. Votre nom d’utilisateur et votre mot de passe de déploiement au niveau du compte sont différents de vos informations d’identification de l’abonnement Azure.Your account-level deployment username and password are different from your Azure subscription credentials.

Pour configurer l’utilisateur de déploiement, exécutez la commande az webapp deployment user set dans Azure Cloud Shell.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Remplacez <username> et <password> par un nom d’utilisateur et un mot de passe de déploiement.Replace <username> and <password> with a deployment user username and password.

  • Le nom d’utilisateur doit être unique dans Azure et, pour les push Git locaux, ne doit pas contenir le symbole « @ ».The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Le mot de passe doit comporter au moins huit caractères et inclure deux des trois éléments suivants : lettres, chiffres et symboles.The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.
az webapp deployment user set --user-name <username> --password <password>

La sortie JSON affiche le mot de passe comme étant null.The JSON output shows the password as null. Si vous obtenez une erreur 'Conflict'. Details: 409, modifiez le nom d’utilisateur.If you get a 'Conflict'. Details: 409 error, change the username. Si vous obtenez une erreur 'Bad Request'. Details: 400, utilisez un mot de passe plus fort.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Enregistrez le nom d’utilisateur et le mot de passe à utiliser pour déployer vos applications web.Record your username and password to use to deploy your web apps.

Créer des ressources AzureCreate Azure resources

Dans Cloud Shell, exécutez les commandes suivantes pour créer deux applications web Windows.In the Cloud Shell, run the following commands to create two Windows web apps. Remplacez <front-end-app-name> et <back-end-app-name> par deux noms d’applications globaux uniques (les caractères valides sont a-z, 0-9 et -).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). Pour plus d’informations sur chaque commande, consultez Héberger une API RESTful avec CORS dans Azure App Service.For more information on each command, see RESTful API with CORS in Azure App Service.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --deployment-local-git --query deploymentLocalGitUrl

Dans Cloud Shell, exécutez les commandes suivantes pour créer deux applications web.In the Cloud Shell, run the following commands to create two web apps. Remplacez <front-end-app-name> et <back-end-app-name> par deux noms d’applications globaux uniques (les caractères valides sont a-z, 0-9 et -).Replace <front-end-app-name> and <back-end-app-name> with two globally unique app names (valid characters are a-z, 0-9, and -). Pour plus d’informations sur chaque commande, consultez Créer une application .NET Core dans Azure App Service.For more information on each command, see Create a .NET Core app in Azure App Service.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE --is-linux
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl

Notes

Enregistrez les URL des référentiels Git distants pour votre application frontale et votre application principale, qui sont affichées dans la sortie de az webapp create.Save the URLs of the Git remotes for your front-end app and back-end app, which are shown in the output from az webapp create.

Effectuer une transmission de type push vers Azure à partir de GitPush to Azure from Git

Dans la fenêtre de terminal local, exécutez les commandes Git suivantes pour effectuer le déploiement vers l’application principale.Back in the local terminal window, run the following Git commands to deploy to the back-end app. Remplacez <deploymentLocalGitUrl-of-back-end-app> par l’URL du dépôt Git distant que vous avez enregistrée à la section Créer des ressources Azure.Replace <deploymentLocalGitUrl-of-back-end-app> with the URL of the Git remote that you saved from Create Azure resources. Lorsque vous êtes invité à saisir les informations d’identification par Git Credential Manager, assurez-vous d’entrer vos informations d’identification de déploiement, et non celles que vous utilisez pour vous connecter au portail Azure.When prompted for credentials by Git Credential Manager, make sure that you enter your deployment credentials, not the credentials you use to sign in to the Azure portal.

git remote add backend <deploymentLocalGitUrl-of-back-end-app>
git push backend master

Dans la fenêtre de terminal local, exécutez les commandes Git suivantes pour déployer le même code vers l’application frontale.In the local terminal window, run the following Git commands to deploy the same code to the front-end app. Remplacez <deploymentLocalGitUrl-of-front-end-app> par l’URL du dépôt Git distant que vous avez enregistrée à la section Créer des ressources Azure.Replace <deploymentLocalGitUrl-of-front-end-app> with the URL of the Git remote that you saved from Create Azure resources.

git remote add frontend <deploymentLocalGitUrl-of-front-end-app>
git push frontend master

Accéder aux applicationsBrowse to the apps

Accédez aux URL suivantes dans un navigateur et observez les deux applications en action.Navigate to the following URLs in a browser and see the two apps working.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

Capture d’écran d’un exemple d’API REST Azure App Service dans une fenêtre de navigateur, qui présente une application de liste de tâches.

Notes

En cas de redémarrage de votre application, vous avez peut-être remarqué que de nouvelles données ont été effacées.If your app restarts, you may have noticed that new data has been erased. Ce comportement par défaut se déclenche en raison de l’utilisation d’une base de données en mémoire par l’application ASP.NET Core.This behavior by design because the sample ASP.NET Core app uses an in-memory database.

Appeler une API principale du serveur frontalCall back-end API from front end

Dans cette étape, vous pointez le code du serveur de l’application frontale pour accéder à l’API principale.In this step, you point the front-end app's server code to access the back-end API. Vous activerez ultérieurement l’accès authentifié à partir du serveur frontal vers le serveur principal.Later, you enable authenticated access from the front end to the back end.

Modifier le code du serveur frontalModify front-end code

Dans le référentiel local, ouvrez Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs. Au début de la classe TodoController, ajoutez les lignes suivantes et remplacez <back-end-app-name> par le nom de votre application back-end :At the beginning of the TodoController class, add the following lines and replace <back-end-app-name> with the name of your back-end app:

private static readonly HttpClient _client = new HttpClient();
private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";

Recherchez la méthode dotée de [HttpGet] et remplacez le code à l’intérieur des accolades par :Find the method that's decorated with [HttpGet] and replace the code inside the curly braces with:

var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
return JsonConvert.DeserializeObject<List<TodoItem>>(data);

La première ligne effectue un appel GET /api/Todo à l’application d’API principale.The first line makes a GET /api/Todo call to the back-end API app.

Ensuite, recherchez la méthode dotée de [HttpGet("{id}")] et remplacez le code à l’intérieur des accolades par :Next, find the method that's decorated with [HttpGet("{id}")] and replace the code inside the curly braces with:

var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
return Content(data, "application/json");

La première ligne effectue un appel GET /api/Todo/{id} à l’application d’API principale.The first line makes a GET /api/Todo/{id} call to the back-end API app.

Ensuite, recherchez la méthode dotée de [HttpPost] et remplacez le code à l’intérieur des accolades par :Next, find the method that's decorated with [HttpPost] and replace the code inside the curly braces with:

var response = await _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", todoItem);
var data = await response.Content.ReadAsStringAsync();
return Content(data, "application/json");

La première ligne effectue un appel POST /api/Todo à l’application d’API principale.The first line makes a POST /api/Todo call to the back-end API app.

Ensuite, recherchez la méthode dotée de [HttpPut("{id}")] et remplacez le code à l’intérieur des accolades par :Next, find the method that's decorated with [HttpPut("{id}")] and replace the code inside the curly braces with:

var res = await _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", todoItem);
return new NoContentResult();

La première ligne effectue un appel PUT /api/Todo/{id} à l’application d’API principale.The first line makes a PUT /api/Todo/{id} call to the back-end API app.

Ensuite, recherchez la méthode dotée de [HttpDelete("{id}")] et remplacez le code à l’intérieur des accolades par :Next, find the method that's decorated with [HttpDelete("{id}")] and replace the code inside the curly braces with:

var res = await _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}");
return new NoContentResult();

La première ligne effectue un appel DELETE /api/Todo/{id} à l’application d’API principale.The first line makes a DELETE /api/Todo/{id} call to the back-end API app.

Enregistrez toutes vos modifications.Save all your changes. Dans la fenêtre de terminal local, déployez vos modifications à l’application frontale avec les commandes Git suivantes :In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "call back-end API"
git push frontend master

Vérifier vos modificationsCheck your changes

Accédez à http://<front-end-app-name>.azurewebsites.net et ajoutez quelques éléments, tels que from front end 1 et from front end 2.Navigate to http://<front-end-app-name>.azurewebsites.net and add a few items, such as from front end 1 and from front end 2.

Accédez à http://<back-end-app-name>.azurewebsites.net pour voir les éléments ajoutés à partir de l’application frontale.Navigate to http://<back-end-app-name>.azurewebsites.net to see the items added from the front-end app. Ajoutez également quelques éléments, tels que from back end 1 et from back end 2, puis actualisez l’application frontale pour voir si elle reflète les modifications.Also, add a few items, such as from back end 1 and from back end 2, then refresh the front-end app to see if it reflects the changes.

Capture d’écran d’un exemple d’API REST Azure App Service dans une fenêtre de navigateur, qui montre une application de liste de tâches avec des éléments ajoutés à partir de l’application front-end.

Configurer l’authentificationConfigure auth

Dans cette étape, vous activez l’authentification et l’autorisation pour les deux applications.In this step, you enable authentication and authorization for the two apps. Vous configurez également l’application frontale pour générer un jeton d’accès que vous pouvez utiliser pour effectuer des appels authentifiés à l’application principale.You also configure the front-end app to generate an access token that you can use to make authenticated calls to the back-end app.

Vous utilisez Azure Active Directory en tant que fournisseur d’identité.You use Azure Active Directory as the identity provider. Pour plus d’informations, consultez Configurer votre application App Service pour utiliser une connexion Azure Active Directory.For more information, see Configure Azure Active Directory authentication for your App Services application.

Activer l’authentification et l’autorisation pour l’application principaleEnable authentication and authorization for back-end app

Dans le menu du portail Azure, sélectionnez Groupes de ressources ou recherchez et sélectionnez Groupes de ressources dans n’importe quelle page.In the Azure portal menu, select Resource groups or search for and select Resource groups from any page.

Dans Groupes de ressources, recherchez et sélectionnez votre groupe de ressources.In Resource groups, find and select your resource group. Dans Vue d’ensemble, sélectionnez la page de gestion de votre application back-end.In Overview, select your back-end app's management page.

Capture d’écran de la fenêtre Groupes de ressources montrant la vue d’ensemble d’un exemple de groupe de ressources et la page de gestion de l’applications back-end sélectionnée.

Dans le menu gauche de votre application back-end, sélectionnez Authentification, puis cliquez sur Ajouter un fournisseur d’identité.In your back-end app's left menu, select Authentication, and then click Add identity provider.

Dans la page Ajouter un fournisseur d’identité, sélectionnez Microsoft en tant que fournisseur d’identité pour vous connecter aux identités Microsoft et Azure AD.In the Add an identity provider page, select Microsoft as the Identity provider to sign in Microsoft and Azure AD identities.

Pour Inscription d’application > Type d’inscription d’application, sélectionnez Créer une inscription d’application.For App registration > App registration type, select Create new app registration.

Pour Inscription d’application > Types de comptes pris en charge, sélectionnez Locataire actuel - Monolocataire.For App registration > Supported account types, select Current tenant-single tenant.

Dans la section Paramètres d’authentification App service, laissez Authentification sur Exiger une authentification et Requêtes non authentifiées sur HTTP 302 Redirection trouvée : recommandé pour les sites web.In the App Service authentication settings section, leave Authentication set to Require authentication and Unauthenticated requests set to HTTP 302 Found redirect: recommended for websites.

En bas de la page Ajouter un fournisseur d’identité, cliquez sur Ajouter pour activer l’authentification pour votre application web.At the bottom of the Add an identity provider page, click Add to enable authentication for your web app.

Capture d’écran du menu de gauche de l’application back-end montrant l’élément Authentification/Autorisation sélectionné et des paramètres sélectionnés dans le menu de droite.

La page Authentification s’ouvre.The Authentication page opens. Copiez l’ID de client de l’application Azure AD dans le Bloc-notes.Copy the Client ID of the Azure AD application to a notepad. Vous aurez besoin de cette valeur ultérieurement.You need this value later.

Capture d’écran de la fenêtre Paramètres Azure Active Directory montrant l’application Azure AD et la fenêtre Applications Azure AD montrant l’ID client à copier.

Si vous vous arrêtez ici, vous disposez d’une application autonome qui est déjà sécurisée par l’authentification et l’autorisation App Service.If you stop here, you have a self-contained app that's already secured by the App Service authentication and authorization. Les sections restantes vous montrent comment sécuriser une solution multi-application en « transmettant » l’utilisateur authentifié du front-end au back-end.The remaining sections show you how to secure a multi-app solution by "flowing" the authenticated user from the front end to the back end.

Activer l’authentification et l’autorisation pour l’application frontaleEnable authentication and authorization for front-end app

Suivez les mêmes étapes que pour l’application principale, mais ignorez la dernière étape.Follow the same steps for the front-end app, but skip the last step. Vous n’avez pas besoin de l’ID de client pour l’application front-end.You don't need the client ID for the front-end app.

Si vous le souhaitez, rendez-vous à l’adresse http://<front-end-app-name>.azurewebsites.net.If you like, navigate to http://<front-end-app-name>.azurewebsites.net. Vous êtes à présent redirigé vers une page de connexion sécurisée.It should now direct you to a secured sign-in page. Une fois que vous êtes connecté, vous ne pouvez toujours pas accéder aux données depuis l’application back-end parce que celle-ci nécessite désormais la connexion Azure Active Directory à partir de l’application front-end.After you sign in, you still can't access the data from the back-end app, because the back-end app now requires Azure Active Directory sign-in from the front-end app. Vous devez effectuer trois opérations :You need to do three things:

  • Accorder l’accès du serveur frontal au serveur principalGrant the front end access to the back end
  • Configurer App Service pour renvoyer un jeton utilisableConfigure App Service to return a usable token
  • Utiliser le jeton dans votre codeUse the token in your code

Conseil

Si vous rencontrez des erreurs et reconfigurez les paramètres d’authentification/d’autorisation de votre application, les jetons dans le magasin de jetons ne peuvent pas être régénérés à partir des nouveaux paramètres.If you run into errors and reconfigure your app's authentication/authorization settings, the tokens in the token store may not be regenerated from the new settings. Pour vous assurer que vos jetons sont régénérés, vous devez vous déconnecter et vous reconnecter à votre application.To make sure your tokens are regenerated, you need to sign out and sign back in to your app. Pour ce faire, vous pouvez simplement utiliser votre navigateur en mode privé, et fermer et ouvrir à nouveau le navigateur en mode privé après avoir modifié les paramètres dans vos applications.An easy way to do it is to use your browser in private mode, and close and reopen the browser in private mode after changing the settings in your apps.

Accorder l’accès d’une application frontale au serveur principalGrant front-end app access to back end

Maintenant que vous avez activé l’authentification et l’autorisation pour vos deux applications, chacune d’elles est soutenue par une application AD.Now that you've enabled authentication and authorization to both of your apps, each of them is backed by an AD application. Dans cette étape, vous donnez à l’application frontale les autorisations pour accéder au serveur principal pour le compte de l’utilisateur.In this step, you give the front-end app permissions to access the back end on the user's behalf. (Techniquement, vous donnez à l’application AD du serveur frontal les autorisations pour accéder à l’application AD du serveur principal pour le compte de l’utilisateur.)(Technically, you give the front end's AD application the permissions to access the back end's AD application on the user's behalf.)

Dans le menu du portail Azure, sélectionnez Azure Active Directory ou recherchez et sélectionnez Azure Active Directory dans n’importe quelle page.In the Azure portal menu, select Azure Active Directory or search for and select Azure Active Directory from any page.

Sélectionnez Inscriptions d’applications > Applications détenues > Afficher toutes les applications de cet annuaire.Select App registrations > Owned applications > View all applications in this directory. Sélectionnez le nom de votre application frontale, puis sélectionnez Autorisations de l’API.Select your front-end app name, then select API permissions.

Capture d’écran de la fenêtre Microsoft - Inscriptions d’applications avec Applications détenues, un nom d’application front-end et Autorisations d’API sélectionnés.

Sélectionnez Ajouter une autorisation, puis API utilisées par mon organisation > <back-end-app-name> .Select Add a permission, then select APIs my organization uses > <back-end-app-name>.

Dans la page Demander des autorisations d’API pour l’application back-end, sélectionnez Autorisations déléguées et user_impersonation, puis sélectionnez Ajouter des autorisations.In the Request API permissions page for the back-end app, select Delegated permissions and user_impersonation, then select Add permissions.

Capture d’écran de la page Demander des autorisations d’API montrant Autorisations déléguées, user_impersonation et le bouton Ajouter une autorisation sélectionnés.

Configurer App Service pour renvoyer un jeton d’accès utilisableConfigure App Service to return a usable access token

L’application front-end dispose maintenant des autorisations nécessaires pour accéder à l’application back-end en tant qu’utilisateur connecté.The front-end app now has the required permissions to access the back-end app as the signed-in user. Dans cette étape, vous configurez l’authentification et l’autorisation App Service pour obtenir un jeton d’accès utilisable pour accéder au serveur principal.In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. Pour cette étape, vous avez besoin de l’ID de client du back-end, que vous avez copié dans la section Activer l’authentification et l’autorisation pour l’application back-end.For this step, you need the back end's client ID, which you copied from Enable authentication and authorization for back-end app.

Accédez à Azure Resource Explorer et, à l’aide de l’arborescence de ressources, localisez votre application web front-end.Navigate to Azure Resource Explorer and using the resource tree, locate your front-end web app.

Azure Resource Explorer est désormais ouvert avec votre application front-end sélectionnée dans l’arborescence des ressources.The Azure Resource Explorer is now opened with your front-end app selected in the resource tree. En haut de la page, cliquez sur Lecture/écriture pour apporter des modifications à vos ressources Azure.At the top of the page, click Read/Write to enable editing of your Azure resources.

Capture d’écran des boutons Lecture seule et Lecture/écriture situés en haut de la page Azure Resource Explorer, avec le bouton Lecture/écriture sélectionné.

Dans le navigateur de gauche, descendez dans la hiérarchie jusqu’à conf > authsettings.In the left browser, drill down to config > authsettings.

Dans l’affichage authsettings, cliquez sur Modifier.In the authsettings view, click Edit. Définissez additionalLoginParams sur la chaîne JSON suivante, en utilisant l’ID de client que vous avez copié.Set additionalLoginParams to the following JSON string, using the client ID you copied.

"additionalLoginParams": ["response_type=code id_token","resource=<back-end-client-id>"],

Capture d’écran d’un exemple de code dans la vue authsettings montrant la chaîne additionalLoginParams avec un exemple d’ID client.

Enregistrez vos paramètres en cliquant sur PUT.Save your settings by clicking PUT.

Vos applications sont désormais configurées.Your apps are now configured. Le serveur frontal est maintenant prêt à accéder au serveur principal avec un jeton d’accès approprié.The front end is now ready to access the back end with a proper access token.

Pour plus d’informations sur la configuration du jeton d’accès pour d’autres fournisseurs, consultez Actualiser les jetons de fournisseur d’identité.For information on how to configure the access token for other providers, see Refresh identity provider tokens.

Appeler une API de façon sécurisée à partir du code du serveurCall API securely from server code

Dans cette étape, vous activez votre code du serveur modifié précédemment pour effectuer des appels authentifiés à l’API de serveur principal.In this step, you enable your previously modified server code to make authenticated calls to the back-end API.

Votre application front-end a désormais l’autorisation nécessaire et ajoute également l’ID de client du back-end aux paramètres de connexion.Your front-end app now has the required permission and also adds the back end's client ID to the login parameters. Par conséquent, elle peut obtenir un jeton d’accès pour l’authentification avec l’application principale.Therefore, it can obtain an access token for authentication with the back-end app. App Service fournit ce jeton dans votre code du serveur en injectant un en-tête X-MS-TOKEN-AAD-ACCESS-TOKEN à chaque requête authentifiée (consultez Retrieve tokens in app code (Récupérer des jetons dans le code d’application)).App Service supplies this token to your server code by injecting a X-MS-TOKEN-AAD-ACCESS-TOKEN header to each authenticated request (see Retrieve tokens in app code).

Notes

Ces en-têtes sont injectés pour tous les langages pris en charge.These headers are injected for all supported languages. Vous y accédez à l’aide du modèle standard pour chaque langage respectif.You access them using the standard pattern for each respective language.

Dans le référentiel local, ouvrez une nouvelle fois Controllers/TodoController.cs.In the local repository, open Controllers/TodoController.cs again. Dans le constructeur TodoController(TodoContext context), ajoutez le code suivant :Under the TodoController(TodoContext context) constructor, add the following code:

public override void OnActionExecuting(ActionExecutingContext context)
{
    base.OnActionExecuting(context);

    _client.DefaultRequestHeaders.Accept.Clear();
    _client.DefaultRequestHeaders.Authorization =
        new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
}

Ce code ajoute l’en-tête HTTP standard Authorization: Bearer <access-token> à tous les appels d’API à distance.This code adds the standard HTTP header Authorization: Bearer <access-token> to all remote API calls. Dans le pipeline d’exécution de la requête MVC ASP.NET Core, OnActionExecuting s’exécute juste avant l’action respective, afin que chacun de vos appels d’API sortants présente désormais le jeton d’accès.In the ASP.NET Core MVC request execution pipeline, OnActionExecuting executes just before the respective action does, so each of your outgoing API call now presents the access token.

Enregistrez toutes vos modifications.Save all your changes. Dans la fenêtre de terminal local, déployez vos modifications à l’application frontale avec les commandes Git suivantes :In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "add authorization header for server code"
git push frontend master

Connectez-vous à https://<front-end-app-name>.azurewebsites.net une nouvelle fois.Sign in to https://<front-end-app-name>.azurewebsites.net again. Sur la page de contrat d’utilisation des données utilisateur, cliquez sur Accepter.At the user data usage agreement page, click Accept.

Vous devez maintenant être en mesure de créer, lire, mettre à jour et supprimer des données à partir de l’application principale comme avant.You should now be able to create, read, update, and delete data from the back-end app as before. Désormais, la seule différence est que les deux applications sont protégées par l’authentification et l’autorisation App Service, y compris les appels entre les services.The only difference now is that both apps are now secured by App Service authentication and authorization, including the service-to-service calls.

Félicitations !Congratulations! Votre code du serveur accède maintenant aux données de serveur principal pour le compte de l’utilisateur authentifié.Your server code is now accessing the back-end data on behalf of the authenticated user.

Appeler une API de façon sécurisée à partir du code du navigateurCall API securely from browser code

Dans cette étape, vous pointez l’application Angular.js frontale vers l’API principale.In this step, you point the front-end Angular.js app to the back-end API. De cette manière, vous apprenez à récupérer le jeton d’accès et à effectuer des appels d’API à l’application principale avec celui-ci.This way, you learn how to retrieve the access token and make API calls to the back-end app with it.

Alors que le code du serveur a accès aux en-têtes de requête, le code du client peut accéder à GET /.auth/me pour obtenir les mêmes jetons d’accès (consultez Retrieve tokens in app code (Récupérer des jetons dans le code d’application)).While the server code has access to request headers, client code can access GET /.auth/me to get the same access tokens (see Retrieve tokens in app code).

Conseil

Cette section utilise les méthodes HTTP standard pour illustrer les appels HTTP sécurisés.This section uses the standard HTTP methods to demonstrate the secure HTTP calls. Toutefois, vous pouvez utiliser la Bibliothèque d’authentification Microsoft pour JavaScript afin de simplifier le modèle d’application Angular.js.However, you can use Microsoft Authentication Library for JavaScript to help simplify the Angular.js application pattern.

Configuration de CORSConfigure CORS

Dans Cloud Shell, activez CORS pour votre URL de client à l’aide de la commande az webapp cors add.In the Cloud Shell, enable CORS to your client's URL by using the az webapp cors add command. Remplacez les valeurs des espaces réservés <back-end-app-name> et <front-end-app-name> .Replace the <back-end-app-name> and <front-end-app-name> placeholders.

az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'

Cette étape n’est pas liée à l’authentification et à l’autorisation.This step is not related to authentication and authorization. Toutefois, vous en avez besoin pour que votre navigateur autorise les appels d’API entre les domaines à partir de votre application Angular.js.However, you need it so that your browser allows the cross-domain API calls from your Angular.js app. Pour plus d’informations, consultez Ajoutez des fonctionnalités CORS.For more information, see Add CORS functionality.

Pointer l’application Angular.js vers l’API de serveur principalPoint Angular.js app to back-end API

Dans le référentiel local, ouvrez wwwroot/index.html.In the local repository, open wwwroot/index.html.

À la ligne 51, définissez la variable apiEndpoint sur l’URL HTTPS de votre application back-end (https://<back-end-app-name>.azurewebsites.net).In Line 51, set the apiEndpoint variable to the HTTPS URL of your back-end app (https://<back-end-app-name>.azurewebsites.net). Remplacez <back-end-app-name> par le nom de votre application dans App Service.Replace <back-end-app-name> with your app name in App Service.

Dans le référentiel local, ouvrez wwwroot/app/scripts/todoListSvc.js ; vous pouvez constater que apiEndpoint est ajouté à tous les appels d’API.In the local repository, open wwwroot/app/scripts/todoListSvc.js and see that apiEndpoint is prepended to all the API calls. Votre application Angular.js appelle maintenant les API de serveur principal.Your Angular.js app is now calling the back-end APIs.

Ajouter un jeton d’accès aux appels d’APIAdd access token to API calls

Dans wwwroot/app/scripts/todoListSvc.js, au-dessus de la liste des appels d’API (au-dessus de la ligne getItems : function(){), ajoutez la fonction suivante à la liste :In wwwroot/app/scripts/todoListSvc.js, above the list of API calls (above the line getItems : function(){), add the following function to the list:

setAuth: function (token) {
    $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
},

Cette fonction est appelée pour définir l’en-tête Authorization par défaut avec le jeton d’accès.This function is called to set the default Authorization header with the access token. Vous l’appelez à l’étape suivante.You call it in the next step.

Dans le référentiel local, ouvrez wwwroot/app/scripts/app.js et recherchez le code suivant :In the local repository, open wwwroot/app/scripts/app.js and find the following code:

$routeProvider.when("/Home", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
}).otherwise({ redirectTo: "/Home" });

Remplacez l’intégralité du bloc de code par le code suivant :Replace the entire code block with the following code:

$routeProvider.when("/Home", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
    resolve: {
        token: ['$http', 'todoListSvc', function ($http, todoListSvc) {
            return $http.get('/.auth/me').then(function (response) {
                todoListSvc.setAuth(response.data[0].access_token);
                return response.data[0].access_token;
            });
        }]
    },
}).otherwise({ redirectTo: "/Home" });

La nouvelle modification ajoute le mappage resolve qui appelle /.auth/me et définit le jeton d’accès.The new change adds the resolve mapping that calls /.auth/me and sets the access token. Il permet de s’assurer que vous avez le jeton d’accès avant d’instancier le contrôleur todoListCtrl.It makes sure you have the access token before instantiating the todoListCtrl controller. De cette façon, tous les appels d’API par le contrôleur incluent le jeton.That way all API calls by the controller includes the token.

Déployer des mises à jour et des testsDeploy updates and test

Enregistrez toutes vos modifications.Save all your changes. Dans la fenêtre de terminal local, déployez vos modifications à l’application frontale avec les commandes Git suivantes :In the local terminal window, deploy your changes to the front-end app with the following Git commands:

git add .
git commit -m "add authorization header for Angular"
git push frontend master

Accédez à nouveau à https://<front-end-app-name>.azurewebsites.net.Navigate to https://<front-end-app-name>.azurewebsites.net again. Vous devez maintenant être en mesure de créer, lire, mettre à jour et supprimer des données à partir de l’application principale, et ce, directement dans l’application Angular.js.You should now be able to create, read, update, and delete data from the back-end app, directly in the Angular.js app.

Félicitations !Congratulations! Votre code du client accède maintenant aux données de serveur principal pour le compte de l’utilisateur authentifié.Your client code is now accessing the back-end data on behalf of the authenticated user.

Date d’expiration des jetons d’accèsWhen access tokens expire

Votre jeton d’accès expire après un certain laps de temps.Your access token expires after some time. 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é.For information on how to refresh your access tokens without requiring users to reauthenticate with your app, see Refresh identity provider tokens.

Nettoyer les ressourcesClean up resources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources.In the preceding steps, you created Azure resources in a resource group. Si vous ne pensez pas avoir besoin de ces ressources à l’avenir, supprimez le groupe de ressources en exécutant la commande suivante dans Cloud Shell :If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myAuthResourceGroup

L’exécution de cette commande peut prendre une minute.This command may take a minute to run.

Étapes suivantesNext steps

Vous avez appris à effectuer les opérations suivantes :What you learned:

  • Activer l’authentification et l’autorisation intégréesEnable built-in authentication and authorization
  • Sécuriser des applications contre des requêtes non authentifiéesSecure apps against unauthenticated requests
  • Utiliser Azure Active Directory en tant que fournisseur d’identitéUse Azure Active Directory as the identity provider
  • Accéder à une application à distance pour le compte de l’utilisateur connectéAccess a remote app on behalf of the signed-in user
  • Sécuriser des appels entre des services avec un jeton d’authentificationSecure service-to-service calls with token authentication
  • Utiliser des jetons d’accès à partir du code du serveurUse access tokens from server code
  • Utiliser des jetons d’accès à partir du code du client (navigateur)Use access tokens from client (browser) code

Passez au didacticiel suivant pour découvrir comment mapper un nom DNS personnalisé à votre application.Advance to the next tutorial to learn how to map a custom DNS name to your app.