Fournisseur personnalisé

Si vous avez du code d’authentification existant dans votre application, vous pouvez créer un fournisseur personnalisé pour activer l’authentification et l’accès aux composants Microsoft Graph for Microsoft Graph Shared Computer Toolkit. Il existe deux façons de créer des fournisseurs personnalisés :

• Créer une nouvelle fonction SimpleProvider en passant une fonction pour obtenir un jeton d’accès
• Étendre la classe IProvider abstraite

Cet article décrit chaque approche plus en détail.

SimpleProvider

Ins instantiate the SimpleProvider class by passing in a function that will return an access token for passed-in scopes.

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

En outre, vous pouvez également login logout fournir une fonction facultative qui peut gérer les appels de connexion et de connexion à partir du composant de connexion.

Important

Pour indiquer aux composants qu’ils peuvent commencer à appeler les API Microsoft Graph une fois qu’un utilisateur s’est correctement Graph, vous devez appeler Providers.setState(ProviderState.SignedIn). La fonction ci-dessous en montre login un exemple.

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);

Gérer l’état

Pour que les composants connaissent l’état du fournisseur, provider.setState(state: ProviderState) vous devez appeler la méthode chaque fois que l’état change. Par exemple, lorsque l’utilisateur s’est inscrit, appelez provider.setState(ProviderState.SignedIn). L’énumération ProviderState définit trois statuts, tel qu’illustré.

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProvider

Vous pouvez étendre la classe IProvider abstraite pour créer votre propre fournisseur.

État

Un fournisseur doit suivre l’état d’authentification et mettre à jour les composants lorsque l’état change. La IProvider classe implémente déjà le onStateChanged(eventHandler) handler et la state: ProviderState propriété. Il vous suffit d’utiliser la méthode setState(state:ProviderState) dans votre implémentation pour mettre à jour l’état lorsqu’il change. La mise à jour de l’état entraîne le feu de stateChanged l’événement et la mise à jour automatique de tous les composants.

Connexion/Ouverture de session

Si votre fournisseur fournit des fonctionnalités de connexion ou de connexion, implémentez les login(): Promise<void> méthodes logout(): Promise<void> et les méthodes. Ces méthodes sont facultatives.

Access token (Jeton d’accès)

Vous devez implémenter la getAccessToken({'scopes': scopes[]}) : Promise<string> méthode. Cette méthode permet d’obtenir un jeton valide avant chaque appel à Microsoft Graph.

Graph

Les composants utilisent le SDK JavaScript microsoft Graph pour tous les appels à Microsoft Graph. Votre fournisseur doit rendre le SDK disponible via la graph propriété. Dans votre constructeur, créez une Graph instance, comme illustré.

this.graph = new Graph(this);

La Graph classe est un wrapper clair au-dessus du SDK Microsoft Graph.

Exemple

Tous les fournisseurs étendent la classe IProvider abstraite. Pour obtenir des exemples, jetez un œil au code source de l’un des fournisseurs existants.

Définir le fournisseur global

Les composants utilisent la Providers.globalProvider propriété pour accéder à un fournisseur. Après avoir créé votre propre fournisseur, définissez cette propriété sur votre fournisseur.

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

Providers.globalProvider = myProvider;

Tous les composants seront avertis du nouveau fournisseur et commenceront à l’utiliser.