Übung – Zugriff auf Kalenderereignisse eines Benutzers mithilfe von Microsoft Graph

12 Minuten

Lassen Sie uns alle bis zu diesem Punkt diskutierten Konzepte verwenden und Änderungen an der Beispielapp vornehmen, um auf die Kalenderereignisse zuzugreifen.

Suchen Sie die Datei index.html in Ihrem Code-Editor. Fügen Sie den folgenden HTML-Code in das <main>-Tag ein, kurz vor dem schließenden </main>-Tag.

<button id="btnShowEvents" style="display: none;" onclick="displayEvents();">Show events</button>
<div id="eventWrapper" style="display: none;">
  <p>Your events retrieved from Microsoft Graph for the upcoming week:</p>
  <ul id="events"></ul>
</div>

Suchen Sie die Datei graph.js in Ihrem Editor. Fügen Sie eine neue Funktion hinzu, um die Kalenderereignisse des angemeldeten Benutzers für die kommende Woche abzurufen, indem Sie den Microsoft Graph API-Endpunkt /me/calendarView verwenden. Sie werden diese Funktion getEvents() nennen.

Fügen Sie am Ende der Datei den folgenden Code hinzu:

async function getEvents() {
  ensureScope('Calendars.read');
  const dateNow = new Date();
  const dateNextWeek = new Date();
  dateNextWeek.setDate(dateNextWeek.getDate() + 7);
  const query = `startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()}`;

  return await graphClient
  .api('/me/calendarView').query(query)
  .select('subject,start,end')
  .orderby(`start/DateTime`)
  .get();
}

Suchen Sie die Datei ui.js, und fügen Sie eine neue Funktion hinzu, um die von Microsoft Graph empfangenen Kalenderereignisse im Listenelement anzuzeigen. Sie werden diese Funktion displayEvents() nennen.

Fügen Sie am Ende der Datei den folgenden Code hinzu:

async function displayEvents() {
  var events = await getEvents();
  if (!events || events.value.length < 1) {
    var content = document.getElementById('content');
    var noItemsMessage = document.createElement('p');
    noItemsMessage.innerHTML = `No events for the coming week!`;
    content.appendChild(noItemsMessage)

  } else {
    var wrapperShowEvents = document.getElementById('eventWrapper');
    wrapperShowEvents.style = "display: block";
    const eventsElement = document.getElementById('events');
    eventsElement.innerHTML = '';
    events.value.forEach(event => {
      var eventList = document.createElement('li');
      eventList.innerText = `${event.subject} - From  ${new Date(event.start.dateTime).toLocaleString()} to ${new Date(event.end.dateTime).toLocaleString()} `;
      eventsElement.appendChild(eventList);
    });
  }
  var btnShowEvents = document.getElementById('btnShowEvents');
  btnShowEvents.style = "display: none";
}

Aktualisieren Sie in derselben Datei ui.js die Funktion displayUI(), um nur bei erfolgreicher Autorisierung die Schaltfläche Ereignisse anzeigen anzuzeigen.

Fügen Sie am Ende der Funktion displayUI() den folgenden Code hinzu:
```
var btnShowEvents = document.getElementById('btnShowEvents');
btnShowEvents.style = "display: block";
```

Nachdem Sie nun alle anderen Funktionen und Codeausschnitte zu den Kalenderereignissen eines angemeldeten Benutzers für die kommende Woche hinzugefügt haben, besteht der nächste Schritt im lokalen Ausführen der App.

Ausführen der App

Um die Anwendung auszuführen und zu testen, müssen Sie unter Verwendung von Microsoft Outlook oder Microsoft Teams einige Kalenderereignisse in Ihren Kalender einfügen. Die Ereignisse sollten in einen Zeitraum von einer Woche fallen.

Tipp

Stellen Sie für diesen Schritt sicher, dass Node.js auf Ihrem Computer installiert ist.

Es ist an der Zeit, die Anwendung lokal auszuführen.

Wechseln Sie im Terminalfenster zu dem Projektordner, in dem sich der Quellcode befindet.
Führen Sie das folgende Skript in der Befehlszeile aus, um Ihre App lokal zu starten, indem Sie http://localhost:8080 im Browser öffnen.
```
npm start
```
Wenn die App ordnungsgemäß konfiguriert ist, wird eine Anmeldeschaltfläche angezeigt.
Melden Sie sich mit einem Konto im selben Microsoft 365-Entwicklermandanten an, der in Einheit 2 verwendet wurde, in dem Sie die Microsoft Entra-Anwendung registriert haben.
Nach dem erfolgreichen Anmelden werden Sie aufgefordert, Ihre Zustimmung zu geben.
Wählen Sie Annehmen aus, um der Anwendung die Zustimmung zu geben, Vorgänge für den Benutzer auszuführen.
Nachdem Sie Ihre Zustimmung gegeben haben, versucht die Anwendung, anhand der überprüften Kontoinformationen ein Zugriffstoken abzurufen. Die Microsoft-Authentifizierungsbibliothek übernimmt diesen Schritt für Sie.
Nachdem Sie das Token in der Anwendung erfolgreich zurückerlangt haben, wird eine GET-Anforderung an den Microsoft Graph-Endpunkt /me gesendet. Das Zugriffstoken wird im Autorisierungsheader übergeben. Das Aufrufen von /me ruft dann die Daten sicher vom Dienst ab.
Nachdem Sie die Antwort von Microsoft Graph erhalten haben, sehen Sie die Willkommensnachricht mit dem Namen des angemeldeten Benutzers. Wählen Sie die Schaltfläche Ereignisse anzeigen aus.
Ein weiteres Zustimmungsdialogfeld wird angezeigt. Beachten Sie den Berechtigungsbereich Ihren Kalender lesen, dem Sie zustimmen.
Wählen Sie Annehmen aus, um der Anwendung die Zustimmung zu geben, Vorgänge für den Benutzer auszuführen.
Nachdem Sie Ihre Zustimmung gegeben haben, versucht die Anwendung, anhand der überprüften Kontoinformationen ein Zugriffstoken abzurufen. Die Microsoft-Authentifizierungsbibliothek übernimmt diesen Schritt für Sie.
Nachdem Sie das Token in der Anwendung erfolgreich zurückerlangt haben, wird eine GET-Anforderung an den Microsoft Graph-Endpunkt /me/calendarView gesendet. Das Zugriffstoken wird im Autorisierungsheader übergeben. Das Aufrufen von /me/calendarView ruft dann die Daten sicher vom Dienst ab.
Nachdem Sie die Antwort von Microsoft Graph erhalten haben, sehen Sie die Kalenderereignisse des angemeldeten Benutzers für die kommende Woche aufgelistet.

Sie haben erfolgreich demonstriert, wie Sie mit Microsoft Graph auf Microsoft 365-Kalenderereignisse für einen angemeldeten Benutzer zugreifen und diese anzeigen können.

Übung – Zugriff auf Kalenderereignisse eines Benutzers mithilfe von Microsoft Graph

Ausführen der App

Feedback