Benutzerdefinierter Anbieter

Wenn Sie in Ihrer Anwendung über vorhandenen Authentifizierungscode verfügen, können Sie einen benutzerdefinierten Anbieter erstellen, um die Authentifizierung und den Zugriff auf Microsoft Graph für Microsoft Graph Toolkit-Komponenten zu aktivieren. Es gibt zwei Möglichkeiten, benutzerdefinierte Anbieter zu erstellen:

• Erstellen einer neuen SimpleProvider Funktion durch Übergeben einer Funktion zum Abrufen eines Zugriffstokens
• Erweitern der IProvider abstrakten Klasse

In diesem Artikel werden die einzelnen Ansätze ausführlicher beschrieben.

SimpleProvider

Instanziieren Sie die SimpleProvider Klasse, indem Sie eine Funktion übergeben, die ein Zugriffstoken für übergebene Bereiche zurückgibt.

let provider = new SimpleProvider((scopes: string[]) => {
  // return a promise with accessToken
});

Darüber hinaus können Sie auch eine optionale login Funktion und logout Funktionen bereitstellen, die das Anmelden und Abmelden von Aufrufen von der Anmeldekomponente verarbeiten können.

Wichtig

Um den Komponenten anzugeben, dass sie mit dem Aufrufen der Microsoft Graph-APIs beginnen können, nachdem sich ein Benutzer erfolgreich angemeldet hat, müssen Sie aufrufenProviders.setState(ProviderState.SignedIn). Ein Beispiel hierfür finden Sie in der login folgenden Funktion.

function getAccessToken(scopes: string[]) {
  // return a promise with accessToken string
}

function login() {
  //login code
  Providers.globalProvider.setState(ProviderState.SignedIn)
}

function logout() {
  // logout code
}

let provider = new SimpleProvider(getAccessToken, login, logout);

Verwalten des Status

Damit die Komponenten den Status des Anbieters erkennen können, müssen Sie die provider.setState(state: ProviderState) Methode jedes Mal aufrufen, wenn sich der Status ändert. Wenn sich der Benutzer beispielsweise angemeldet hat, rufen Sie provider.setState(ProviderState.SignedIn)auf. Die ProviderState Enumeration definiert drei Zustände, wie dargestellt.

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProvider

Sie können die IProvider abstrakte Klasse erweitern, um Einen eigenen Anbieter zu erstellen.

Status

Ein Anbieter muss den Authentifizierungsstatus nachverfolgen und die Komponenten aktualisieren, wenn sich der Status ändert. Die IProvider Klasse implementiert bereits den onStateChanged(eventHandler) Handler und die state: ProviderState Eigenschaft. Sie müssen nur die Methode in Ihrer setState(state:ProviderState) Implementierung verwenden, um den Status zu aktualisieren, wenn er sich ändert. Durch aktualisieren des Zustands wird das stateChanged Ereignis ausgelöst und alle Komponenten automatisch aktualisiert.

Anmelden/Abmelden

Wenn Ihr Anbieter Anmelde- oder Abmeldefunktionen bereitstellt, implementieren Sie die und logout(): Promise<void> die login(): Promise<void> Methoden. Diese Methoden sind optional.

Zugriffstoken

Sie müssen die getAccessToken({'scopes': scopes[]}) : Promise<string> Methode implementieren. Diese Methode wird verwendet, um vor jedem Aufruf von Microsoft Graph ein gültiges Token abzurufen.

Graph

Die Komponenten verwenden das Microsoft Graph Javascript SDK für alle Aufrufe von Microsoft Graph. Ihr Anbieter muss das SDK über die graph Eigenschaft verfügbar machen. Erstellen Sie in Ihrem Konstruktor eine neue Graph Instanz, wie dargestellt.

this.graph = new Graph(this);

Die Graph Klasse ist ein leichter Wrapper auf dem Microsoft Graph SDK.

Beispiel

Alle Anbieter erweitern die IProvider abstrakte Klasse. Beispiele: Sehen Sie sich den Quellcode für einen der vorhandenen Anbieter an.

Festlegen des globalen Anbieters

Komponenten verwenden die Providers.globalProvider Eigenschaft, um auf einen Anbieter zuzugreifen. Nachdem Sie Ihren eigenen Anbieter erstellt haben, legen Sie diese Eigenschaft auf Ihren Anbieter fest.

import { Providers } from '@microsoft/mgt';

Providers.globalProvider = myProvider;

Alle Komponenten werden über den neuen Anbieter benachrichtigt und beginnen mit der Verwendung.