Microsoft GraphToolkit を使用して Web アプリケーションを構築する

  • [アーティクル]

このトピックでは、バニラ JavaScript で記述された Web アプリケーションで Microsoft Graph Toolkit の使用を開始する方法について説明します。 詳細なチュートリアルについては、「 Microsoft Graph Toolkit の概要」モジュールを試してください。 ツールキットを Web フレームワークで使用する方法を学びたい場合は、「Web アプリのビルド (React)」 または 「Web アプリのビルド (Angular)」 を参照してください。

ツールキットの概要には、次の手順が含まれます。

  1. Microsoft Graph Toolkit をプロジェクトに追加します。
  2. Microsoft 認証ライブラリ 2(MSAL2) プロバイダーを初期化します。
  3. コンポーネントを追加します。
  4. アプリケーションをテストします。

Microsoft Graph Toolkit をプロジェクトに追加する

アプリケーションで Microsoft Graph Toolkit を使用するには、npm パッケージをインストールするか、コンテンツ配信ネットワーク (CDN) から読み込みます。

CDN 経由でツールキットを使用するには、次のスクリプトとマークアップを HTML ページに追加します。

<script type="module">
  import {
    registerMgtComponents,
    Providers,
    Msal2Provider,
  } from "https://unpkg.com/@microsoft/mgt@4";
  Providers.globalProvider = new Msal2Provider({ clientId: "[CLIENT-ID]" });
  registerMgtComponents();
</script>

MSAL2 プロバイダーを初期化する

Microsoft Graph Toolkit プロバイダーは、コンポーネントの認証と Microsoft Graph へのアクセスを可能にします。 詳細については、「プロバイダーを使用する」を参照してください。 MSAL2 プロバイダーは、MSAL ブラウザーを使用してユーザーにサインインし、トークンを取得します。 このプロバイダーは、HTML または JavaScript で初期化できます。

注: 現在 MSAL プロバイダーを使用していて、MSAL2 プロバイダーに更新する場合は、「 MSAL プロバイダーから MSAL2 プロバイダーへの移行」を参照してください。 独自のバックエンド認証を使用する場合は、MSAL2 プロバイダーの代わりに プロキシ プロバイダー を使用します。

JavaScript コードまたは HTML のいずれかでプロバイダーを初期化できます。

JavaScript で MSAL プロバイダーを初期化するには、次のコードをアプリケーションに追加します。

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

クライアント ID は、プロバイダーを初期化するために必要な唯一のプロパティですが、他のオプションを設定することもできます。 完全な一覧については、「 MSAL2 プロバイダー」を参照してください。

アプリ/クライアント ID の作成

クライアント ID を取得するには、アプリケーションをMicrosoft Entra IDに登録する必要があります。

コンポーネントの追加

MSAL2 プロバイダーを初期化した後は、いずれかの Toolkit コンポーネントの使用を開始できます。

この例では、ES6 モジュール、JavaScript で初期化された MSAL2 プロバイダー、およびコンポーネントを Login 使用します。

import { Providers } from "@microsoft/mgt-element";
import { registerMgtLoginComponent } from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "<mgt-login></mgt-login>";
  return element;
}

document.body.appendChild(component());

次の例では、ES6 モジュール、HTML で初期化された MSAL2 プロバイダー、およびコンポーネントを Login 使用します。

<script type="module">
  import { registerMgtMsal2Provider } from "node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js";
  import { registerMgtLoginComponent } from "node_modules/@microsoft/mgt-components/dist/es6/index.js";
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>

アプリのテスト

アプリをテストするには、MSAL では、認証リダイレクト用にページを Web サーバーでホストする必要があります。

始めたばかりでいろいろ試してみたい場合は、Visual Studio Code の Live Server または同様の軽量開発サーバーを使用できます。 拡張機能をダウンロードし、ライブ サーバーを使用して HTML ファイルを開きます。

注: アプリ登録のリダイレクト URI が、アプリケーションがホストされているローカルホスト ポートに設定されていることを確認してください。 Microsoft Entra 管理センターでアプリの登録に移動し、[管理] で [認証] をクリックし、正しいリダイレクト URI を追加します。

ユーザーのサインイン状態を追跡する

ユーザーが正常にサインインしたことを検出し、それに応じて特定のコンポーネントを表示できます。 たとえば、ユーザーがサインインしている場合は、議題コンポーネントを表示します。 それ以外の場合は、サインイン インターフェイスを表示します。

パッケージ mgt-element には、ユーザーが isSignedIn サインインしているかどうかを確認するために呼び出すことができるユーティリティ関数が用意されています。

npm パッケージを使用してツールキットを使用している場合は、 から @microsoft/mgt-elementと ProviderState をProviderインポートできます。

import { Providers } from "@microsoft/mgt-element";
import {
  registerMgtLoginComponent,
  registerMgtAgendaComponent,
} from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { isSignedIn } from "@microsoft/mgt-element";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();
registerMgtAgendaComponent();

const loadAgenda = () => {
  if (isSignedIn()) {
    document.getElementById("main").innerHTML = "<mgt-agenda></mgt-agenda>";
  }
};

Providers.onProviderUpdated(loadAgenda);

次の手順