Provedor personalizadoCustom provider

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 os componentes do Microsoft Graph Toolkit.If you have existing authentication code in your application, you can create a custom provider to enable authentication and access to Microsoft Graph for Microsoft Graph Toolkit components. Há duas maneiras de criar provedores personalizados:There are two ways to create custom providers:

  • Criar um novo SimpleProvider passando uma função para obter um token de acessoCreate a new SimpleProvider by passing in a function for getting an access token
  • Estender a IProvider classe abstrataExtend the IProvider abstract class

Este artigo descreve cada abordagem em mais detalhes.This article describes each approach in more detail.

SimpleproviderSimpleProvider

Crie uma instância da SimpleProvider classe passando uma função que retornará um token de acesso para escopos aprovados.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
});

Além disso, você também pode fornecer uma login função opcional e logout que possa lidar com as chamadas de entrada e de saída do componente de logon .In addition, you can also provide an optional login and logout functions that can handle the sign in and sign out calls from the Login component.

Importante

Para indicar aos componentes que eles podem começar a chamar as APIs do Microsoft Graph após um usuário entrar com êxito, você precisará chamar Providers.setState(ProviderState.SignedIn) .To indicate to the components that they can start calling the Microsoft Graph APIs after a user successfully signs in, you need to call Providers.setState(ProviderState.SignedIn). Um exemplo disso é mostrado na função a login seguir.An example of this is shown in the login function below.

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 estadoManage state

Para que os componentes estejam cientes do estado do provedor, será necessário chamar o provider.setState(state: ProviderState) método sempre que o estado for alterado.For the components to be aware of the state of the provider, you will need to call the provider.setState(state: ProviderState) method whenever the state changes. Por exemplo, quando o usuário entrou, ligue para provider.setState(ProviderState.SignedIn) .For example, when the user has signed in, call provider.setState(ProviderState.SignedIn). A ProviderState enumeração define três Estados, conforme mostrado.The ProviderState enum defines three states, as shown.

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProviderIProvider

Você pode estender a IProvider classe abstract para criar seu próprio provedor.You can extend the IProvider abstract class to create your own provider.

EstadoState

Um provedor deve acompanhar o estado de autenticação e atualizar os componentes quando o estado for alterado.A provider must keep track of the authentication state and update the components when the state changes. A IProvider classe já implementa o onStateChanged(eventHandler) manipulador e a state: ProviderState propriedade.The IProvider class already implements the onStateChanged(eventHandler) handler and the state: ProviderState property. Você só precisa usar o setState(state:ProviderState) método na sua implementação para atualizar o estado quando ele for alterado.You just need to use the setState(state:ProviderState) method in your implementation to update the state when it changes. A atualização do estado acionará o stateChanged evento e atualizará todos os componentes automaticamente.Updating the state will fire the stateChanged event and update all the components automatically.

Login/logoutLogin/Logout

Se seu provedor fornece a funcionalidade de logon ou logout, implemente os login(): Promise<void> logout(): Promise<void> métodos e.If your provider provides login or logout functionality, implement the login(): Promise<void> and logout(): Promise<void> methods. Esses métodos são opcionais.These methods are optional.

Token de acessoAccess token

Você deve implementar o getAccessToken({'scopes': scopes[]}) : Promise<string> método.You must implement the getAccessToken({'scopes': scopes[]}) : Promise<string> method. Este método é usado para obter um token válido antes de cada chamada para o Microsoft Graph.This method is used to get a valid token before every call to Microsoft Graph.

GraphGraph

Os componentes usam o SDK do JavaScript do Microsoft Graph para todas as chamadas para o Microsoft Graph.The components use the Microsoft Graph Javascript SDK for all calls to Microsoft Graph. Seu provedor deve tornar o SDK disponível por meio da graph propriedade.Your provider must make the SDK available through the graph property. No construtor, crie uma nova Graph instância, conforme mostrado.In your constructor, create a new Graph instance, as shown.

this.graph = new Graph(this);

A Graph classe é um invólucro claro na parte superior do SDK do Microsoft Graph.The Graph class is a light wrapper on top of the Microsoft Graph SDK.

ExemploExample

Todos os provedores estendem a IProvider classe abstrata.All the providers extend the IProvider abstract class. Para obter exemplos, dê uma olhada no código-fonte de qualquer um dos provedores existentes.For examples, take a look at the source code for any of the existing providers.

Definir o provedor globalSet the global provider

Os componentes usam a Providers.globalProvider propriedade para acessar um provedor.Components use the Providers.globalProvider property to access a provider. Depois de criar seu próprio provedor, defina essa propriedade como seu provedor.After you create your own provider, set this property to your provider.

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

Providers.globalProvider = myProvider;

Todos os componentes serão notificados do novo provedor e começarão a usá-lo.All the components will be notified of the new provider and start using it.