カスタム プロバイダー
アプリケーションに既存の認証コードがある場合は、Microsoft Graph Toolkit コンポーネントの認証と Microsoft Graph へのアクセスを有効にするカスタム プロバイダーを作成できます。 カスタム プロバイダーを作成するには、次の 2 つの方法があります。
- アクセス トークンを取得するための関数を渡して新しい
SimpleProvider
を作成する - 抽象クラスを拡張する
IProvider
この記事では、各アプローチについて詳しく説明します。
渡されたスコープの SimpleProvider
アクセス トークンを返す関数を渡して、クラスをインスタンス化します。
let provider = new SimpleProvider((scopes: string[]) => {
// return a promise with accessToken
});
さらに、Login コンポーネントからのサインイン呼び出しとサインアウト呼び出しを処理できる、省略可能login
な関数とlogout
関数を提供することもできます。
重要
ユーザーが正常にサインインした後に Microsoft Graph API の呼び出しを開始できることをコンポーネントに示すには、 を呼び出す Providers.setState(ProviderState.SignedIn)
必要があります。 この例を次の関数に 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);
コンポーネントがプロバイダーの状態を認識するには、状態が変化するたびに メソッドを provider.setState(state: ProviderState)
呼び出す必要があります。 たとえば、ユーザーがサインインしたら、 を呼び出します provider.setState(ProviderState.SignedIn)
。 列挙型は ProviderState
、次に示すように、3 つの状態を定義します。
export enum ProviderState {
Loading,
SignedOut,
SignedIn
}
抽象クラスを IProvider
拡張して、独自のプロバイダーを作成できます。
プロバイダーは、認証状態を追跡し、状態が変化したときにコンポーネントを更新する必要があります。 クラスには IProvider
、ハンドラーと プロパティが onStateChanged(eventHandler)
既に state: ProviderState
実装されています。 実装で メソッドを setState(state:ProviderState)
使用して、変更時に状態を更新するだけで済みます。 状態を更新すると、イベントが stateChanged
発生し、すべてのコンポーネントが自動的に更新されます。
プロバイダーがログインまたはログアウト機能を提供する場合は、 メソッドと logout(): Promise<void>
メソッドをlogin(): Promise<void>
実装します。 これらのメソッドは省略可能です。
メソッドを実装する getAccessToken({'scopes': scopes[]}) : Promise<string>
必要があります。 このメソッドは、Microsoft 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;
すべてのコンポーネントに新しいプロバイダーが通知され、使用が開始されます。