演習 - Microsoft Graph ツールキットの Login コンポーネントを使用してアプリにサインインする

  • 12 分

このユニットでは、Web アプリケーションを作成し、スターター プロジェクトを探索します。 次に、ツールキットのログイン コンポーネントを使用して自分のアプリケーションにサインインし、Microsoft Graph の機能にアクセスします。

Web アプリのアプリ構造を設定する

プロジェクトの新しいフォルダーを作成する

  1. Visual Studio Code を開きます。 コマンドメニューから [ファイル]>[フォルダを開く] の順に選択します。
  2. フォルダーを開くと、オペレーティング システムは [新しいフォルダー] を作成するボタンを表示します。
  3. 新しいフォルダーを作成する場所に移動し、[新しいフォルダー] を選択します。 フォルダーに「mgt-app」という名前を付けます。
  4. Visual Studio Code で、「mgt-app」フォルダーを開きます。

プロジェクト フォルダーの下にファイルとフォルダーを作成します

Web アプリケーションには、1 つの HTML ファイルと、Live Serverの設定用に 1 つのフォルダーが作成されます。 Live Server は Visual Studio Code の拡張機能です。 プロジェクトの構造を作成しましょう。

  1. [ファイル] > [新しいファイル] の順に選択します。

  2. ファイルに index.html という名前を付け、CTRL +S (Windows) または COMMAND+S (macOS) を使用してファイルを保存します。

  3. 次の HTML をindex.htmlに追加して、ファイルを保存します。

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

  4. *.vscode という名前のフォルダーをプロジェクト フォルダーのルートに追加する

  5. *.vscode フォルダーに settings.json という名前のファイルを追加します。 次のコードをコピーして settings.json に貼り付け、ファイルを保存します。

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

これらの設定により、Live Serverを使用して、ローカルでアプリケーションのテストがスムーズに行えるようになります。

Login コンポーネントを使用してコードを追加して、アプリにサインインします

Web アプリケーションでツールキットを使用するコードの追加を開始する前に、Microsoft Entra アプリケーションを設定する必要があります。

microsoft Authentication Library (MSAL) v2 プロバイダーを使用してアプリケーションを認証するには、Microsoft Entra アプリケーションの詳細を使用します。

Microsoft Entra アプリケーションを設定する

  1. ブラウザーで、Microsoft Entra管理センターに移動し、サインインして、Microsoft Entra ID に移動します。

  2. 左側のページで [アプリの登録」を選択し、次に [新しい登録」を選択します。

    [新規登録] を選択して、新しいアプリ登録を作成しているスクリーンショット。

  3. [アプリケーション登録] 画面で、次の値を入力します。

    • [名前]: アプリケーションの名前を入力します。
    • サポートされているアカウントの種類: 任意の組織のディレクトリ (任意のMicrosoft Entra ディレクトリ - マルチテナント) と個人用 Microsoft アカウント (Skype、Xbox など) のアカウントを選択します。
    • リダイレクト URI (オプション): [シングル ページ アプリケーション (SPA)] を選択して http://localhost:3000 と入力します。
    • [登録] を選択します。

    Microsoft Entra ID でのアプリケーションの登録を示すスクリーンショット。

これで、アプリケーションが正常に設定されました。コードを追加しましょう。

Microsoft Graph ツールキットをプロジェクトに追加します。

前に、CDN から ツールキットを直接参照できるようになっていることを学びました。 これを行うには、index.html ファイルの </head> タグの直前に次のコードスニペットを追加します。

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

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

アプリケーションを認証するには、前のセクションで保存したアプリケーション (クライアント) ID を使用して、MSAL v2 プロバイダーを初期化します。

次のスニペットを index.html ファイルの <body> に追加します。

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

YOUR-CLIENT-ID を前のセクションで保存したアプリケーション (クライアント) ID で置き換えてください。

Login コンポーネントを Web アプリに追加する

ツールキットの Login コンポーネントをアプリに追加するには、次の要素をindex.htmlファイルの本文に追加します。

<mgt-login></mgt-login>

すべての変更が完了すると、index.htmlファイルは次のようになります。

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

ファイルを保存して、結果をテストしましょう。

ブラウザーでアプリをテストする

ブラウザーでアプリケーションをテストするには、Visual Studio Code Live Server をインストールしておく必要があります。

Live Server でアプリを実行するには、Visual Studio Code で次のキーの組み合わせを押し、Live Server を検索します。

  • Windows: CRL+SHIFT+P
  • macOS: COMMAND+SHIFT+P

Live Server を開き、オプションを選択し、Enter キーを押します。

Live Server の実行後に、http://localhost:3000/index.html のページが開く可能性があります。 ブラウザーで http://localhost:3000 ファイルを開きます。

Microsoft 365 開発者テナント アカウントで、サインイン を選択してください。 初回は必要なアクセス許可に同意を求められます。 同意すると、アプリにはサインイン情報が表示されます。

ユーザーのサインイン後のアプリの最終結果を示すスクリーンショット

これで Microsoft 365 データにアクセスするための認証メカニズムが正常に実装されました。