Benutzerdefinierter Anbieter

Artikel
03/26/2023

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

Erstellen eines neuen SimpleProvider 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 - und logout -Funktion bereitstellen, die die Anmelde- und Abmeldeaufrufe aus der Anmeldekomponente verarbeiten kann.

Wichtig

Um den Komponenten mitzuteilen, dass sie die Microsoft Graph-APIs aufrufen können, nachdem sich ein Benutzer erfolgreich angemeldet hat, müssen Sie aufrufen Providers.setState(ProviderState.SignedIn). Ein Beispiel hierfür ist in der login folgenden Funktion dargestellt.

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 Zustands

Damit die Komponenten den Status des Anbieters kennen, müssen Sie die provider.setState(state: ProviderState) -Methode aufrufen, wenn sich der Zustand ändert. Wenn sich der Benutzer beispielsweise angemeldet hat, rufen Sie auf provider.setState(ProviderState.SignedIn). Die ProviderState Enumeration definiert drei Zustände, wie gezeigt.

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProvider

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

State

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

Anmelden/Abmelden

Wenn Ihr Anbieter Anmelde- oder Abmeldefunktionen bereitstellt, implementieren Sie die login(): Promise<void> Methoden und logout(): Promise<void> . 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 wie gezeigt eine neue Graph instance.

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 finden Sie im Quellcode für einen der vorhandenen Anbieter.

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.

Freigeben über