カスタム プロバイダーCustom provider

アプリケーションに既存の認証コードがある場合は、カスタムプロバイダーを作成して、Microsoft Graph Toolkit コンポーネントの認証と Microsoft Graph へのアクセスを有効にすることができます。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. カスタムプロバイダーを作成するには、次の2つの方法があります。There are two ways to create custom providers:

  • SimpleProviderアクセストークンを取得するために関数を渡すことにより、新しいを作成するCreate a new SimpleProvider by passing in a function for getting an access token
  • 抽象クラスを拡張する IProviderExtend the IProvider abstract class

この記事では、各方法について詳しく説明します。This article describes each approach in more detail.

SimpleProviderSimpleProvider

SimpleProvider渡されたスコープのアクセストークンを返す関数を渡すことにより、クラスをインスタンス化します。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
});

さらに、 login logout ログインコンポーネントからのサインインとサインアウトの呼び出しを処理できるオプションおよび関数を提供することもできます。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.

function getAccessToken(scopes: string[]) {
  // return a promise with accessToken string
}

function login() {
  // login code
}

function logout() {
  // logout code
}

let provider = new SimpleProvider(getAccessToken, login, logout);

状態を管理するManage state

プロバイダーの状態を認識できるようにコンポーネントを構成するには、状態が変化したときにメソッドを呼び出す必要があり provider.setState(state: ProviderState) ます。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. たとえば、ユーザーがサインインしている場合は、を呼び出し provider.setState(ProviderState.SignedIn) ます。For example, when the user has signed in, call provider.setState(ProviderState.SignedIn). ProviderStateEnum は、次のように3つの状態を定義します。The ProviderState enum defines three states, as shown.

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProviderIProvider

抽象クラスを拡張し IProvider て、独自のプロバイダーを作成できます。You can extend the IProvider abstract class to create your own provider.

StateState

プロバイダーは、認証状態を追跡し、状態が変更されたときにコンポーネントを更新する必要があります。A provider must keep track of the authentication state and update the components when the state changes. クラスには、 IProvider ハンドラーとプロパティが既に実装されて onStateChanged(eventHandler) state: ProviderState います。The IProvider class already implements the onStateChanged(eventHandler) handler and the state: ProviderState property. 変更時に状態を更新するには、実装のメソッドを使用するだけ setState(state:ProviderState) です。You just need to use the setState(state:ProviderState) method in your implementation to update the state when it changes. 状態を更新すると、 stateChanged イベントが発生し、すべてのコンポーネントが自動的に更新されます。Updating the state will fire the stateChanged event and update all the components automatically.

ログイン/ログアウトLogin/Logout

プロバイダーがログインまたはログアウト機能を提供する場合は、 login(): Promise<void> メソッドとメソッドを実装し logout(): Promise<void> ます。If your provider provides login or logout functionality, implement the login(): Promise<void> and logout(): Promise<void> methods. これらのメソッドはオプションです。These methods are optional.

アクセス トークンAccess token

メソッドを実装する必要があり getAccessToken({'scopes': scopes[]}) : Promise<string> ます。You must implement the getAccessToken({'scopes': scopes[]}) : Promise<string> method. このメソッドは、Microsoft Graph へのすべての呼び出しの前に有効なトークンを取得するために使用されます。This method is used to get a valid token before every call to Microsoft Graph.

GraphGraph

これらのコンポーネントは、microsoft graph のすべての呼び出しに Microsoft Graph Javascript SDK を使用します。The components use the Microsoft Graph Javascript SDK for all calls to Microsoft Graph. プロバイダーは、プロパティで SDK を使用できるようにする必要があり graph ます。Your provider must make the SDK available through the graph property. のように、コンストラクターで新しいインスタンスを作成し Graph ます。In your constructor, create a new Graph instance, as shown.

this.graph = new Graph(this);

Graphクラスは、Microsoft GRAPH SDK の一番上にあるライトラッパーです。The Graph class is a light wrapper on top of the Microsoft Graph SDK.

Example

すべてのプロバイダーが抽象クラスを拡張し IProvider ます。All the providers extend the IProvider abstract class. 例については、既存のプロバイダーのソースコードを参照してください。For examples, take a look at the source code for any of the existing providers.

グローバルプロバイダーを設定するSet the global provider

コンポーネントは、プロパティを使用して Providers.globalProvider プロバイダーにアクセスします。Components use the Providers.globalProvider property to access a provider. 独自のプロバイダーを作成した後、このプロパティをプロバイダーに設定します。After you create your own provider, set this property to your provider.

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

Providers.globalProvider = myProvider;

すべてのコンポーネントは新しいプロバイダーに通知され、その使用を開始します。All the components will be notified of the new provider and start using it.