プロキシ プロバイダー

プロキシ プロバイダーを使用する場合は、バックエンド認証 (Auth2.0 On-Behalf-Of フローなど) を使用して、独自のバックエンドを介して Microsoft Graph へのすべての呼び出しをルーティングすることで、Microsoft Graph Toolkit に電力を供給できます。

バックエンド サービスは、Microsoft Graph の呼び出しごとに呼び出される API を公開する必要があります。 たとえば、コンポーネントがリソースを取得しようとすると、ProxyProvider は代わりにベース API を呼び出し、そのリソースを追加します。

https://graph.microsoft.com/v1.0/me => https://myurl.com/api/GraphProxy/v1.0/me

API 実装では、ユーザーの代わりに Microsoft Graph を呼び出し、結果をコンポーネントに返す必要があります。

実装例については、 ASP.NET MVC サンプルを参照してください。

認証プロバイダーの詳細については、「プロバイダー」を参照してください。

作業の開始

プロキシ プロバイダーは HTML または JavaScript で初期化できます。 この操作は、ページごとに 1 回だけ行う必要があります。

HTML ページで初期化する

プロキシ プロバイダーを HTML で初期化することは、カスタム サーバー側認証用に独自のルートを定義する最も簡単な方法です。 コンポーネントを mgt-proxy-provider 使用して graph-proxy-url を設定します。 これにより、定義されたプロキシ プロバイダーがグローバル プロバイダーとして設定されます。

<mgt-proxy-provider
  graph-proxy-url="https://myurl.com/api/GraphProxy"
></mgt-proxy-provider>

属性	説明
graph-proxy-url	プロキシ API のベース URL。

JavaScript で初期化する

JavaScript でプロバイダーを初期化することで、さらに多くのオプションを提供できます。

import { Providers } from "@microsoft/mgt-element";
import { ProxyProvider } from "@microsoft/mgt-proxy-provider";

Providers.globalProvider = new ProxyProvider(
  "https://myurl.com/api/GraphProxy"
);

必要に応じて、コンストラクターの 2 番目のパラメーターとして省略可能な関数を使用して、各要求を含む追加のヘッダーをプロキシ API に送信できます。

import { Providers } from "@microsoft/mgt-element";
import { ProxyProvider } from "@microsoft/mgt-proxy-provider";

Providers.globalProvider = new ProxyProvider(
  "https://myurl.com/api/GraphProxy",
  async () => {
    return {
      header: "value",
      header2: "value2",
    };
  }
);

これは、トークンまたはその他のヘッダーをバックエンドに渡す必要がある場合に便利です。

コンポーネントを使用する mgt-login 場合は、プロバイダーの login および logout 関数も指定する必要があります。

import { Providers } from "@microsoft/mgt-element";
import { ProxyProvider } from "@microsoft/mgt-proxy-provider";

let provider = new ProxyProvider("https://myurl.com/api/GraphProxy");
provider.login = () => {
  /* will be called when "Sign In" is clicked */
};
provider.logout = () => {
  /* will be called when "Sign Out" is called */
};

Providers.globalProvider = provider;