Erstellen von Produktivitäts-Apps mit dem Microsoft Graph-Toolkit

2025-06-12

Das Microsoft Graph-Toolkit ist eine Sammlung von Webkomponenten und Authentifizierungsanbietern zum Verbinden von Apps mit Microsoft 365-Daten und -Intelligenz. In diesem Tutorial erfahren Sie, wie Sie eine Webanwendung erstellen, um Ihre Kalenderereignisse, Aufgaben und Dateien mithilfe von Microsoft Graph Toolkit-Komponenten und einem MSAL2-Anbieter zu überwachen.

Wie funktioniert das Beispiel?

In diesem Beispiel wird eine Web-App erstellt, die den MICROSOFT Graph Toolkit MSAL2-Anbieter nutzt, um die Authentifizierung über Microsoft Entra ID zu aktivieren, und benutzeroberflächenbasierte Komponenten verwendet, um Kalenderereignisse, Aufgaben und Dateien zu rendern, die wie native Microsoft-Umgebungen aussehen und sich anfühlen.

Screenshot: One Productivity Hub-Beispiel

Voraussetzungen

Sie benötigen einen Microsoft 365-Entwicklermandanten. Sie können sich über das Microsoft 365-Entwicklerprogramm für eins 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.
Installieren Sie Visual Studio Code.
Installieren Sie Visual Studio Code Live Server , um Ihre Web-App zu testen.

Registrieren der Anwendung in Microsoft Entra ID

Registrieren Sie die Anwendung im Microsoft Entra ID, um die Benutzerauthentifizierung zu aktivieren.

Wechseln Sie zum Microsoft Entra Admin Center, und melden Sie sich mit Ihrem Microsoft 365 Developer Program-Mandanten an.
Erweitern Sie das Menü >Identität, erweitern Sie Anwendungen> und wählen Sie App-Registrierungen>Neue Registrierung aus.
Füllen Sie das Formular Anwendung registrieren mit den folgenden Werten aus, und wählen Sie dann Registrieren aus.
- Name: Demo eines Produktivitätshubs
- Unterstützte Kontotypen: Konten in einem beliebigen Organisationsverzeichnis (beliebiges Microsoft Entra Verzeichnis – mehrinstanzenfähig) und persönliche Microsoft-Konten (z. B. Skype, Xbox)
- Umleitungs-URI: Wählen Sie Single-Page Application (SPA) als Typ von Umleitungs-URI aus, und fügen http://localhost:3000/index.html Sie sie als Umleitungs-URI ein, um lokal zu testen.
Wenn die App-Registrierung abgeschlossen ist, wechseln Sie auf der Anwendungsseite zur Registerkarte Übersicht, und kopieren Sie die Anwendungs-ID (Client-ID). Sie benötigen diese ID für den folgenden Schritt.

Erstellen der Anwendung

In diesem Schritt erstellen Sie eine Web-App und aktivieren die Authentifizierung beim MSAL2-Anbieter des Microsoft Graph-Toolkits.

Erstellen einer Web-App

Erstellen Sie einen neuen Ordner, und nennen Sie ihn OneProductivityHub. Klicken Sie mit der rechten Maustaste, und öffnen Sie den Ordner mit Visual Studio Code.
Erstellen Sie eine neue Datei im Ordner OneProductivityHub , und benennen Sie sie index.html.
Wählen Sie in den Optionen HTML-Beispiel aus, und wählen Sie CTRL + SPACE es aus.

Um die Authentifizierung mit dem Microsoft Graph-Toolkit über ein CDN zu aktivieren, fügen Sie das folgende Skripttag in index.html im <body></body> Abschnitt hinzu:

<script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
</script>

Initialisieren des MSAL2-Anbieters

Fügen Sie inindex.htmlden MSAL2-Anbieter im <body></body> Abschnitt wie folgt hinzu:
```
<mgt-msal2-provider
    client-id="<YOUR_CLIENT_ID>"
    scopes="User.Read,
    User.ReadBasic.All,
    Calendars.Read,
    Files.Read,
    Files.Read.All,
    Sites.Read.All,
    Tasks.Read,
    Tasks.ReadWrite,
    People.Read">
</mgt-msal2-provider>
```
Wichtig

Die folgenden Bereiche, die im Anbieter definiert sind, werden als Liste der erforderlichen Berechtigungen zum Anfordern der Zustimmung des Benutzers während des Authentifizierungsprozesses angezeigt: User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read.
Ersetzen Sie durch <YOUR_CLIENT_ID> die Client-ID, die Sie aus der Microsoft Entra Anwendung kopiert haben.

Stellen Sie sicher, dass die endgültige Version von index.html dem folgenden Beispiel ähnelt:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>One Productivity Hub</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>
  <script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
  </script>
  <mgt-msal2-provider
      client-id="<YOUR_CLIENT_ID>"
      scopes="User.Read,
      User.ReadBasic.All,
      Calendars.Read,
      Files.Read,
      Files.Read.All,
      Sites.Read.All,
      Tasks.Read
      Tasks.ReadWrite,
      People.Read">
  </mgt-msal2-provider>
</body>
</html>

Entwerfen der Anwendung

In diesem Schritt entwerfen Sie Ihre Web-App mithilfe von Komponenten des Microsoft Graph-Toolkits und gestalten sie mit CSS.

Fügen Sie inindex.html im <body></body>Abschnitt den folgenden Code unter dem Anbieter hinzu.

<div>
  <mgt-login />
</div>

Erstellen eines Titels und einer Spalte für die restlichen Komponenten

Damit Ihre App strukturiert aussieht, erstellen Sie einen Titel und eine Spalte für jedes Feature, das im One Productivity Hub hinzugefügt wird. Fügen Sie inindex.html unter <body></body>den folgenden HTML-Code in div unter der Anmeldekomponente hinzu.

<div class="features">

  <div class="header"><div class="title">
    <h2>One Productivity Hub</h2>
    <div class="row">
      <div class="column"><h3>Calendar events</h3></div>
      <div class="column"><h3>To-do tasks</h3></div>
      <div class="column"><h3>Files</h3></div>
    </div>
  </div></div>

  <div class="row" id="content">
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
  </div>

</div>

Agendakomponente

Fügen Sie unter dem mit class="row"markierten div die Komponente Agenda in der ersten Spalte div hinzu.

<mgt-agenda />

To-Do-Komponente

Fügen Sie unter dem mit class="row"markierten div die To-do-Komponente in der zweiten Spalte div hinzu.

<mgt-todo />

FileList-Komponente

Fügen Sie unter dem mit class="row"gekennzeichneten div die Dateilistenkomponente in der dritten Spalte div hinzu.

<mgt-file-list />

Formatieren Ihrer Web-App mit CSS

Erstellen Sie eine index.css-Datei unter Ihrem Projekt, und fügen Sie den folgenden CSS-Code hinzu.

body,
#root>div {
    background-color: #F3F2F1;
}
.features {
    min-height: 80vh;
    margin: 20px;
    background-color: #FFF;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
    display: flex;
    background-color: #f0f0f0;
}
.title {
    margin-top: 20px;
    margin-left: 10px;
    width: 100%;
}
.title h2 {
    font-size: 24px;
    padding-left: 5px;
    display: inline;
    font-weight: 600;
}
.title h3 {
    float: left;
    width: 32%;
    background:transparent;
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    color: #8A8886;
    font-weight: 600;
}
mgt-login {
    margin-left: 20px;
    --avatar-size: 60px;
    --font-family: 'Segoe UI';
    --font-size: 20px;
    --font-weight: 700;
    --color: black;
    --text-transform: none;
    --line2-font-size: 14px;
    --line2-font-weight: 400;
    --line2-color: #8A8886;
    --line2-text-transform: none;
}
#content, html, body {
    height: 98%;
  }
#mgt-col {
  float: left;
  width: 32%;
  background:transparent;
  height:500px;
  overflow: hidden;
  padding: 5px;
  margin-top: 5px;
}
#mgt-col:hover {
  overflow-y: auto;
}

Definieren Sie inindex.html in <head></head>den Stylesheetlink href als index.css.
```
<link rel='stylesheet' type='text/css' media='screen' href='index.css'>
```

Stellen Sie sicher, dass die endgültige Version von index.html der folgenden ähnelt.

<!DOCTYPE html>
  <html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>One Productivity Hub</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>
    <script src='main.js'></script>
  </head>
  <body>
    <script type="module">
      import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
      registerMgtMsal2Provider();
      registerMgtComponents();
    </script>
    <mgt-msal2-provider
        client-id="<YOUR_CLIENT_ID>"
        scopes="User.Read,
        User.ReadBasic.All,
        Calendars.Read,
        Files.Read,
        Files.Read.All,
        Sites.Read.All,
        Tasks.Read,
        Tasks.ReadWrite,
        People.Read">
    </mgt-msal2-provider>
    <div>
      <mgt-login />
    </div>
    <div class="features">
        <div class="header">
            <div class="title">
                <h2>One Productivity Hub</h2>
                <div class="row">
                    <div class="column"><h3>Calendar events</h3></div>
                    <div class="column"><h3>To-do tasks</h3></div>
                    <div class="column"><h3>Files</h3></div>
                </div>
            </div>
        </div>
        <div class="row" id="content">
            <div class="column" id="mgt-col"><mgt-agenda /></div>
            <div class="column" id="mgt-col"><mgt-todo /></div>
            <div class="column" id="mgt-col"><mgt-file-list /></div>
        </div>
    </div>
  </body>
</html>

Ausführen der Anwendung

In diesem Schritt führen Sie Ihre Beispiel-App im Browser mithilfe von Live Server aus.

Wählen Sie aus CTRL + SHIFT + P , um den Bereich in Visual Studio Code zu öffnen, geben Sie Preferences in den Bereich ein, und wählen Sie Preferences: Open Workspace Settings (JSON) aus den Optionen aus.
Fügen Sie in der settings.json datei, die geöffnet wird, den folgenden Code hinzu.
```
{
"liveServer.settings.host": "localhost",
"liveServer.settings.port": 3000
}
```
Wählen Sie aus CTRL + SHIFT + P , um den Bereich in Visual Studio Code zu öffnen, geben Sie Live Server in den Bereich ein, und wählen Sie Live Server: Open with Live Server aus den Optionen aus. Live Server führt die App in Ihrem Browser aus.
Wählen Sie Anmelden aus, und verwenden Sie Ihren Microsoft 365 Developer Program-Mandanten, um sich anzumelden.
Stimmen Sie den erforderlichen Berechtigungen zu, um die Anwendungsfeatures wie das Anzeigen von Kalenderereignissen, Aufgaben und Dateiordnern zu verwenden.
Um sicherzustellen, dass die One Productivity Hub-App ordnungsgemäß funktioniert, fügen Sie einige Kalenderereignisse, Aufgaben und Dateiordner in Ihrem Microsoft 365 Developer-Mandanten hinzu.

Sie haben Ihre One Productivity Hub-Beispiel-App erfolgreich mit dem Microsoft Graph-Toolkit erstellt. In diesem Tutorial haben Sie eine Web-App erstellt und den MSAL2-Anbieter und die Benutzeroberflächenkomponenten des Microsoft Graph-Toolkits genutzt.