Provedor personalizado

Cuidado

O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.

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 transmitindo uma função para obter um token de acesso
  • Estender a IProvider classe abstrata

Este artigo descreve cada abordagem mais detalhadamente.

Provedor Simples

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 um opcional login e logout funções que podem lidar com as chamadas de entrada e saída do componente de 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 login função abaixo.

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 tiver entrado, ligue para provider.setState(ProviderState.SignedIn). A ProviderState enumeração define três estados, como 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 mudar. Atualizar o estado disparará o stateChanged evento e atualizará todos os componentes automaticamente.

Logon/Logoff

Se o provedor fornecer a funcionalidade de logon ou logoff, implemente os login(): Promise<void> métodos and 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 do Microsoft Graph Javascript para todas as chamadas para o Microsoft Graph. Seu provedor deve disponibilizar o SDK por meio da graph propriedade. Em seu construtor, crie uma nova Graph instância, conforme mostrado.

this.graph = new Graph(this);

A Graph classe é um wrapper leve sobre o 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 para o provedor.

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

Providers.globalProvider = myProvider;

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