Provedor personalizado

Se você tiver um código de autenticação existente em seu aplicativo, poderá criar um provedor personalizado para habilitar a autenticação e o acesso ao Microsoft Graph para componentes do Microsoft Graph Toolkit. Há duas maneiras de criar provedores personalizados:

• Criar um novo SimpleProvider passando uma função para obter um token de acesso
• Estender a IProvider classe abstrata

Este artigo descreve cada abordagem com mais detalhes.

SimpleProvider

Instancie a SimpleProvider classe passando uma função que retornará um token de acesso para escopos passados.

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

Além disso, você também pode fornecer uma opção login e logout funções que podem lidar com a entrada e sair chamadas do componente Logon .

Importante

Para indicar aos componentes que eles podem começar a chamar as APIs do Microsoft Graph depois que um usuário entrar com êxito, você precisa chamar Providers.setState(ProviderState.SignedIn). Um exemplo disso é mostrado na função abaixo login .

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

Gerenciar estado

Para que os componentes estejam cientes do estado do provedor, você precisará chamar o provider.setState(state: ProviderState) método sempre que o estado for alterado. Por exemplo, quando o usuário entrar, chame provider.setState(ProviderState.SignedIn). O ProviderState enum define três estados, conforme mostrado.

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProvider

Você pode estender a IProvider classe abstrata para criar seu próprio provedor.

Estado

Um provedor deve acompanhar o estado de autenticação e atualizar os componentes quando o estado for alterado. A IProvider classe já implementa o onStateChanged(eventHandler) manipulador e a state: ProviderState propriedade. Você só precisa usar o setState(state:ProviderState) método em sua implementação para atualizar o estado quando ele for alterado. Atualizar o estado disparará o stateChanged evento e atualizará todos os componentes automaticamente.

Logon/Logon

Se o provedor fornecer funcionalidade de logon ou logon, implemente os login(): Promise<void> métodos e logout(): Promise<void> . Esses métodos são opcionais.

Token de acesso

Você deve implementar o getAccessToken({'scopes': scopes[]}) : Promise<string> método. Esse método é usado para obter um token válido antes de cada chamada para o Microsoft Graph.

Graph

Os componentes usam o SDK javascript do Microsoft Graph para todas as chamadas para o Microsoft Graph. Seu provedor deve disponibilizar o SDK por meio da graph propriedade. No construtor, crie uma nova Graph instância, conforme mostrado.

this.graph = new Graph(this);

A Graph classe é um wrapper leve na parte superior do SDK do Microsoft Graph.

Exemplo

Todos os provedores estendem a IProvider classe abstrata. Para obter exemplos, dê uma olhada no código-fonte de qualquer um dos provedores existentes.

Definir o provedor global

Os componentes usam a Providers.globalProvider propriedade para acessar um provedor. Depois de criar seu próprio provedor, defina essa propriedade como seu provedor.

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

Providers.globalProvider = myProvider;

Todos os componentes serão notificados do novo provedor e começarão a usá-los.