Tutoriel : Accéder à Microsoft Graph à partir d’une application sécurisée en tant qu’utilisateur

Accédez à Azure Resource Explorer et utilisez l’arborescence de ressources pour localiser votre application web. L’URL de ressource doit ressembler à https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.

Azure Resource Explorer est désormais ouvert avec votre application web sélectionnée dans l’arborescence des ressources. En haut de la page, sélectionnez Lecture/écriture pour permettre la modification de vos ressources Azure.

Dans le navigateur de gauche, descendez dans la hiérarchie jusqu’à config>authsettingsV2.

Dans la vue authsettingsV2, sélectionnez Modifier. Recherchez la section login de identityProviders ->azureActiveDirectory et ajoutez les paramètres loginParameters suivants : "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ].

"identityProviders": {
    "azureActiveDirectory": {
      "enabled": true,
      "login": {
        "loginParameters":[
          "response_type=code id_token",
          "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
        ]
      }
    }
  }
},

Enregistrez vos paramètres en sélectionnant PUT. La prise en compte de ce paramètre peut prendre plusieurs minutes. Votre application web est maintenant configurée pour accéder à Microsoft Graph avec un jeton d’accès approprié. Si ce n’est pas le cas, Microsoft Graph retourne une erreur indiquant que le format du jeton compact est incorrect.

Utilisez l’interface de ligne de commande Azure pour appeler les API REST de l’application Web App Service pour récupérer et mettre à jour les paramètres de configuration d’authentification afin que votre application Web puisse appeler Microsoft Graph. Ouvrez une fenêtre de commande et connectez-vous à l’interface de ligne de commande Azure :

az login

Récupérez les paramètres « config/authsettingsv2 » existants et enregistrez-les dans un fichier local authsettings.json.

az rest --method GET --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2/list?api-version=2020-06-01' > authsettings.json

Ouvrez le fichier authsettings.js à l’aide de votre éditeur de texte par défaut. Recherchez la section login de identityProviders ->azureActiveDirectory et ajoutez les paramètres loginParameters suivants : "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ].

"identityProviders": {
    "azureActiveDirectory": {
      "enabled": true,
      "login": {
        "loginParameters":[
          "response_type=code id_token",
          "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
        ]
      }
    }
  }
},

Enregistrez vos modifications dans le fichier authsettings.js et chargez les paramètres locaux dans votre application web :

az rest --method PUT --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2?api-version=2020-06-01' --body @./authsettings.json

À l’aide de la bibliothèque Microsoft.Identity.Web, l’application web obtient un jeton d’accès pour l’authentification auprès de Microsoft Graph. Dans la version 1.2.0 et ultérieures, la bibliothèque Microsoft.Identity.Web s’intègre à et peut s’exécuter parallèlement au module d’authentification/d’autorisation App Service. Microsoft.Identity.Web détecte que l’application web est hébergée dans App Service et obtient le jeton d’accès à partir du module d’authentification/d’autorisation App Service. Le jeton d’accès est ensuite transmis aux requêtes authentifiées avec l’API Microsoft Graph.

Pour voir ce code dans un exemple d’application, consultez l’exemple sur GitHub.

Installer des packages de bibliothèque de client

Installez les packages NuGet Microsoft.Identity.Web et Microsoft.Identity.Web.GraphServiceClient dans votre projet à l’aide de l’interface de ligne de commande .NET (CLI) ou de la console du Gestionnaire de package dans Visual Studio.

CLI .NET

Ouvrez une ligne de commande et basculez vers le répertoire qui contient votre fichier projet.

Exécutez les commandes d’installation.

dotnet add package Microsoft.Identity.Web.GraphServiceClient

dotnet add package Microsoft.Identity.Web

Console du Gestionnaire de package

Ouvrez le projet/la solution dans Visual Studio, puis ouvrez la console à l’aide de la commande Outils>Gestionnaire de package NuGet>Console du gestionnaire de package.

Exécutez les commandes d’installation.

Install-Package Microsoft.Identity.Web.GraphServiceClient

Install-Package Microsoft.Identity.Web

Startup.cs

Dans le fichier Startup.cs, la méthode AddMicrosoftIdentityWebApp ajoute Microsoft.Identity.Web à votre application web. La méthode AddMicrosoftGraph ajoute la prise en charge de Microsoft Graph.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Identity.Web;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;

// Some code omitted for brevity.
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddOptions();
      string[] initialScopes = Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');

      services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
              .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
              .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
                      .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
                      .AddInMemoryTokenCaches(); 

      services.AddAuthorization(options =>
      {
          // By default, all incoming requests will be authorized according to the default policy
          options.FallbackPolicy = options.DefaultPolicy;
      });
      services.AddRazorPages()
          .AddMvcOptions(options => {})                
          .AddMicrosoftIdentityUI();

      services.AddControllersWithViews()
              .AddMicrosoftIdentityUI();
    }
}

appsettings.json

Microsoft Entra ID spécifie la configuration de la bibliothèque Microsoft.Identity.Web. Dans le centre d’administration Microsoft Entra, sélectionnez Applications dans le menu du portail, puis inscriptions d'applications. Sélectionnez l’inscription d’application créée lorsque vous avez activé le module d’authentification/autorisation App Service. (L’inscription d’application doit avoir le même nom que votre application web.) Vous trouverez l’ID de locataire et l’ID client dans la page de vue d’ensemble de l’inscription d’application. Le nom de domaine est indiqué sur la page de présentation Microsoft Entra de votre locataire.

Graphe spécifie le point de terminaison Microsoft Graph et les étendues initiales nécessaires à l’application.

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "[Enter the domain of your tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Entra admin center. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. aaaabbbb-0000-cccc-1111-dddd2222eeee]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Microsoft Entra admin center), e.g. 00001111-aaaa-2222-bbbb-3333cccc4444]",
    "ClientSecret": "[Copy the client secret added to the app from the Microsoft Entra admin center]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc"
  },
  "DownstreamApis": {
    "MicrosoftGraph": {
      // Specify BaseUrl if you want to use Microsoft graph in a national cloud.
      // See https://learn.microsoft.com/graph/deployments#microsoft-graph-and-graph-explorer-service-root-endpoints
      // "BaseUrl": "https://graph.microsoft.com/v1.0",

      // Set RequestAppToken this to "true" if you want to request an application token (to call graph on 
      // behalf of the application). The scopes will then automatically
      // be ['https://graph.microsoft.com/.default'].
      // "RequestAppToken": false

      // Set Scopes to request (unless you request an app token).
      "Scopes": [ "User.Read" ]

      // See https://aka.ms/ms-id-web/downstreamApiOptions for all the properties you can set.
    }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Index.cshtml.cs

L’exemple suivant montre comment appeler Microsoft Graph en tant qu’utilisateur connecté et comment récupérer des informations utilisateur. L’objet GraphServiceClient est injecté dans le contrôleur et l’authentification a été configurée pour vous par la bibliothèque Microsoft.Identity.Web.

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Graph;
using System.IO;
using Microsoft.Identity.Web;
using Microsoft.Extensions.Logging;

// Some code omitted for brevity.

[AuthorizeForScopes(Scopes = new[] { "User.Read" })]
public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;
    private readonly GraphServiceClient _graphServiceClient;

    public IndexModel(ILogger<IndexModel> logger, GraphServiceClient graphServiceClient)
    {
        _logger = logger;
        _graphServiceClient = graphServiceClient;
    }

    public async Task OnGetAsync()
    {
        try
        {
            var user = await _graphServiceClient.Me.GetAsync();
            ViewData["Me"] = user;
            ViewData["name"] = user.DisplayName;

            using (var photoStream = await _graphServiceClient.Me.Photo.Content.GetAsync())
            {
                byte[] photoByte = ((MemoryStream)photoStream).ToArray();
                ViewData["photo"] = Convert.ToBase64String(photoByte);
            }
        }
        catch (Exception ex)
        {
            ViewData["photo"] = null;
        }
    }
}

À l’aide d’une classe AuthProvider personnalisée qui encapsule la logique d’authentification, l’application web obtient le jeton d'accès de l'utilisateur à partir de l’en-tête des demandes entrantes. L’instance AuthProvider détecte que l’application web est hébergée dans App Service et obtient le jeton d’accès à partir du module d’authentification/d’autorisation App Service. Le jeton d’accès est alors passé au client du SDK Microsoft Graph pour effectuer une demande authentifiée au point de terminaison /me.

const graphHelper = require('../utils/graphHelper');

// Some code omitted for brevity.

exports.getProfilePage = async(req, res, next) => {

    try {
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

        const profile = await graphClient
            .api('/me')
            .get();

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

Pour interroger Microsoft Graph, utilisez le Kit de développement logiciel (SDK) JavaScript Microsoft Graph.

const graph = require('@microsoft/microsoft-graph-client');

// Some code omitted for brevity.

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}