Übung – Zeigen Sie die E-Mails eines Benutzers an

  • 4 Minuten

In dieser Übung erweitern Sie die App, damit Benutzer ihre letzten 10 E-Mails anzeigen können.

Laden von E-Mails von Microsoft Graph

Beginnen Sie, indem Sie in Microsoft Graph einen Aufruf hinzufügen, um die letzten 10 E-Mails des aktuellen Benutzers zu laden.

  1. Öffnen Sie in Ihrem Code-Editor die Datei graph.js.

  2. Fügen Sie am Ende der Datei eine neue asynchrone Funktion ein, um die letzten 10 E-Mails abzurufen. Laden Sie den Betreff jeder E-Mail sowie das Datum und die Uhrzeit des Eingangs.

    async function getEmails() {
  ensureScope('mail.read');

  return await graphClient
    .api('/me/messages')
    .select('subject,receivedDateTime')
    .orderby('receivedDateTime desc')
    .top(10)
    .get();
}

Hinzufügen eines Platzhalters zum Anzeigen von E-Mails

Erweitern Sie als nächstes die App mit einer Schaltfläche, um E-Mails zu laden, und fügen Sie einen Platzhalter hinzu, um sie anzuzeigen.

  1. Öffnen Sie in Ihrem Code-Editor die Datei index.html.

  2. Suchen Sie die Zeile <h4>Welcome <span id="userName"></span></h4>, und fügen Sie das folgende Markup unmittelbar danach hinzu:

    <button onclick="displayEmail();" id="displayEmail">Show email</button>
<ul id="emails"></ul>

  3. Erweitern sie den Inhaltsblock um eine Schaltfläche zum Laden von E-Mails und einen Platzhalter, um sie anzuzeigen.

    <div id="content" style="display: none;">
  <h4>Welcome <span id="userName"></span></h4>
  <button onclick="displayEmail();" id="displayEmail">Show email</button>
  <ul id="emails"></ul>
</div>

Anzeigen von E-Mails in der App

Der letzte Schritt besteht darin, E-Mails mithilfe von Microsoft Graph anzufordern und sie im Platzhalter anzuzeigen.

  1. Öffnen Sie in Ihrem Code-Editor die Datei ui.js.

  2. Fügen Sie am Ende der Datei die Funktioniert displayEmail hinzu:

    async function displayEmail() {
  var emails = await getEmails();
  if (!emails || emails.value.length < 1) {
    return;
  }

  document.getElementById('displayEmail').style = 'display: none';

  var emailsUl = document.getElementById('emails');
  emails.value.forEach(email => {
    var emailLi = document.createElement('li');
    emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
    emailsUl.appendChild(emailLi);
  });
}

Ausführen Ihrer App

Sie haben Ihre App erweitert, um die E-Mails eines Benutzers mithilfe von Microsoft Graph anzuzeigen. Lassen Sie uns die App lokal ausführen.

  1. Zeigen Sie eine Vorschau der Web-App an, indem Sie den folgenden Befehl im Terminal ausführen.

    npm start

  2. Ihr Browser sollte auf http://localhost:8080 zeigen.

  3. Wählen Sie die Schaltfläche Bei Microsoft anmelden aus, um sich mit Ihrem Microsoft 365-Konto anzumelden.

  4. Nachdem Sie sich mit Ihrem Konto angemeldet haben, wählen Sie die Schaltfläche E-Mail anzeigen aus.

  5. Wenn Sie die App zum ersten Mal ausführen, werden Sie aufgefordert, der App Zugriff auf Ihre E-Mails zu gewähren. Stimmen Sie der Anforderung zu, um fortzufahren.

  6. Sie sollten die letzten 10 E-Mails des Benutzers in der App angezeigt erhalten.

Tipp

Wenn keine E-Mails angezeigt werden, stellen Sie sicher, dass sich die E-Mails im Posteingang des Kontos befinden, mit dem Sie sich bei der App anmelden.