Fournisseur personnalisé

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

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

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

SimpleProvider

Instanciez la SimpleProvider classe en transmettant une fonction qui retournera un jeton d’accès pour les étendues passées.

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

En outre, vous pouvez également fournir des fonctions et logout facultatives login qui peuvent gérer les appels de connexion et de déconnexion à partir du composant Connexion.

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 soient conscients de l’état du fournisseur, vous devez appeler la provider.setState(state: ProviderState) méthode chaque fois que l’état change. Par exemple, lorsque l’utilisateur s’est connecté, 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 IProvider classe abstraite pour créer votre propre fournisseur.

État

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

Connexion/Déconnexion

Si votre fournisseur fournit des fonctionnalités de connexion ou de déconnexion, implémentez les login(): Promise<void> méthodes et logout(): Promise<void> . 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 est utilisée pour obtenir un jeton valide avant chaque appel à Microsoft Graph.

Graph

Les composants utilisent le Kit de développement logiciel (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 un Graph instance, comme indiqué.

this.graph = new Graph(this);

La Graph classe est un wrapper léger sur le sdk Microsoft Graph.

Exemple

Tous les fournisseurs étendent la IProvider classe abstraite. Pour obtenir des exemples, examinez le 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.