次の方法で共有

Microsoft Graph を呼び出す JavaScript クライアント側 Web アプリケーションをテストする

  • [アーティクル]

このチュートリアルでは、開発プロキシを使用して、Microsoft Graph を呼び出す JavaScript クライアント側 Web アプリケーションのサンプルをテストする方法について説明します。

前提 条件

このチュートリアルのこの部分では、コンピューターに開発プロキシをインストールして構成していることを前提としています。 そうでない場合は、今すぐ実行してください。

このチュートリアルに従うには、次のものが必要です。

ヒント

コンテンツ パックがインストールされている Microsoft 365 Developer Tenant を使用することをお勧めします。 Microsoft 365 Developer Program にサインアップして、無料のテナントを取得します。

サンプル アプリを複製して構成する

開発プロキシを起動する

開発プロキシには、Microsoft Graph および SharePoint Online API に要求を送信するアプリをテストするための事前設定構成が付属しています。

  • コマンド プロンプトを開き、「devproxy --config-file "~appFolder/presets/m365.json"」と入力 Enter キーを押して、Microsoft 365 の構成で開発プロキシを起動します。

サンプル アプリを起動する

  • コマンド プロンプトを開き、samples ディレクトリに移動します。
  • 「npx lite-server」と入力し、Enter 押してサンプル アプリ Web サーバーを起動します。

macOS 上の Microsoft Edge ブラウザーで実行されているサンプル アプリのスクリーンショット。アプリには大きな Microsoft ロゴが表示され、その下に 2 つのボタンが表示されます。

サンプル アプリをテストする

  1. 実行中のアプリで、Without SDK ボタンを選択します。

注意

Without SDK ボタンをクリックした後に空のページが表示された場合は、Azure AD アプリ登録が構成されていることを確認してください。 この問題は、アプリ登録の Client ID を含む .env ファイルが見つからない場合に発生します。

  1. Login ボタンを選択し、サインイン フローを完了します。

Windows 11 の Microsoft Edge ブラウザーで実行されているサンプル アプリのスクリーンショット。アプリには大きな Microsoft ロゴが表示され、その下に 2 つのボタンが表示されます。

開発プロキシでは、Microsoft Graph への要求をインターセプトすることで、アプリケーションにエラーが発生します。 リクエストは 50% の確率で失敗し、サポート済みの HTTP エラー ステータス コードがランダムに表示されます。

プロキシ出力を表示し、少し時間を取ってサンプル アプリを更新します。 サンプル アプリがプロキシによって発生したエラーを処理する (この場合は処理しない) 方法を確認します。

Microsoft Edge で実行されているサンプル アプリのスクリーンショット。ユーザーアバターはアプリに表示されません。Microsoft Edge 開発者ツールは、コンソール ログにエラーが表示された状態で開かれています。

  1. Ctrl + C押して、開発プロキシを停止します。

次の手順

使い方ガイドを調べる