Hinzufügen von E-Mail-Funktionen zu JavaScript-Apps mithilfe von Microsoft Graph

2025-06-12

In diesem Artikel erweitern Sie die Anwendung, die Sie unter Erstellen von JavaScript-Apps mit Microsoft Graph mit Microsoft Graph-E-Mail-APIs erstellt haben. Sie verwenden Microsoft Graph, um den Posteingang des Benutzers aufzulisten und eine E-Mail zu senden.

Auflisten des Posteingangs des Benutzers

Beginnen Sie mit dem Auflisten von Nachrichten im E-Mail-Posteingang des Benutzers.

Öffnen Sie graphHelper.js , und fügen Sie die folgende Funktion hinzu.

export async function getInboxAsync() {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  return _userClient
    .api('/me/mailFolders/inbox/messages')
    .select(['from', 'isRead', 'receivedDateTime', 'subject'])
    .top(25)
    .orderby('receivedDateTime DESC')
    .get();
}

Ersetzen Sie die leere ListInboxAsync Funktion in index.js durch Folgendes.

async function listInboxAsync() {
  try {
    const messagePage = await getInboxAsync();
    const messages = messagePage.value;

    // Output each message's details
    for (const message of messages) {
      console.log(`Message: ${message.subject ?? 'NO SUBJECT'}`);
      console.log(`  From: ${message.from?.emailAddress?.name ?? 'UNKNOWN'}`);
      console.log(`  Status: ${message.isRead ? 'Read' : 'Unread'}`);
      console.log(`  Received: ${message.receivedDateTime}`);
    }

    // If @odata.nextLink is not undefined, there are more messages
    // available on the server
    const moreAvailable = messagePage['@odata.nextLink'] != undefined;
    console.log(`\nMore messages available? ${moreAvailable}`);
  } catch (err) {
    console.log(`Error getting user's inbox: ${err}`);
  }
}

Führen Sie die App aus, melden Sie sich an, und wählen Sie Option 2 aus, um Ihren Posteingang aufzulisten.

[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 2
Message: Updates from Ask HR and other communities
  From: Contoso Demo on Yammer
  Status: Read
  Received: 12/30/2021 4:54:54 AM -05:00
Message: Employee Initiative Thoughts
  From: Patti Fernandez
  Status: Read
  Received: 12/28/2021 5:01:10 PM -05:00
Message: Voice Mail (11 seconds)
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 5:00:46 PM -05:00
Message: Our Spring Blog Update
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:49:46 PM -05:00
Message: Atlanta Flight Reservation
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:35:42 PM -05:00
Message: Atlanta Trip Itinerary - down time
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:22:04 PM -05:00

...

More messages available? true

getInboxAsync erläutert

Betrachten Sie den Code in der getInboxAsync Funktion.

Zugreifen auf bekannte E-Mail-Ordner

Die -Funktion wird an den Anforderungs-Generator _userClient.api übergeben/me/mailFolders/inbox/messages, der eine Anforderung an die API zum Auflisten von Nachrichten erstellt. Da sie den /mailFolders/inbox Teil des API-Endpunkts enthält, gibt die API nur Nachrichten im angeforderten E-Mail-Ordner zurück. Da der Posteingang in diesem Fall ein bekannter Standardordner innerhalb des Postfachs eines Benutzers ist, ist er über seinen bekannten Namen zugänglich. Auf nicht standardmäßige Ordner wird auf die gleiche Weise zugegriffen, indem der bekannte Name durch die ID-Eigenschaft des E-Mail-Ordners ersetzt wird. Ausführliche Informationen zu den verfügbaren bekannten Ordnernamen finden Sie unter mailFolder-Ressourcentyp.

Zugreifen auf eine Sammlung

Im Gegensatz zur getUserAsync Funktion aus dem vorherigen Abschnitt, die ein einzelnes Objekt zurückgibt, gibt diese Methode eine Auflistung von Nachrichten zurück. Die meisten APIs in Microsoft Graph, die eine Sammlung zurückgeben, geben nicht alle verfügbaren Ergebnisse in einer einzigen Antwort zurück. Stattdessen verwenden sie Paging , um einen Teil der Ergebnisse zurückzugeben, während eine Methode für Clients bereitgestellt wird, um die nächste Seite anzufordern.

Standardseitengrößen

APIs, die Paging verwenden, implementieren eine Standardseitengröße. Für Nachrichten ist der Standardwert 10. Clients können mithilfe des abfrageparameters $top mehr (oder weniger) anfordern. In getInboxAsyncerfolgt das Hinzufügen $top mit der .top(25) -Methode.

Hinweis

Der an .top() übergebene Wert ist eine obere Grenze, keine explizite Zahl. Die API gibt eine Anzahl von Nachrichten bis zum angegebenen Wert zurück.

Abrufen nachfolgender Seiten

Wenn auf dem Server weitere Ergebnisse verfügbar sind, enthalten Sammlungsantworten eine @odata.nextLink Eigenschaft mit einer API-URL für den Zugriff auf die nächste Seite. Die JavaScript-Clientbibliothek macht diese Eigenschaft für -Objekte verfügbar PageCollection . Wenn diese Eigenschaft nicht undefiniert ist, stehen weitere Ergebnisse zur Verfügung.

Der Wert von @odata.nextLink kann an _userClient.api übergeben werden, um die nächste Ergebnisseite abzurufen. Alternativ können Sie das PageIterator -Objekt aus der Clientbibliothek verwenden, um alle verfügbaren Seiten zu durchlaufen.

Sortieren von Sammlungen

Die -Funktion verwendet die orderby -Methode für die Anforderung, um Ergebnisse anzufordern, die nach dem Zeitpunkt sortiert sind, zu dem die Nachricht empfangen wird (receivedDateTime -Eigenschaft). Sie enthält die DESC Schlüsselwort (keyword), sodass kürzlich empfangene Nachrichten zuerst aufgeführt werden. Diese Methode fügt dem API-Aufruf den Abfrageparameter $orderby hinzu.

Nachrichten senden

Fügen Sie nun die Möglichkeit hinzu, eine E-Mail-Nachricht als authentifizierten Benutzer zu senden.

Öffnen Sie graphHelper.js , und fügen Sie die folgende Funktion hinzu.

export async function sendMailAsync(subject, body, recipient) {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Create a new message
  const message = {
    subject: subject,
    body: {
      content: body,
      contentType: 'text',
    },
    toRecipients: [
      {
        emailAddress: {
          address: recipient,
        },
      },
    ],
  };

  // Send the message
  return _userClient.api('me/sendMail').post({
    message: message,
  });
}

Ersetzen Sie die leere sendMailAsync Funktion in index.js durch Folgendes.

async function sendMailToSelfAsync() {
  try {
    // Send mail to the signed-in user
    // Get the user for their email address
    const user = await getUserAsync();
    const userEmail = user?.mail ?? user?.userPrincipalName;

    if (!userEmail) {
      console.log("Couldn't get your email address, canceling...");
      return;
    }

    await sendMailAsync('Testing Microsoft Graph', 'Hello world!', userEmail);
    console.log('Mail sent.');
  } catch (err) {
    console.log(`Error sending mail: ${err}`);
  }
}

Führen Sie die App aus, melden Sie sich an, und wählen Sie Option 3 aus, um eine E-Mail an sich selbst zu senden.
```
[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 3
Mail sent.
```
Hinweis

Wenn Sie mit einem Entwicklermandanten aus dem Microsoft 365-Entwicklerprogramm testen, wird die von Ihnen gesendete E-Mail möglicherweise nicht zugestellt, und Sie erhalten möglicherweise einen Nicht-Lieferbericht. Wenn Sie die Blockierung des Sendens von E-Mails von Ihrem Mandanten aufheben möchten, wenden Sie sich über die Microsoft 365 Admin Center an den Support.
Um zu überprüfen, ob die Nachricht empfangen wurde, wählen Sie Option 2 aus, um Ihren Posteingang aufzulisten.

sendMailAsync erklärt

Betrachten Sie den Code in der sendMailAsync Funktion.

Senden von E-Mails

Die Funktion wird an den Anforderungs-Generator _userClient.api übergeben/me/sendMail, der eine Anforderung an die API zum Senden von E-Mails erstellt. Der Anforderungs-Generator akzeptiert ein Message -Objekt, das die zu sendende Nachricht darstellt.

Erstellen von Objekten

Im Gegensatz zu den vorherigen Aufrufen von Microsoft Graph, die nur Daten lesen, werden mit diesem Aufruf Daten erstellt. Um Elemente mit der Clientbibliothek zu erstellen, erstellen Sie eine instance der Klasse, Messagedie die Daten darstellt (in diesem Fall ), legen Sie die gewünschten Eigenschaften fest, und senden Sie sie dann im API-Aufruf. Da der Aufruf Daten sendet, wird die post -Methode anstelle von getverwendet.

Nächster Schritt

Hinzufügen zusätzlicher Microsoft Graph-APIs

Freigeben über