Microsoft Graph ツールキットプロバイダーMicrosoft Graph Toolkit providers

Microsoft Graph Toolkit プロバイダーを使用すると、すべてのコンポーネントに対して認証と Microsoft Graph へのアクセスが可能になります。The Microsoft Graph Toolkit providers enable authentication and Microsoft Graph access for all components. 各プロバイダーは、Microsoft Graph Api を呼び出すために必要なアクセストークンを取得するための実装を提供します。Each provider provides implementation for acquiring the necessary access token for calling the Microsoft Graph APIs.

コンポーネントでプロバイダーを使用するには、使用するプロバイダー Providers.globalProviderの値をプロパティに設定する必要があります。For the components to use a provider, you must set the Providers.globalProvider property to the value for a provider you'd like to use.

次の例は、MsalProvider の使用方法を示しています。The following example shows how to use the MsalProvider.

Providers.globalProvider = new MsalProvider({
  clientId: '[CLIENT_ID]'
});

このツールキットは、次のプロバイダーを実装します。The toolkit implements the following providers:

プロバイダーはいつでも作成できます。You can create a provider at any time. コンポーネントを使用する前に、プロバイダーを作成することをお勧めします。We recommend that you create the provider before you use any of the components. このセクションでは、プロバイダーを初期化する方法について説明します。This section describes how to initialize a provider.

Providers 名前空間Providers namespace

名前Providers空間は、次のプロパティと関数を公開します。The Providers namespace exposes the following properties and functions:

  • globalProvider : IProvider

このプロパティをグローバルに使用するプロバイダーに設定します。Set this property to a provider that you want to use globally. すべてのコンポーネントこのプロパティを使用して、プロバイダーへの参照を取得します。All components use this property to get a reference to the provider. このプロパティを設定するとonProvidersChanged 、イベントが発生します。Setting this property will fire the onProvidersChanged event.

  • function onProviderUpdated(callbackFunction)

このcallbackFunction関数は、プロバイダーが変更されたとき、またはプロバイダーの状態が変更されたときに呼び出されます。The callbackFunction function will be called when a provider is changed or when the state of a provider changes. ProvidersChangedState列挙値は、更新されたものを示すために関数に渡されます。A ProvidersChangedState enum value will be passed to the function to indicate what updated.

独自のプロバイダーを実装するImplement your own provider

このツールキットには、新しいプロバイダーを作成する2つの方法が用意されています。The toolkit provides two ways to create new providers:

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

それぞれの詳細については、「カスタムプロバイダ」を参照してください。For more details about each one, see custom providers.

複数のプロバイダーを使用するUsing multiple providers

シナリオによっては、アプリケーションが別の環境で実行され、別のプロバイダーが必要になることがあります。In some scenarios, your application will run in a different environment and require a different provider. たとえば、アプリは web アプリケーションと Microsoft Teams の両方のタブとして実行され、MsalProvider および TeamsProvider を使用する必要がある場合があります。For example, the app might run as both a web application and a Microsoft Teams tab and you might need to use the MsalProvider and the TeamsProvider. このシナリオでは、次の例にdepends-on示すように、すべてのプロバイダーコンポーネントに、フォールバックチェーンを作成するための属性があります。For this scenario, all provider components have the depends-on attribute to create a fallback chain, as shown in the following example.

<mgt-teams-provider
  client-id="[CLIENT-ID]"
  auth-popup-url="auth.html" ></mgt-teams-provider>

<mgt-msal-provider
  client-id="[CLIENT-ID]"
  depends-on="mgt-teams-provider" ></mgt-msal-provider>

このシナリオでは、現在の環境で TeamsProvider が使用できない場合にのみ MsalProvider が使用されます。In this scenario, the MsalProvider will only be used if the TeamsProvider is not available in the current environment.

コード内で同じことを行うには、以下isAvailableのように、プロバイダーのプロパティを使用します。To accomplish the same in code, you can use the isAvailable property on the provider, as shown.

if (TeamsProvider.isAvailable) {
    Providers.globalProvider = new TeamsProvider(teamsConfig);
} else {
    Providers.globalProvider = new MsalProvider(msalConfig)
}

Microsoft Graph への独自の呼び出しを行うMaking your own calls to Microsoft Graph

すべてのコンポーネントは、前のセクションで説明したように、プロバイダーを初期化する限り、カスタマイズを必要とせずに Microsoft Graph にアクセスできます。All components can access Microsoft Graph without any customization required as long as you initialize a provider (as described in the previous section). コンポーネントで使用されているものと同じ Microsoft Graph SDK への参照を取得するには、まず、次のようにGraph 、グローバル iprovider への参照を取得して、そのオブジェクトを使用します。To get a reference to the same Microsoft Graph SDK used by the components, first get a reference to the global IProvider and then use the Graph object, as shown:

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

let provider = Providers.globalProvider;
if (provider) {
  let graphClient = provider.graph.client;
  let userDetails = await graphClient.api('me').get();
}

呼び出している API によっては、追加のアクセス許可を渡す必要がある場合があります。There might be cases were you will need to pass additional permissions, depending on the API you're calling.

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

graphClient
  .api('me')
  .middlewareOptions(prepScopes('user.read', 'calendar.read'))
  .get();

graphオブジェクトは、 MICROSOFT graph Javascript SDKのインスタンスであり、これを使用して microsoft graph へのすべての呼び出しを行うことができます。The graph object is an instance of the Microsoft Graph Javascript SDK and you can use it to make any calls to Microsoft Graph.