Testen einer clientseitigen JavaScript-Webanwendung, die Microsoft Graph aufruft

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie mit dev proxy eine clientseitige JavaScript-Beispielwebanwendung testen, die Microsoft Graph aufruft.

Voraussetzungen

In diesem Teil des Tutorials wird davon ausgegangen, dass Sie den Dev Proxy auf Ihrem Computer installiert und konfiguriert haben. Wenn nicht, tun Sie dies jetzt.

Für dieses Tutorial benötigen Sie Folgendes:

Tipp

Es wird empfohlen, einen Microsoft 365 Developer-Mandanten mit installierten Inhaltspaketen zu verwenden. Holen Sie sich Ihren kostenlosen Mandanten, indem Sie sich beim Microsoft 365 Developer Program registrieren.

Klonen und Konfigurieren der Beispiel-App

Starten des Dev-Proxys

Der Dev Proxy enthält eine voreingestellte Konfiguration zum Testen von Apps, die Anforderungen an Microsoft Graph- und SharePoint Online-APIs senden.

  • Öffnen Sie eine Eingabeaufforderung, und drücken Sie devproxy --config-file "~appFolder/presets/m365.json" die EINGABETASTE , um dev proxy with configuration for Microsoft 365 (Dev Proxy with configuration for Microsoft 365) zu starten.

Starten der Beispiel-App

  • Öffnen Sie eine Eingabeaufforderung, und wechseln Sie zum samples Verzeichnis.
  • Geben Sie ein npx lite-server , und drücken Sie die EINGABETASTE , um den Beispiel-App-Webserver zu starten.

Screenshot der Beispiel-App, die im Microsoft Edge-Browser unter macOS ausgeführt wird. Die App zeigt ein großes Microsoft-Logo mit zwei Schaltflächen darunter an. Eine primäre Schaltfläche mit dem Text

Testen der Beispiel-App

  1. Wählen Sie in der ausgeführten App die Without SDK Schaltfläche aus.

Achtung

Wenn Sie nach dem Klicken auf die Without SDK Schaltfläche eine leere Seite erhalten haben, überprüfen Sie, ob Sie die Azure AD-App-Registrierung konfiguriert haben. Das Problem tritt auf, wenn die .env Datei, die die Client ID ihrer App-Registrierung enthält, fehlt.

  1. Wählen Sie die Login Schaltfläche aus, und schließen Sie den Anmeldeflow ab.

Screenshot der Beispiel-App, die im Microsoft Edge-Browser auf Windows 11 ausgeführt wird. Die App zeigt ein großes Microsoft-Logo mit zwei Schaltflächen darunter an. Eine primäre Schaltfläche mit dem Text

Der Dev Proxy führt zu Fehlern in Ihre Anwendung, indem Anforderungen an Microsoft Graph abgefangen werden. Es verwendet eine 50-Prozent-Wahrscheinlichkeiten für fehlerhafte Anforderungen mit einem zufällig unterstützten HTTP-Fehler status Code.

Zeigen Sie die Proxyausgabe an, und nehmen Sie sich einen Moment Zeit, um die Beispiel-App zu aktualisieren. Sehen Sie sich an, wie die Beispiel-App die vom Proxy eingeführten Fehler behandelt (oder nicht, in diesem Fall).

Screenshot der Beispiel-App, die in Microsoft Edge ausgeführt wird. Benutzer-Avatare werden in der App nicht angezeigt. Die Microsoft Edge-Entwicklertools sind auf der Seite geöffnet, und Fehler werden im Konsolenprotokoll angezeigt.

  1. Drücken Sie STRG + C , um den Dev-Proxy zu beenden.

Nächster Schritt

Erkunden von Anleitungen