カスタム プロバイダー

アプリケーションに既存の認証コードがある場合は、Microsoft Graph Toolkit コンポーネントの認証と Microsoft Graph へのアクセスを有効にするカスタム プロバイダーを作成できます。 カスタム プロバイダーを作成するには、次の 2 つの方法があります。

• アクセス トークンを取得するための関数を渡して新しい SimpleProvider を作成する
• 抽象クラスを拡張するIProvider

この記事では、各アプローチについて詳しく説明します。

SimpleProvider

渡されたスコープの SimpleProvider アクセス トークンを返す関数を渡して、クラスをインスタンス化します。

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

さらに、Login コンポーネントからのサインイン呼び出しとサインアウト呼び出しを処理できる、省略可能loginな関数とlogout関数を提供することもできます。

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

状態の管理

コンポーネントがプロバイダーの状態を認識するには、状態が変化するたびに メソッドを provider.setState(state: ProviderState) 呼び出す必要があります。 たとえば、ユーザーがサインインしたら、 を呼び出します provider.setState(ProviderState.SignedIn)。 列挙型は ProviderState 、次に示すように、3 つの状態を定義します。

export enum ProviderState {
  Loading,
  SignedOut,
  SignedIn
}

IProvider

抽象クラスを IProvider 拡張して、独自のプロバイダーを作成できます。

状態

プロバイダーは、認証状態を追跡し、状態が変化したときにコンポーネントを更新する必要があります。 クラスには IProvider 、ハンドラーと プロパティが onStateChanged(eventHandler) 既に state: ProviderState 実装されています。 実装で メソッドを setState(state:ProviderState) 使用して、変更時に状態を更新するだけで済みます。 状態を更新すると、イベントが stateChanged 発生し、すべてのコンポーネントが自動的に更新されます。

ログイン/ログアウト

プロバイダーがログインまたはログアウト機能を提供する場合は、 メソッドと logout(): Promise<void> メソッドをlogin(): Promise<void>実装します。 これらのメソッドは省略可能です。

アクセス トークン

メソッドを実装する getAccessToken({'scopes': scopes[]}) : Promise<string> 必要があります。 このメソッドは、Microsoft Graph を呼び出すたびに有効なトークンを取得するために使用されます。

Graph

コンポーネントでは、Microsoft Graph のすべての呼び出しに Microsoft Graph Javascript SDK が使用されます。 プロバイダーは、 プロパティを使用して SDK を graph 使用できるようにする必要があります。 コンストラクターで、次に示すように、新 Graph しいインスタンスを作成します。

this.graph = new Graph(this);

クラスは Graph 、Microsoft Graph SDK 上のライト ラッパーです。

例

すべてのプロバイダーが抽象クラスを IProvider 拡張します。 たとえば、 既存のプロバイダーのソース コードを見てみましょう。

グローバル プロバイダーを設定する

コンポーネントでは、 プロパティを Providers.globalProvider 使用してプロバイダーにアクセスします。 独自のプロバイダーを作成したら、このプロパティをプロバイダーに設定します。

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

Providers.globalProvider = myProvider;

すべてのコンポーネントに新しいプロバイダーが通知され、使用が開始されます。