Übung – Integrieren von Microsoft Graph in ASP.NET MVC-Webanwendungen
- 15 Minuten
In dieser Übung integrieren Sie Microsoft Graph in die Anwendung. Für diese Anwendung verwenden Sie die Microsoft Graph-Clientbibliothek für .NET, um Aufrufe von Microsoft Graph auszuführen.
Abrufen von Kalenderereignissen von Outlook
Beginnen Sie damit, dass Sie die im letzten Modul erstellte GraphHelper-Klasse erweitern.
Fügen Sie die folgenden using-Anweisungen am Anfang der Datei Helpers/GraphHelper.cs hinzu.
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;
Fügen Sie der GraphHelper-Klasse den folgenden Code hinzu.
// 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);
}));
}
Hinweis
Überlegen Sie sich, was dieser Code macht.
- Die
GetAuthenticatedClient-Funktion initialisiert einenGraphServiceClientmit einem Authentifizierungsanbieter, derAcquireTokenSilentaufruft. - In der
GetEventsAsync-Funktion:- Die URL, die aufgerufen wird, lautet
/v1.0/me/events. - Die
Select-Funktion beschränkt die Felder, die für jedes Ereignis zurückgegeben werden, auf nur diejenigen, die von der Ansicht tatsächlich verwendet werden. - Die
OrderBy-Funktion sortiert die Ergebnisse nach Datum und Uhrzeit ihrer Erstellung, wobei das aktuellste Element zuerst angezeigt wird.
- Die URL, die aufgerufen wird, lautet
Erstellen eines Controllers für die Kalenderansichten Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller, und wählen Sie Controller hinzufügen>... aus. Wählen Sie MVC 5-Controller – Leer und dann Hinzufügen aus. Nennen Sie den Controller CalendarController, und wählen Sie Hinzufügen aus. Ersetzen Sie den gesamten Inhalt der neuen Datei durch den folgenden 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);
}
}
}
Starten Sie die App, melden Sie sich an, und wählen Sie den Link Kalender in der Navigationsleiste. Wenn alles funktioniert, sollte ein JSON-Abbild von Ereignissen im Kalender des Benutzers angezeigt werden.
Anzeigen der Ergebnisse
Jetzt können Sie eine Ansicht hinzufügen, um die Ergebnisse benutzerfreundlicher anzuzeigen.
Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Ansichten/Kalender, und wählen Sie Ansicht hinzufügen>... aus. Wählen Sie MVC 5-Ansicht und dann Hinzufügen aus. Nennen Sie die Ansicht Index, und wählen Sie Hinzufügen aus. Ersetzen Sie den gesamten Inhalt der neuen Datei durch den folgenden 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>
Dadurch wird eine Ereignissammlung durchlaufen und jedem Ereignis wird jeweils eine Tabellenzeile hinzugefügt.
Entfernen Sie die Zeile return Json(events, JsonRequestBehavior.AllowGet); aus der Index-Funktion in Controller/CalendarController.cs, und ersetzen Sie sie durch den folgenden Code.
return View(events);
Starten Sie die App, melden Sie sich an, und wählen Sie den Link Kalender. Die App sollte nun eine Tabelle mit Ereignissen rendern.
Zusammenfassung
In dieser Übung haben Sie Microsoft Graph in die Anwendung integriert. Für diese Anwendung haben Sie die Microsoft Graph-Clientbibliothek für .NET verwendet, um Aufrufe von Microsoft Graph auszuführen.