Proveedor personalizado

Si tiene código de autenticación existente en la aplicación, puede crear un proveedor personalizado para habilitar la autenticación y el acceso a los componentes de Microsoft Graph for Microsoft Graph Toolkit. Hay dos maneras de crear proveedores personalizados:

• Cree una nueva SimpleProvider pasando una función para obtener un token de acceso.
• Extensión de la IProvider clase abstracta

En este artículo se describe cada enfoque con más detalle.

SimpleProvider

Cree una instancia de la SimpleProvider clase pasando una función que devolverá un token de acceso para los ámbitos pasados.

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

Además, también puede proporcionar una función opcional login y logout que pueda controlar las llamadas de inicio de sesión y cierre de sesión desde el componente Inicio de sesión .

Importante

Para indicar a los componentes que pueden empezar a llamar a las API de Microsoft Graph después de que un usuario inicie sesión correctamente, debe llamar Providers.setState(ProviderState.SignedIn)a . Un ejemplo de esto se muestra en la login función siguiente.

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

Administrar estado

Para que los componentes tengan en cuenta el estado del proveedor, deberá llamar al provider.setState(state: ProviderState) método cada vez que cambie el estado. Por ejemplo, cuando el usuario haya iniciado sesión, llame a provider.setState(ProviderState.SignedIn). La ProviderState enumeración define tres estados, como se muestra.

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProvider

Puede ampliar la IProvider clase abstracta para crear su propio proveedor.

Estado

Un proveedor debe realizar un seguimiento del estado de autenticación y actualizar los componentes cuando cambia el estado. La IProvider clase ya implementa el onStateChanged(eventHandler) controlador y la state: ProviderState propiedad . Solo tiene que usar el método en la setState(state:ProviderState) implementación para actualizar el estado cuando cambia. Al actualizar el estado, se activará el stateChanged evento y se actualizarán todos los componentes automáticamente.

Inicio de sesión o cierre de sesión

Si el proveedor proporciona la funcionalidad de inicio de sesión o cierre de sesión, implemente los login(): Promise<void> métodos y logout(): Promise<void> . Estos métodos son opcionales.

Token de acceso

Debe implementar el getAccessToken({'scopes': scopes[]}) : Promise<string> método . Este método se usa para obtener un token válido antes de cada llamada a Microsoft Graph.

Graph

Los componentes usan el SDK de JavaScript de Microsoft Graph para todas las llamadas a Microsoft Graph. El proveedor debe hacer que el SDK esté disponible a través de la graph propiedad . En el constructor, cree una nueva Graph instancia, como se muestra.

this.graph = new Graph(this);

La Graph clase es un contenedor ligero sobre el SDK de Microsoft Graph.

Ejemplo

Todos los proveedores amplían la IProvider clase abstracta. Por ejemplo, eche un vistazo al código fuente de cualquiera de los proveedores existentes.

Establecer el proveedor global

Los componentes usan la Providers.globalProvider propiedad para acceder a un proveedor. Después de crear su propio proveedor, establezca esta propiedad en su proveedor.

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

Providers.globalProvider = myProvider;

Todos los componentes recibirán una notificación del nuevo proveedor y comenzarán a usarlo.