Erstellen einer Webanwendung mit dem Microsoft Graph-Toolkit

  • Artikel

In diesem Thema wird beschrieben, wie Sie mit dem Microsoft Graph-Toolkit in einer Webanwendung beginnen, die in Vanilla JavaScript geschrieben wurde. Ein schritt-für-Schritt-Tutorial finden Sie im Modul Erste Schritte mit dem Microsoft Graph-Toolkit. Informationen zur Verwendung des Toolkits mit einem Webframework finden Sie unter Erstellen einer Web-App (React) oder Erstellen einer Web-App (Angular).

Die ersten Schritte mit dem Toolkit umfassen die folgenden Schritte:

  1. Fügen Sie Ihrem Projekt das Microsoft Graph-Toolkit hinzu.
  2. Initialisieren Sie den Microsoft Authentication Library 2(MSAL2)-Anbieter.
  3. Fügen Sie Komponenten hinzu.
  4. Testen Sie Ihre Anwendung.

Hinzufügen des Microsoft Graph-Toolkits zu Ihrem Projekt

Sie können das Microsoft Graph-Toolkit in Ihrer Anwendung verwenden, indem Sie die npm-Pakete installieren oder aus einem Content Delivery Network (CDN) laden.

Um das Toolkit über ein CDN zu verwenden, fügen Sie der HTML-Seite das folgende Skript und Markup hinzu:

<script type="module">
  import {
    registerMgtComponents,
    Providers,
    Msal2Provider,
  } from "https://unpkg.com/@microsoft/mgt@4";
  Providers.globalProvider = new Msal2Provider({ clientId: "[CLIENT-ID]" });
  registerMgtComponents();
</script>

Initialisieren des MSAL2-Anbieters

Die Microsoft Graph-Toolkit-Anbieter ermöglichen die Authentifizierung und den Zugriff auf Microsoft Graph für die Komponenten. Weitere Informationen finden Sie unter Verwendung der Anbieter. Der MSAL2-Anbieter verwendet MSAL-browser, um Benutzer anzumelden und Token abzurufen. Sie können diesen Anbieter in Ihrem HTML- oder JavaScript-Code initialisieren.

Hinweis: Wenn Sie derzeit den MSAL-Anbieter verwenden und ein Update auf den MSAL2-Anbieter durchführen möchten, finden Sie weitere Informationen unter Migrieren vom MSAL-Anbieter zum MSAL2-Anbieter. Wenn Sie Ihre eigene Back-End-Authentifizierung verwenden möchten, verwenden Sie den Proxyanbieter anstelle des MSAL2-Anbieters.

Sie können den Anbieter entweder in Ihrem JavaScript-Code oder HTML initialisieren.

Um den MSAL-Anbieter in Ihrem JavaScript zu initialisieren, fügen Sie Ihrer Anwendung den folgenden Code hinzu:

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

Die Client-ID ist die einzige Eigenschaft, die zum Initialisieren des Anbieters erforderlich ist, aber Sie können weitere Optionen festlegen. Eine vollständige Liste finden Sie unter MSAL2-Anbieter.

Erstellen einer App-/Client-ID

Um eine Client-ID zu erhalten, müssen Sie Ihre Anwendung in Microsoft Entra ID registrieren.

Komponenten hinzufügen

Nachdem Sie den MSAL2-Anbieter initialisiert haben, können Sie mit der Verwendung einer der Toolkit-Komponenten beginnen.

In diesem Beispiel werden die ES6-Module, der in JavaScript initialisierte MSAL2-Anbieter und die Login Komponente verwendet:

import { Providers } from "@microsoft/mgt-element";
import { registerMgtLoginComponent } from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "<mgt-login></mgt-login>";
  return element;
}

document.body.appendChild(component());

Im folgenden Beispiel werden die ES6-Module, der in HTML initialisierte MSAL2-Anbieter und die Login Komponente verwendet:

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

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

Testen eigener Apps

Um Ihre App zu testen, erfordert MSAL, dass die Seite auf einem Webserver für die Authentifizierungsumleitungen gehostet wird.

Wenn Sie gerade erst loslegen und herumspielen möchten, können Sie Live Server in Visual Studio Code oder einen ähnlichen einfachen Entwicklungsserver verwenden. Laden Sie die Erweiterung herunter, und öffnen Sie Ihre HTML-Datei mithilfe des Liveservers.

Hinweis: Stellen Sie sicher, dass der Umleitungs-URI in Ihrer App-Registrierung auf den localhost-Port festgelegt ist, auf dem Ihre Anwendung gehostet wird. Wechseln Sie im Microsoft Entra Admin Center zu Ihrer App-Registrierung, klicken Sie unter Verwalten auf Authentifizierung, und fügen Sie den richtigen Umleitungs-URI hinzu.

Nachverfolgen des Anmeldestatus eines Benutzers

Sie können erkennen, wann ein Benutzer erfolgreich angemeldet wurde, und bestimmte Komponenten entsprechend anzeigen. Zeigen Sie beispielsweise die Agendakomponente an, wenn der Benutzer angemeldet ist. Andernfalls wird die Anmeldeschnittstelle angezeigt.

Das Paket mgt-element stellt die isSignedIn Hilfsfunktion bereit, die Sie aufrufen können, um festzustellen, ob ein Benutzer angemeldet ist.

Wenn Sie das Toolkit über die npm-Pakete verwenden, können Sie und ProviderProviderState aus @microsoft/mgt-elementimportieren.

import { Providers } from "@microsoft/mgt-element";
import {
  registerMgtLoginComponent,
  registerMgtAgendaComponent,
} from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { isSignedIn } from "@microsoft/mgt-element";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();
registerMgtAgendaComponent();

const loadAgenda = () => {
  if (isSignedIn()) {
    document.getElementById("main").innerHTML = "<mgt-agenda></mgt-agenda>";
  }
};

Providers.onProviderUpdated(loadAgenda);

Nächste Schritte