Didacticiel : 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 une application ASP.NET Core avec un serveur frontal Angular.js, mais c’est uniquement pour notre exemple.It uses an ASP.NET Core app with an Angular.js front end, but it is only for 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.

Ce tutoriel utilise l’exemple d’application pour vous montrer comment sécuriser une application autonome (dans Activer l’authentification et l’autorisation pour l’application principale).The tutorial uses the sample app to show you how to secure a self-contained app (in Enable authentication and authorization for back-end app).

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:

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.

Utiliser Azure Cloud ShellUse Azure Cloud Shell

Azure héberge Azure Cloud Shell, un environnement d’interpréteur de commandes interactif que vous pouvez utiliser dans votre navigateur.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell vous permet d’utiliser bash ou PowerShell pour travailler avec les services Azure.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Vous pouvez utiliser les commandes préinstallées Cloud Shell pour exécuter le code de cet article sans avoir à installer quoi que ce soit dans votre environnement local.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Pour lancer Azure Cloud Shell :To launch Azure Cloud Shell:

OptionOption Exemple/LienExample/Link
Sélectionnez Essayer dans le coin supérieur droit d’un bloc de code.Select Try It in the upper-right corner of a code block. La sélection de Essayer ne copie pas automatiquement le code dans Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemple Essayer pour Azure Cloud Shell
Accédez à https://shell.azure.com ou sélectionnez le bouton Lancer Cloud Shell pour ouvrir Cloud Shell dans votre navigateur.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Lancer Cloud Shell dans une nouvelle fenêtreLaunch Cloud Shell in a new window
Sélectionnez le bouton Cloud Shell dans la barre de menus en haut à droite du portail Azure.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Bouton Cloud Shell du portail Azure

Pour exécuter le code de cet article dans Azure Cloud Shell :To run the code in this article in Azure Cloud Shell:

  1. Lancez Cloud Shell.Launch Cloud Shell.

  2. Sélectionnez le bouton Copier dans un bloc de code pour copier le code.Select the Copy button on a code block to copy the code.

  3. Collez le code dans la session Cloud Shell avec Ctrl+Maj+V sur Windows et Linux, ou Cmd+ Maj+V sur macOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.

  4. Appuyez sur Entrée pour exécuter le code.Press Enter to run the code.

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.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’application 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

Notes

Enregistrez les URL des référentiels Git distants pour vos applications front-end et back-end, qui sont affichées dans la sortie de az webapp create.Save the URLs of the Git remotes for your front-end and back-end apps, 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 référentiel 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 référentiel 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

API ASP.NET Core exécuté dans Azure App Service

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 GetAll() et remplacez le code à l’intérieur des accolades par :Find the GetAll() method and replace the code inside the curly braces with:

var data = _client.GetStringAsync($"{_remoteUrl}/api/Todo").Result;
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 GetById(long id) et remplacez le code à l’intérieur des accolades par :Next, find the GetById(long id) method and replace the code inside the curly braces with:

var data = _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}").Result;
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 Create([FromBody] TodoItem item) et remplacez le code à l’intérieur des accolades par :Next, find the Create([FromBody] TodoItem item) method and replace the code inside the curly braces with:

var response = _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", item).Result;
var data = response.Content.ReadAsStringAsync().Result;
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 Update(long id, [FromBody] TodoItem item) et remplacez le code à l’intérieur des accolades par :Next, find the Update(long id, [FromBody] TodoItem item) method and replace the code inside the curly braces with:

var res = _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", item).Result;
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 Delete(long id) et remplacez le code à l’intérieur des accolades par :Next, find the Delete(long id) method and replace the code inside the curly braces with:

var res = _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}").Result;
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 your 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.

API ASP.NET Core exécuté dans Azure App Service

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

  1. 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.

  2. 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.

    API ASP.NET Core exécuté dans Azure App Service

  3. Dans le menu de gauche de votre application back-end, sélectionnez Authentification/Autorisation, puis activez l’authentification App Service en sélectionnant On (Activé).In your back-end app's left menu, select Authentication / Authorization, then enable App Service Authentication by selecting On.

  4. Dans Mesure à prendre quand une demande n’est pas authentifiée, sélectionnez Se connecter avec Azure Active Directory.In Action to take when request is not authenticated, select Log in with Azure Active Directory.

  5. Sous Fournisseurs d’authentification, sélectionnez Azure Active Directory.Under Authentication Providers, select Azure Active Directory

    API ASP.NET Core exécuté dans Azure App Service

  6. Sélectionnez Express, puis acceptez les paramètres par défaut pour créer une application AD, et sélectionnez OK.Select Express, then accept the default settings to create a new AD app and select OK.

  7. Sur la page Authentification/Autorisation, sélectionnez Enregistrer.In the Authentication / Authorization page, select Save.

    Une fois que vous voyez la notification avec le message Successfully saved the Auth Settings for <back-end-app-name> App, actualisez la page.Once you see the notification with the message Successfully saved the Auth Settings for <back-end-app-name> App, refresh the page.

  8. Sélectionnez à nouveau Azure Active Directory, puis sélectionnez Application Azure AD.Select Azure Active Directory again, and then select the Azure AD App.

  9. 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.

    API ASP.NET Core exécuté dans Azure App Service

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. Après vous être connecté, vous ne pouvez toujours pas accéder aux données de l’application principale, car trois choses restent à faire :After you sign in, you still can't access the data from the back-end app, because you still 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.)

  1. 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.

  2. Sélectionnez Inscriptions d’applications > Owned applications (Applications détenues).Select App registrations > Owned applications. 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.

    API ASP.NET Core exécuté dans Azure App Service

  3. Sélectionnez Ajouter une autorisation, puis sélectionnez Mes API > <nom_application_back-end> .Select Add a permission, then select My APIs > <back-end-app-name>.

  4. 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.

    API ASP.NET Core exécuté dans Azure App Service

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.

Connectez-vous à Azure Resource Explorer.Sign in to Azure Resource Explorer. 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.

API ASP.NET Core exécuté dans Azure App Service

Dans le navigateur de gauche, cliquez sur subscriptions > <your-subscription> > resourceGroups > myAuthResourceGroup > providers > Microsoft.Web > sites > <front-end-app-name> > config > authsettings.In the left browser, click subscriptions > <your-subscription> > resourceGroups > myAuthResourceGroup > providers > Microsoft.Web > sites > <front-end-app-name> > 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>"],

API ASP.NET Core exécuté dans Azure App Service

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 la méthode d’action respective (telle que GetAll()), afin que chacun de vos appels d’API sortant présente maintenant le jeton d’accès.In the ASP.NET Core MVC request execution pipeline, OnActionExecuting executes just before the respective action method (such as GetAll()) does, so each of your outgoing API call now presents the access token.

Enregistrez toutes vos modifications.Save your 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 Active Directory (ADAL) pour JavaScript, afin de simplifier le modèle d’application Angular.js.However, you can use Active Directory Authentication Library (ADAL) 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 resource update.In the Cloud Shell, enable CORS to your client's URL by using the az resource update command. Remplacez les 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 resource update --name web --resource-group myAuthResourceGroup --namespace Microsoft.Web --resource-type config --parent sites/<back-end-app-name> --set properties.cors.allowedOrigins="['https://<front-end-app-name>.azurewebsites.net']" --api-version 2015-06-01

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 de votre application principale (https://<back-end-app-name>.azurewebsites.net).In Line 51, set the apiEndpoint variable to the 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 revolve qui appelle /.auth/me et définit le jeton d’accès.The new change adds the revolve 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 your 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.

Supprimer des 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 tutoriel suivant pour découvrir comment mapper un nom DNS personnalisé à votre application web.Advance to the next tutorial to learn how to map a custom DNS name to your web app.