Exercice : incorporer Microsoft Graph dans des applications web ASP.NET MVC

Effectué

Dans cet exercice, vous allez intégrer Microsoft Graph dans l’application. Pour cette application, vous allez utiliser la Bibliothèque de client Microsoft Graph pour .NET afin d’appeler Microsoft Graph.

Récupérer les événements de calendrier à partir d’Outlook

Pour commencer, étendez la classe GraphHelper que vous avez créée dans le dernier module.

Ajoutez ces instructions using en haut du fichier Helpers/GraphHelper.cs.

using graph_tutorial.TokenStorage;
using Microsoft.Identity.Client;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Security.Claims;
using System.Web;

Ajoutez ce code à la classe GraphHelper.

// Load configuration settings from PrivateSettings.config
private static string appId = ConfigurationManager.AppSettings["ida:AppId"];
private static string appSecret = ConfigurationManager.AppSettings["ida:AppSecret"];
private static string redirectUri = ConfigurationManager.AppSettings["ida:RedirectUri"];
private static List<string> graphScopes =
    new List<string>(ConfigurationManager.AppSettings["ida:AppScopes"].Split(' '));

public static async Task<IEnumerable<Event>> GetEventsAsync()
{
    var graphClient = GetAuthenticatedClient();

    var events = await graphClient.Me.Events.Request()
        .Select("subject,organizer,start,end")
        .OrderBy("createdDateTime DESC")
        .GetAsync();

    return events.CurrentPage;
}

private static GraphServiceClient GetAuthenticatedClient()
{
    return new GraphServiceClient(
        new DelegateAuthenticationProvider(
            async (requestMessage) =>
            {
                var idClient = ConfidentialClientApplicationBuilder.Create(appId)
                    .WithRedirectUri(redirectUri)
                    .WithClientSecret(appSecret)
                    .Build();

                var tokenStore = new SessionTokenStore(idClient.UserTokenCache,
                        HttpContext.Current, ClaimsPrincipal.Current);

                var userUniqueId = tokenStore.GetUsersUniqueId(ClaimsPrincipal.Current);
                var account = await idClient.GetAccountAsync(userUniqueId);

                // By calling this here, the token can be refreshed
                // if it's expired right before the Graph call is made
                var result = await idClient.AcquireTokenSilent(graphScopes, account)
                    .ExecuteAsync();

                requestMessage.Headers.Authorization =
                    new AuthenticationHeaderValue("Bearer", result.AccessToken);
            }));
}

Remarque

Que fait ce code ?

• La fonction GetAuthenticatedClient initialise un GraphServiceClient avec un fournisseur d’authentification qui appelle AcquireTokenSilent.
• Dans la fonction GetEventsAsync :
  • L’URL qui sera appelée est /v1.0/me/events.
  • La fonction Select limite les champs renvoyés pour chaque événement à ceux que la vue utilise réellement.
  • La fonction OrderBy trie les résultats en fonction de la date et de l’heure de création, avec l’élément le plus récent en premier.

Créez un contrôleur pour les vues de calendrier. Cliquez avec le bouton droit sur le dossier Contrôleurs dans l’Explorateur de solutions, puis sélectionnez Ajouter un > contrôleur.... Choisissez Contrôleur MVC 5 - Vide , puis sélectionnez Ajouter. Nommez le contrôleur CalendarController puis sélectionnez Ajouter. Remplacez tout le contenu du nouveau fichier par ce code.

using graph_tutorial.Helpers;
using System;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace graph_tutorial.Controllers
{
    public class CalendarController : BaseController
    {
        // GET: Calendar
        [Authorize]
        public async Task<ActionResult> Index()
        {
            var events = await GraphHelper.GetEventsAsync();

            // Change start and end dates from UTC to local time
            foreach (var ev in events)
            {
                ev.Start.DateTime = DateTime.Parse(ev.Start.DateTime).ToLocalTime().ToString();
                ev.Start.TimeZone = TimeZoneInfo.Local.Id;
                ev.End.DateTime = DateTime.Parse(ev.End.DateTime).ToLocalTime().ToString();
                ev.End.TimeZone = TimeZoneInfo.Local.Id;
            }

            return Json(events, JsonRequestBehavior.AllowGet);
        }
    }
}

Démarrez l’application, connectez-vous, puis sélectionnez le lien Calendrier dans la barre de navigation. Si tout fonctionne, vous devriez voir une image mémoire JSON des événements dans le calendrier de l’utilisateur.

Afficher les résultats

Vous pouvez désormais ajouter une vue pour afficher les résultats de façon plus parlante.

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier Affichages/Calendrier , puis sélectionnez Ajouter une > vue... Choisissez Affichage MVC 5 , puis sélectionnez Ajouter. Nommez la vue Index et sélectionnez Ajouter. Remplacez tout le contenu du nouveau fichier par ce code.

@model IEnumerable<Microsoft.Graph.Event>

@{
    ViewBag.Current = "Calendar";
}

<h1>Calendar</h1>
<table class="table">
    <thead>
        <tr>
            <th scope="col">Organizer</th>
            <th scope="col">Subject</th>
            <th scope="col">Start</th>
            <th scope="col">End</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Organizer.EmailAddress.Name</td>
                <td>@item.Subject</td>
                <td>@Convert.ToDateTime(item.Start.DateTime).ToString("M/d/yy h:mm tt")</td>
                <td>@Convert.ToDateTime(item.End.DateTime).ToString("M/d/yy h:mm tt")</td>
            </tr>
        }
    </tbody>
</table>

Cela permet de parcourir une collection d’événements et d’ajouter une ligne de tableau pour chacun d’eux.

Supprimez la ligne return Json(events, JsonRequestBehavior.AllowGet); de la fonction Index dans Controllers/CalendarController.cs. Enfin, remplacez-la par le code suivant.

return View(events);

Démarrez l’application, connectez-vous, puis sélectionnez le lien Calendrier. L’application doit désormais afficher un tableau des événements.

Résumé

Dans cet exercice, vous avez intégré Microsoft Graph dans l’application. Pour cette application, vous avez utilisé la Bibliothèque de client Microsoft Graph pour .NET pour appeler Microsoft Graph.