Teilen über

Erste Schritte mit Microsoft Graph-Toolkit

  • Artikel

Microsoft Graph Toolkit-Komponenten können ganz einfach zu Ihrer Webanwendung, SharePoint-Webpart oder Microsoft Teams-Registerkarten hinzugefügt werden. Die Komponenten basieren auf Webstandards und können sowohl in einfachen JavaScript-Projekten als auch mit gängigen Webframeworks wie Reach, Angular und Vue.js verwendet werden.

Sehen Sie sich dieses kurze Video an, um mit dem Toolkit zu beginnen.

Ein schritt-für-Schritt-Tutorial finden Sie im Modul Erste Schritte mit dem Microsoft Graph-Toolkit .

Richten Sie Ihren Microsoft 365-Mandanten ein.

Um das Microsoft Graph-Toolkit zum Entwickeln einer App zu verwenden, benötigen Sie Zugriff auf einen Microsoft 365-Mandanten. 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.

Einrichten der Entwicklungsumgebung

Für die Entwicklung mit dem Toolkit benötigen Sie Folgendes:

  • Ein Text-Editor oder eine IDE. Sie können den Editor oder die IDE Ihrer Wahl verwenden, oder Sie können Visual Studio Code kostenlos installieren und verwenden.
  • Ein moderner Webbrowser wie Microsoft Edge, Google Chrome oder Firefox.
  • Eine LTS-Version von Node.js, die Sie über nodejs.org installieren können.

Verwenden des Microsoft Graph-Toolkits

Sie können das Microsoft Graph-Toolkit in Ihrer Anwendung verwenden, indem Sie die npm Pakete installieren oder direkt auf den Ladeprogramm verweisen (über unpkg).

Die Verwendung des Toolkits über ES6-Module bietet Ihnen die vollständige Kontrolle über den Bündelungsprozess und ermöglicht es Ihnen, nur den Code zu bündeln, den Sie für Ihre Anwendung benötigen. Um die ES6-Module zu verwenden, fügen Sie ihrem Projekt die @microsoft/mgt-elementPakete , @microsoft/mgt-componentsund @microsoft/mgt-msal2-provider hinzu:

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

Um die Komponenten als benutzerdefiniertes Element in HTML verwenden zu können, müssen sie registriert werden. Um die Komponenten in Ihrem Code zu verwenden, importieren Sie die erforderliche Komponentenregistrierungsfunktion, und führen Sie sie aus. Das folgende Beispiel zeigt, wie Dies für die Agenda- und Anmeldekomponenten funktioniert:

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtLoginComponent, registerMgtAgendaComponent } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
  registerMgtAgendaComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

Als Verknüpfung können Sie die Hilfsmethode verwendenregisterMgtComponents(), wenn Sie alle Komponenten von @microsoft/mgt-componentsregistrieren möchten. Die deklarative Verwendung von Anbietern erfordert weiterhin, dass der entsprechende Anbieter separat registriert wird, da sie aus verschiedenen Paketen stammen.

<script type="module">
  import { registerMgtMsal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  registerMgtMsal2Provider();
  registerMgtComponents();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>

Wichtig

Wenn Sie mit einem strukturbasierten unterstützenden Bundler wie Webpack oder Rollup arbeiten, sollten Sie die einzelnen Komponenten importieren und registrieren. Dadurch wird sichergestellt, dass nicht verwendete Komponenten aus Ihren Builds herausgeschüttelt werden.

Sie können den Anbieter auch imperativ konfigurieren, wie im folgenden Beispiel gezeigt:

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>