Erstellen von JavaScript-Apps mit Microsoft Graph

Artikel
Developer (Anfänger)
23 Minuten bis zum Abschluss

In diesem Tutorial erfahren Sie, wie Sie eine JavaScript-Konsolen-App erstellen, die die Microsoft Graph-API verwendet, um im Auftrag eines Benutzers auf Daten zuzugreifen.

Hinweis

Informationen zur Verwendung von Microsoft Graph für den Zugriff auf Daten mithilfe der reinen App-Authentifizierung finden Sie in diesem Tutorial zur reinen App-Authentifizierung.

In diesem Lernprogramm wird Folgendes vermittelt:

Tipp

Alternativ zu diesem Tutorial können Sie den vollständigen Code über das Schnellstarttool herunterladen, das die App-Registrierung und -Konfiguration automatisiert. Der heruntergeladene Code funktioniert ohne Änderungen.

Sie können auch das GitHub-Repository herunterladen oder klonen und die Anweisungen in der INFODATEI befolgen, um eine Anwendung zu registrieren und das Projekt zu konfigurieren.

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, sollte Node.js auf Ihrem Entwicklungscomputer installiert sein.

Sie sollten auch über ein Microsoft-Geschäfts-, Schul- oder Unikonto mit einem Exchange Online-Postfach verfügen. Wenn Sie nicht über einen Microsoft 365-Mandanten verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für einen mandantenfähigen Mandanten qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

Hinweis

Dieses Tutorial wurde mit Node.js Version 16.14.2 geschrieben. Die Schritte in diesem Leitfaden funktionieren möglicherweise mit anderen Versionen, die jedoch nicht getestet wurden.

Registrieren der App im Portal

22 Minuten verbleibend

In dieser Übung registrieren Sie eine neue Anwendung in Azure Active Directory, um die Benutzerauthentifizierung zu aktivieren. Sie können eine Anwendung über das Microsoft Entra Admin Center oder mithilfe des Microsoft Graph PowerShell SDK registrieren.

Registrieren der Anwendung für die Benutzerauthentifizierung

In diesem Abschnitt registrieren Sie eine Anwendung, die die Benutzerauthentifizierung mithilfe des Gerätecodeflows unterstützt.

Microsoft Entra Admin Center
PowerShell

Öffnen Sie einen Browser, navigieren Sie zum Microsoft Entra Admin Center , und melden Sie sich mit einem globalen Administratorkonto an.
Wählen Sie im linken Navigationsbereich Microsoft Entra ID aus, erweitern Sie Identität, erweitern Sie Anwendungen, und wählen Sie dann App-Registrierungen aus.
Wählen Sie Neue Registrierung aus. Geben Sie einen Namen für Ihre Anwendung ein, Graph User Auth Tutorialz. B. .

Legen Sie unterstützte Kontotypen wie gewünscht fest. Mögliche Optionen:

Option	Wer kann sich anmelden?
Nur Konten in diesem Organisationsverzeichnis	Nur Benutzer in Ihrer Microsoft 365-Organisation
Konten in einem beliebigen Organisationsverzeichnis	Benutzer in einer beliebigen Microsoft 365-Organisation (Geschäfts-, Schul- oder Unikonten)
Konten in einem beliebigen Organisationsverzeichnis ... und persönliche Microsoft-Konten	Benutzer in jeder Microsoft 365-Organisation (Geschäfts-, Schul- oder Unikonten) und persönliche Microsoft-Konten

Lassen Sie URI umleiten leer.
Wählen Sie Registrieren aus. Kopieren Sie auf der Seite Übersicht der Anwendung den Wert der Anwendungs-ID (Client-ID), und speichern Sie ihn. Sie benötigen ihn im nächsten Schritt. Wenn Sie nur Konten in diesem Organisationsverzeichnis für Unterstützte Kontotypen ausgewählt haben, kopieren Sie auch die Verzeichnis-ID (Mandant), und speichern Sie sie.
Wählen Sie unter Verwalten die Option Authentifizierung aus. Suchen Sie den Abschnitt Erweiterte Einstellungen , und ändern Sie die Umschaltfläche Öffentliche Clientflows zulassen auf Ja, und wählen Sie dann Speichern aus.

Um PowerShell verwenden zu können, benötigen Sie das Microsoft Graph PowerShell SDK. Falls sie nicht vorhanden ist, finden Sie unter Installieren des Microsoft Graph PowerShell SDK Anweisungen zur Installation.

Wichtig

Das PowerShell-Skript erfordert ein Geschäfts-, Schul- oder Unikonto mit der Rolle Anwendungsadministrator, Cloudanwendungsadministrator oder Globaler Administrator. Wenn Ihr Konto über die Rolle Anwendungsentwickler verfügt, können Sie sich im Microsoft Entra Admin Center registrieren.

Erstellen Sie eine neue Datei mit dem NamenRegisterAppForUserAuth.ps1 , und fügen Sie den folgenden Code hinzu.

param(
  [Parameter(Mandatory=$true,
  HelpMessage="The friendly name of the app registration")]
  [String]
  $AppName,

  [Parameter(Mandatory=$false,
  HelpMessage="The sign in audience for the app")]
  [ValidateSet("AzureADMyOrg", "AzureADMultipleOrgs", `
  "AzureADandPersonalMicrosoftAccount", "PersonalMicrosoftAccount")]
  [String]
  $SignInAudience = "AzureADandPersonalMicrosoftAccount",

  [Parameter(Mandatory=$false)]
  [Switch]
  $StayConnected = $false
)

# Tenant to use in authentication.
# See https://learn.microsoft.com/azure/active-directory/develop/v2-oauth2-device-code#device-authorization-request
$authTenant = switch ($SignInAudience)
{
  "AzureADMyOrg" { "tenantId" }
  "AzureADMultipleOrgs" { "organizations" }
  "AzureADandPersonalMicrosoftAccount" { "common" }
  "PersonalMicrosoftAccount" { "consumers" }
  default { "invalid" }
}

if ($authTenant -eq "invalid")
{
  Write-Host -ForegroundColor Red "Invalid sign in audience:" $SignInAudience
  Exit
}

# Requires an admin
Connect-MgGraph -Scopes "Application.ReadWrite.All User.Read" -UseDeviceAuthentication -ErrorAction Stop

# Get context for access to tenant ID
$context = Get-MgContext -ErrorAction Stop

if ($authTenant -eq "tenantId")
{
  $authTenant = $context.TenantId
}

# Create app registration
$appRegistration = New-MgApplication -DisplayName $AppName -SignInAudience $SignInAudience `
 -IsFallbackPublicClient -ErrorAction Stop
Write-Host -ForegroundColor Cyan "App registration created with app ID" $appRegistration.AppId

# Create corresponding service principal
if ($SignInAudience -ne "PersonalMicrosoftAccount")
{
  New-MgServicePrincipal -AppId $appRegistration.AppId -ErrorAction SilentlyContinue `
   -ErrorVariable SPError | Out-Null
  if ($SPError)
  {
    Write-Host -ForegroundColor Red "A service principal for the app could not be created."
    Write-Host -ForegroundColor Red $SPError
    Exit
  }

  Write-Host -ForegroundColor Cyan "Service principal created"
}

Write-Host
Write-Host -ForegroundColor Green "SUCCESS"
Write-Host -ForegroundColor Cyan -NoNewline "Client ID: "
Write-Host -ForegroundColor Yellow $appRegistration.AppId
Write-Host -ForegroundColor Cyan -NoNewline "Auth tenant: "
Write-Host -ForegroundColor Yellow $authTenant

if ($StayConnected -eq $false)
{
  Disconnect-MgGraph | Out-Null
  Write-Host "Disconnected from Microsoft Graph"
}
else
{
  Write-Host
  Write-Host -ForegroundColor Yellow `
   "The connection to Microsoft Graph is still active. To disconnect, use Disconnect-MgGraph"
}

Speichern Sie die Datei.
Öffnen Sie PowerShell, und ändern Sie das aktuelle Verzeichnis in den Speicherort von RegisterAppForUserAuth.ps1.

Führen Sie den folgenden Befehl aus, und <ersetzen Sie audience-value> durch den gewünschten Wert (siehe Tabelle unten).

.\RegisterAppForUserAuth.ps1 -AppName "Graph User Auth Tutorial" -SignInAudience <audience-value>

SignInAudience-Wert	Wer kann sich anmelden?
`AzureADMyOrg`	Nur Benutzer in Ihrer Microsoft 365-Organisation
`AzureADMultipleOrgs`	Benutzer in einer beliebigen Microsoft 365-Organisation (Geschäfts-, Schul- oder Unikonten)
`AzureADandPersonalMicrosoftAccount`	Benutzer in jeder Microsoft 365-Organisation (Geschäfts-, Schul- oder Unikonten) und persönliche Microsoft-Konten
`PersonalMicrosoftAccount`	Nur persönliche Microsoft-Konten

Folgen Sie der Aufforderung, um in einem Browser zu öffnen https://microsoft.com/devicelogin , geben Sie den bereitgestellten Code ein, und schließen Sie den Authentifizierungsprozess ab.
Kopieren Sie die Werte für Client-ID und Authentifizierungsmandanten aus der Skriptausgabe. Sie benötigen diese Werte im nächsten Schritt.
```
SUCCESS
Client ID: 2fb1652f-a9a0-4db9-b220-b224b8d9d38b
Auth tenant: common
```

Hinweis

Beachten Sie, dass Sie keine Microsoft Graph-Berechtigungen für die App-Registrierung konfiguriert haben. Dies liegt daran, dass im Beispiel die dynamische Zustimmung verwendet wird, um bestimmte Berechtigungen für die Benutzerauthentifizierung anzufordern.

Erstellen einer JavaScript-Konsolen-App

19 Minuten verbleibend

Erstellen Sie zunächst ein neues Node.js-Projekt. Öffnen Sie Ihre Befehlszeilenschnittstelle (CLI) in einem Verzeichnis, in dem Sie das Projekt erstellen möchten. Führen Sie den folgenden Befehl aus.

npm init

Beantworten Sie die Eingabeaufforderungen, indem Sie entweder Ihre eigenen Werte angeben oder die Standardwerte akzeptieren.

Installieren von Abhängigkeiten

Bevor Sie mit dem Vorgang fortfahren, fügen Sie einige zusätzliche Abhängigkeiten hinzu, die Sie später verwenden werden.

Azure Identity-Clientbibliothek für JavaScript zum Authentifizieren des Benutzers und Abrufen von Zugriffstoken.
Microsoft Graph JavaScript-Clientbibliothek , um Aufrufe an Microsoft Graph zu senden.
isomorphic-fetch zum Hinzufügen fetch einer API zu Node.js. Dies ist eine Abhängigkeit für die JavaScript-Clientbibliothek von Microsoft Graph.
readline-sync zum Auffordern des Benutzers zur Eingabe.

Führen Sie die folgenden Befehle in Ihrer CLI aus, um die Abhängigkeiten zu installieren.

npm install @azure/identity @microsoft/microsoft-graph-client isomorphic-fetch readline-sync

Laden von Anwendungseinstellungen

In diesem Abschnitt fügen Sie dem Projekt die Details Ihrer App-Registrierung hinzu.

Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen appSettings.js , und fügen Sie den folgenden Code hinzu.

const settings = {
  clientId: 'YOUR_CLIENT_ID_HERE',
  tenantId: 'common',
  graphUserScopes: ['user.read', 'mail.read', 'mail.send'],
};

export default settings;

Aktualisieren Sie die Werte in settings gemäß der folgenden Tabelle.

Einstellung	Wert
`clientId`	Die Client-ID Ihrer App-Registrierung
`tenantId`	Wenn Sie die Option ausgewählt haben, nur Benutzern in Ihrer Organisation die Anmeldung zu gestatten, ändern Sie diesen Wert in Ihre Mandanten-ID. Übernehmen Sie andernfalls den Wert `common`.

Entwerfen der App

In diesem Abschnitt erstellen Sie ein einfaches konsolenbasiertes Menü.

Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen graphHelper.js , und fügen Sie den folgenden Platzhaltercode hinzu. Sie fügen dieser Datei in späteren Schritten weiteren Code hinzu.
```
module.exports = {};
```

Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen index.js , und fügen Sie den folgenden Code hinzu.

import { keyInSelect } from 'readline-sync';

import settings from './appSettings.js';
import {
  initializeGraphForUserAuth,
  getUserAsync,
  getUserTokenAsync,
  getInboxAsync,
  sendMailAsync,
  makeGraphCallAsync,
} from './graphHelper.js';

async function main() {
  console.log('JavaScript Graph Tutorial');

  let choice = 0;

  // Initialize Graph
  initializeGraph(settings);

  // Greet the user by name
  await greetUserAsync();

  const choices = [
    'Display access token',
    'List my inbox',
    'Send mail',
    'Make a Graph call',
  ];

  while (choice != -1) {
    choice = keyInSelect(choices, 'Select an option', { cancel: 'Exit' });

    switch (choice) {
      case -1:
        // Exit
        console.log('Goodbye...');
        break;
      case 0:
        // Display access token
        await displayAccessTokenAsync();
        break;
      case 1:
        // List emails from user's inbox
        await listInboxAsync();
        break;
      case 2:
        // Send an email message
        await sendMailToSelfAsync();
        break;
      case 3:
        // Run any Graph code
        await doGraphCallAsync();
        break;
      default:
        console.log('Invalid choice! Please try again.');
    }
  }
}

main();

Fügen Sie am Ende der Datei die folgenden Platzhaltermethoden hinzu. Sie implementieren sie in späteren Schritten.

function initializeGraph(settings) {
  // TODO
}

async function greetUserAsync() {
  // TODO
}

async function displayAccessTokenAsync() {
  // TODO
}

async function listInboxAsync() {
  // TODO
}

async function sendMailToSelfAsync() {
  // TODO
}

async function doGraphCallAsync() {
  // TODO
}

Dadurch wird ein einfaches Menü implementiert und die Auswahl des Benutzers aus der Befehlszeile gelesen.

Hinzufügen der Benutzerauthentifizierung

15 Minuten verbleibend

In diesem Abschnitt erweitern Sie die Anwendung aus der vorherigen Übung, um die Authentifizierung mit Azure AD zu unterstützen. Dies ist erforderlich, um das erforderliche OAuth-Zugriffstoken zum Aufrufen von Microsoft Graph abzurufen. In diesem Schritt integrieren Sie die Azure Identity-Clientbibliothek für JavaScript in die Anwendung und konfigurieren die Authentifizierung für die Microsoft Graph-JavaScript-Clientbibliothek.

Die Azure Identity-Bibliothek bietet eine Reihe von TokenCredential Klassen, die OAuth2-Tokenflows implementieren. Die Microsoft Graph-Clientbibliothek verwendet diese Klassen, um Aufrufe von Microsoft Graph zu authentifizieren.

Konfigurieren des Graph-Clients für die Benutzerauthentifizierung

In diesem Abschnitt verwenden Sie die DeviceCodeCredential -Klasse, um mithilfe des Gerätecodeflows ein Zugriffstoken anzufordern.

Öffnen Sie graphHelper.js , und ersetzen Sie den Inhalt durch Folgendes.

import 'isomorphic-fetch';
import { DeviceCodeCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
// prettier-ignore
import { TokenCredentialAuthenticationProvider } from
  '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';

let _settings = undefined;
let _deviceCodeCredential = undefined;
let _userClient = undefined;

export function initializeGraphForUserAuth(settings, deviceCodePrompt) {
  // Ensure settings isn't null
  if (!settings) {
    throw new Error('Settings cannot be undefined');
  }

  _settings = settings;

  _deviceCodeCredential = new DeviceCodeCredential({
    clientId: settings.clientId,
    tenantId: settings.tenantId,
    userPromptCallback: deviceCodePrompt,
  });

  const authProvider = new TokenCredentialAuthenticationProvider(
    _deviceCodeCredential,
    {
      scopes: settings.graphUserScopes,
    },
  );

  _userClient = Client.initWithMiddleware({
    authProvider: authProvider,
  });
}

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

function initializeGraph(settings) {
  initializeGraphForUserAuth(settings, (info) => {
    // Display the device code message to
    // the user. This tells them
    // where to go to sign in and provides the
    // code to use.
    console.log(info.message);
  });
}

Dieser Code deklariert zwei private Eigenschaften, ein DeviceCodeCredential -Objekt und ein Client -Objekt. Die initializeGraphForUserAuth -Funktion erstellt eine neue Instanz von DeviceCodeCredentialund verwendet diese Instanz dann, um eine neue Instanz von Clientzu erstellen. Jedes Mal, wenn ein API-Aufruf an Microsoft Graph über _userClienterfolgt, werden die bereitgestellten Anmeldeinformationen verwendet, um ein Zugriffstoken abzurufen.

Testen von DeviceCodeCredential

Fügen Sie als Nächstes Code hinzu, um ein Zugriffstoken DeviceCodeCredentialvon abzurufen.

Fügen Sie graphHelper.jsdie folgende Funktion hinzu.

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

  // Ensure scopes isn't undefined
  if (!_settings?.graphUserScopes) {
    throw new Error('Setting "scopes" cannot be undefined');
  }

  // Request token with given scopes
  const response = await _deviceCodeCredential.getToken(
    _settings?.graphUserScopes,
  );
  return response.token;
}

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

async function displayAccessTokenAsync() {
  try {
    const userToken = await getUserTokenAsync();
    console.log(`User token: ${userToken}`);
  } catch (err) {
    console.log(`Error getting user access token: ${err}`);
  }
}

Führen Sie den folgenden Befehl in Ihrer CLI im Stammverzeichnis Ihres Projekts aus.
```
node index.js
```

Geben Sie ein 1 , wenn Sie zur Eingabe einer Option aufgefordert werden. Die Anwendung zeigt eine URL und den Gerätecode an.

JavaScript Graph Tutorial

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

Select an option [1...4 / 0]: 1
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and
enter the code RK987NX32 to authenticate.

Öffnen Sie einen Browser, und navigieren Sie zu der angezeigten URL. Geben Sie den angegebenen Code ein, und melden Sie sich an.

Wichtig

Achten Sie auf vorhandene Microsoft 365-Konten, die bei Ihrem Browser angemeldet sind, wenn Sie zu https://microsoft.com/deviceloginnavigieren. Verwenden Sie Browserfeatures wie Profile, Gastmodus oder privaten Modus, um sicherzustellen, dass Sie sich als das Konto authentifizieren, das Sie zu Testzwecken verwenden möchten.
Kehren Sie nach Abschluss des Vorgangs zur Anwendung zurück, um das Zugriffstoken anzuzeigen.

Tipp

Nur zu Validierungs- und Debugzwecken können Sie Benutzerzugriffstoken (nur für Geschäfts-, Schul- oder Unikonten) decodieren, indem Sie den Onlinetokenparser von Microsoft unter verwendenhttps://jwt.ms. Dies kann nützlich sein, wenn beim Aufrufen von Microsoft Graph Tokenfehler auftreten. Beispielsweise wird überprüft, ob der scp Anspruch im Token die erwarteten Microsoft Graph-Berechtigungsbereiche enthält.

Benutzer abrufen

12 Minuten verbleibend

In diesem Abschnitt integrieren Sie Microsoft Graph in die Anwendung. Sie verwenden die Microsoft Graph-JavaScript-Clientbibliothek , um Aufrufe an Microsoft Graph zu senden.

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

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

  // Only request specific properties with .select()
  return _userClient
    .api('/me')
    .select(['displayName', 'mail', 'userPrincipalName'])
    .get();
}

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

async function greetUserAsync() {
  try {
    const user = await getUserAsync();
    console.log(`Hello, ${user?.displayName}!`);
    // For Work/school accounts, email is in mail property
    // Personal accounts, email is in userPrincipalName
    console.log(`Email: ${user?.mail ?? user?.userPrincipalName ?? ''}`);
  } catch (err) {
    console.log(`Error getting user: ${err}`);
  }
}

Wenn Sie die App jetzt ausführen, werden Sie nach der Anmeldung in der App mit dem Namen begrüßt.

Hello, Megan Bowen!
Email: MeganB@contoso.com

Code erläutert

Betrachten Sie den Code in der getUserAsync Funktion. Es sind nur wenige Zeilen, aber es sind einige wichtige Details zu beachten.

Zugreifen auf "me"

Die Funktion wird an den Anforderungs-Generator _userClient.api übergeben/me, der eine Anforderung an die Get-Benutzer-API erstellt. Auf diese API kann auf zwei Arten zugegriffen werden:

GET /me
GET /users/{user-id}

In diesem Fall ruft der Code den GET /me API-Endpunkt auf. Dies ist eine Verknüpfungsmethode, um den authentifizierten Benutzer abzurufen, ohne seine Benutzer-ID zu kennen.

Hinweis

Da der GET /me API-Endpunkt den authentifizierten Benutzer abruft, ist er nur für Apps verfügbar, die die Benutzerauthentifizierung verwenden. Reine App-Authentifizierungs-Apps können nicht auf diesen Endpunkt zugreifen.

Anfordern bestimmter Eigenschaften

Die Funktion verwendet die select -Methode für die Anforderung, um die benötigten Eigenschaften anzugeben. Dadurch wird dem API-Aufruf der Abfrageparameter $select hinzugefügt.

Stark typisierter Rückgabetyp

Die Funktion gibt ein User Objekt zurück, das aus der JSON-Antwort der API deserialisiert wurde. Da der Code verwendet select, verfügen nur die angeforderten Eigenschaften über Werte im zurückgegebenen User Objekt. Alle anderen Eigenschaften verfügen über Standardwerte.

Posteingang auflisten

10 Minuten verbleibend

In diesem Abschnitt fügen Sie die Möglichkeit hinzu, Nachrichten im E-Mail-Posteingang des Benutzers aufzulisten.

Ö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

Code 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 wird paging verwendet, um einen Teil der Ergebnisse zurückzugeben, während clients eine Methode zum Anfordern der nächsten "Seite" bereitstellen.

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 getInboxAsyncwird dies mit der .top(25) -Methode erreicht.

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). Es enthält das DESC Schlüsselwort, sodass kürzlich empfangene Nachrichten zuerst aufgeführt werden. Dadurch wird dem API-Aufruf der abfrageparameter $orderby hinzugefügt.

Nachrichten senden

7 Minuten verbleibend

In diesem Abschnitt fügen Sie 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 Nichtzustellbarkeitsbericht. Wenden Sie sich in diesem Fall über das 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.

Code erläutert

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 dies mit der Clientbibliothek zu tun, erstellen Sie eine Instanz der -Klasse, die die Daten darstellt (in diesem Fall ), Messagelegen Sie die gewünschten Eigenschaften fest und senden sie dann im API-Aufruf. Da der Aufruf Daten sendet, wird die post -Methode anstelle von getverwendet.

Optional: Fügen Sie Ihren eigenen Code hinzu.

5 Minuten verbleibend

In diesem Abschnitt fügen Sie der Anwendung Ihre eigenen Microsoft Graph-Funktionen hinzu. Dies kann ein Codeausschnitt aus der Microsoft Graph-Dokumentation oder graph-Explorer oder code sein, den Sie erstellt haben. Dieser Abschnitt ist optional.

Aktualisieren der App

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

// This function serves as a playground for testing Graph snippets
// or other code
export async function makeGraphCallAsync() {
  // INSERT YOUR CODE HERE
}

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

async function doGraphCallAsync() {
  try {
    await makeGraphCallAsync();
  } catch (err) {
    console.log(`Error making Graph call: ${err}`);
  }
}

Auswählen einer API

Suchen Sie eine API in Microsoft Graph, die Sie ausprobieren möchten. Beispiel: Die Api zum Erstellen eines Ereignisses . Sie können eines der Beispiele in der API-Dokumentation verwenden, oder Sie können eine API-Anforderung im Graph-Explorer anpassen und den generierten Codeausschnitt verwenden.

Konfigurieren von Berechtigungen

Überprüfen Sie den Abschnitt Berechtigungen der Referenzdokumentation für Die ausgewählte API, um zu sehen, welche Authentifizierungsmethoden unterstützt werden. Einige APIs unterstützen z. B. keine reinen Apps oder persönlichen Microsoft-Konten.

Um eine API mit Benutzerauthentifizierung aufzurufen (wenn die API die benutzerdelegierte Authentifizierung unterstützt), fügen Sie den erforderlichen Berechtigungsbereich in appSettings.jshinzu.
Informationen zum Aufrufen einer API mit nur app-Authentifizierung finden Sie im Tutorial zur reinen App-Authentifizierung .

Fügen Sie Ihren Code hinzu

Kopieren Sie Ihren Code in die makeGraphCallAsync Funktion in graphHelper.js. Wenn Sie einen Codeausschnitt aus der Dokumentation oder dem Graph-Explorer kopieren, müssen Sie den client_userClientin umbenennen.

Freigeben über

Erstellen von JavaScript-Apps mit Microsoft Graph

Voraussetzungen

Registrieren der App im Portal

Registrieren der Anwendung für die Benutzerauthentifizierung

Erstellen einer JavaScript-Konsolen-App

Installieren von Abhängigkeiten

Laden von Anwendungseinstellungen

Entwerfen der App

Hinzufügen der Benutzerauthentifizierung

Konfigurieren des Graph-Clients für die Benutzerauthentifizierung

Testen von DeviceCodeCredential

Benutzer abrufen

Code erläutert

Zugreifen auf "me"

Anfordern bestimmter Eigenschaften

Stark typisierter Rückgabetyp

Posteingang auflisten

Code erläutert

Zugreifen auf bekannte E-Mail-Ordner

Zugreifen auf eine Sammlung

Standardseitengrößen

Abrufen nachfolgender Seiten

Sortieren von Sammlungen

Nachrichten senden

Code erläutert

Senden von E-Mails

Erstellen von Objekten

Optional: Fügen Sie Ihren eigenen Code hinzu.

Aktualisieren der App

Auswählen einer API

Konfigurieren von Berechtigungen

Fügen Sie Ihren Code hinzu

Herzlichen Glückwunsch!

Microsoft Graph-Toolkit

TypeScript/JavaScript-Beispiele