Übung – Verwenden von Microsoft Graph in Ihrer Webanwendung zum Abrufen des Profilfotos eines Benutzers

  • 10 Minuten

Sie haben alle Konzepte gelernt, die für den Zugriff auf das Profil eines Benutzers mithilfe von Microsoft Graph erforderlich sind. Jetzt ist es Zeit zum Erstellen einer Kundenanwendung, mit der das Foto eines angemeldeten Vertriebsmitarbeiters abgerufen und angezeigt wird.

Um diese Einheit erfolgreich abschließen zu können, benötigen Sie ein Benutzerkonto (z. B. von Ihrem Microsoft 365-Entwickler-Mandanten) mit einem Profilbild, das in der Anwendung verwendet werden kann.

Einrichten der App

In dieser Übung greifen Sie auf ein GitHub-Repository zu, fügen der App Microsoft Entra-IDs hinzu und fügen Code hinzu, um mithilfe von Microsoft Graph auf ein Foto zuzugreifen. Wenn Sie noch keine Microsoft Entra-App-Registrierung erstellt haben, schließen Sie das Erforderliche Modul ab, bevor Sie fortfahren.

  1. Um den anfänglichen App-Code abzurufen, den Sie in dieser Übung verwenden, wählen Sie aus einer der folgenden Optionen aus:

    Wenn Sie Git verwenden, klonen Sie das Projekt mithilfe des git clone-Befehls:

    git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git

    Wenn Sie Git nicht verwenden, wechseln Sie im Webbrowser zu https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart. Wählen Sie die Schaltfläche Code gefolgt von ZIP-Datei herunterladen. Extrahieren Sie die ZIP-Datei auf Ihrem Computer.

  2. Öffnen Sie den Ordner in Ihrem Code-Editor.

  3. Die Anwendung beinhaltet folgende Dateien:

    • index.html: Definiert die Oberfläche, die Benutzern angezeigt wird, wenn sie auf die Website zugreifen. Es lädt das MSAL-Skript (Microsoft Authentication Library) und benutzerdefinierte Anwendungsskripts, bietet eine Möglichkeit für einen Benutzer zur Anmeldung und zeigt den Namen des Benutzers nach der Anmeldung an.
    • auth.js: Definiert die MSAL-Konfiguration, um die Anwendung der Microsoft Entra-ID zuzuordnen, meldet einen Benutzer bei der Anwendung an und verarbeitet das Abrufen eines Zugriffstokens, das Microsoft Graph verwenden kann.
    • graph.js: Ruft Microsoft 365 auf, um auf das angemeldete /me-Profil zuzugreifen. Es basiert auf auth.js, um das Zugriffstoken abzurufen, das für das Aufrufen der Microsoft Graph-API verwendet wird.
    • ui.js: Behandelt Elemente der Benutzeroberfläche, die in index.html definiert sind.

  4. Öffnen Sie die auth.js-Datei , und suchen Sie die Konstante msalConfig:

    const msalConfig = {
  auth: { .. }
}

  5. Ersetzen Sie den Wert der clientId Eigenschaft durch den kopierten Wert der Anwendungs-ID (Client) aus der Microsoft Entra-Anwendung (spa-aad-app), die Sie zuvor registriert haben. Sie können diesen Wert auf der Übersichtsseite der Microsoft Entra-Anwendung (spa-aad-app) abrufen.

  6. Suchen Sie in derselben auth.js-Datei nach der msalConfig.auth.authority -Eigenschaft. Ersetzen Sie den <your directory ID here> Wert durch den Wert directory (tenant) ID der Microsoft Entra-Anwendung (spa-aad-app), die Sie zuvor registriert haben. Sie können diesen Wert auf der Übersichtsseite der Microsoft Entra-Anwendung (spa-aad-app) abrufen.

    Die msalConfig Konstante sollte in etwa wie der folgende Code mit den eindeutigen IDs ihres Microsoft Entra-Mandanten und der registrierten Anwendung aussehen:

    const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};

  7. Öffnen Sie die Datei index.html. Suchen Sie die Zeile <h4>Welcome <span id="userName"></span></h4>, und fügen Sie den folgenden Code unmittelbar danach hinzu:

    <div>
  <button id="showProfilePhoto" style="display:none" onclick="displayProfilePhoto();">Show profile picture</button>
</div>
<img id="userPhoto" class="user" alt="User photo" style="display: none;" />

  8. Suchen Sie in derselben index.html-Datei das <head>-Tag. Fügen Sie den folgenden Code hinzu, um das Bildelement zu formatieren, das Sie im vorherigen Schritt hinzugefügt haben:

    <style>
.user {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  height: 150px;
  width: 150px;
}
</style>

  9. Speichern Sie die index.html-Datei.

  10. Öffnen Sie die graph.js-Datei. Fügen Sie eine neue Funktion namens getUserPhoto() der Datei hinzu, wie im folgenden Code dargestellt. Diese Funktion wird das Foto des angemeldeten Benutzers mithilfe des /me/photo/$value Microsoft Graph-API-Endpunkts abrufen.

    async function getUserPhoto() {
   ensureScope('user.read');
    return await graphClient
        .api('/me/photo/$value')
        .get();
}

  11. Speichern Sie die graph.js-Datei.

  12. Öffnen Sie die ui.js-Datei, und fügen Sie eine neue Funktion namens displayProfilePhoto() hinzu, wie im folgenden Code dargestellt. Diese Funktion zeigt die von Microsoft Graph empfangene Bildantwort in dem zuvor erstellten Bildelement an.

    async function displayProfilePhoto() {
  const userPhoto = await getUserPhoto();
  if (!userPhoto) {
      return;
  }

  //convert blob to a local URL
  const urlObject = URL.createObjectURL(userPhoto);
  // show user photo
  const userPhotoElement = document.getElementById('userPhoto');
  userPhotoElement.src = urlObject;
  var showPhotoButton= document.getElementById('showProfilePhoto');
  showPhotoButton.style = "display: none";
  var imgPhoto= document.getElementById('userPhoto');
  imgPhoto.style = "display: block";
}

  13. Öffnen Sie die ui.js-Datei, und fügen Sie den folgenden Code am Ende der vorhandenen displayUI()-Funktion an. Dieser Code zeigt eine Schaltfläche an, die ein angemeldeter Benutzer auswählen kann, um sein Profilfoto anzeigen zu können. Die Schaltfläche bleibt ausgeblendet, wenn der Benutzer nicht angemeldet ist.

    var showPhotoButton= document.getElementById('showProfilePhoto');
showPhotoButton.style = "display: block";

Nachdem Sie die zusätzlichen Funktionen und Codeausschnitte hinzugefügt haben, um das Foto für einen angemeldeten Benutzer zu erhalten, besteht der nächste Schritt im Ausführen der App.

Ausführen Ihrer App

Sie haben jetzt Ihre App erweitert, um einige Dateien des Benutzers mittels Microsoft Graph anzuzeigen. Stellen Sie sicher, dass sich einige Dateien im Stammverzeichnis der OneDrive-Instanz des Benutzers befinden, und führen Sie die App dann lokal aus.

  1. Führen Sie eine Vorschau der Web-App aus, 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. Stellen Sie sicher, dass das Konto, mit dem Sie sich anmelden, über ein Profilfoto verfügt.

    Screenshot der Anmeldeschaltfläche.

  4. Melden Sie sich mit einem Konto im selben Microsoft 365-Entwicklermandanten an, in dem Sie die Microsoft Entra-Anwendung registriert haben.

  5. Nachdem Sie sich erfolgreich angemeldet haben, bestätigen Sie, dass eine Begrüßungsnachricht und eine Schaltfläche zum Anzeigen eines Profilfotos angezeigt werden.

    Screenshot der Schaltfläche zum Anzeigen des Profilbilds.

  6. Wählen Sie die Schaltfläche Profilbild anzeigen aus. Das Profilbild des angemeldeten Benutzers wird angezeigt. Wenn dem Profil kein Foto zugeordnet ist, wird kein Foto angezeigt.

    Screenshot eines Profilbilds.