組織データ (メール、ファイル、チャット、予定表イベント) をカスタム アプリケーションに直接統合することで、ユーザーの生産性を向上させます。 Microsoft Graph API と Microsoft Entra ID を使用すると、アプリ内で関連するデータをシームレスに取得して表示できるため、ユーザーがコンテキストを切り替える必要が減ります。 顧客に送信されたメールを参照する場合でも、Teams メッセージを確認する場合でも、ファイルにアクセスする場合でも、ユーザーはアプリを離れることなく必要な情報をすばやく見つけることができ、意思決定プロセスを合理化できます。
この演習では、以下のことを行います。
- Microsoft Graph が組織のデータにアクセスしてアプリに取り込むことができるように、Microsoft Entra ID アプリの登録を作成します。
- チャット メッセージを特定のチャネルに送信するために必要なMicrosoft Teamsから
teamID とchannelID を見つけます。 - プロジェクトの .env ファイルを Microsoft Entra ID アプリ登録の値で更新します。
Microsoft Entra ID アプリ登録を作成する
Azure portal に移動し、Microsoft Entra ID を選択します。
[ Manage -->App registrations]\(アプリの登録\ ) の後に [ + 新規登録] を選択します。
次に示すように、新しいアプリ登録フォームの詳細を入力し、[ 登録] を選択します。
- 名前: microsoft-graph-app
- サポートされているアカウントの種類: 任意の組織ディレクトリ内のアカウント (Microsoft Entra ID テナント - マルチテナント)
- リダイレクト URI:
-
シングルページ アプリケーション (SPA) を選択し、[
http://localhost:4200] フィールドに「」と入力します。
-
シングルページ アプリケーション (SPA) を選択し、[
- [登録] を選択して、アプリの登録を作成します。
リソース メニューで [ 概要 ] を選択し、
Application (client) IDの値をクリップボードにコピーします。
プロジェクトの .env ファイルを更新する
エディターで .env ファイルを開き、
Application (client) ID値をENTRAID_CLIENT_IDに割り当てます。ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>アプリから Teams チャネルにメッセージを送信する機能を有効にする場合は、Microsoft 365 開発テナント アカウントを使用して Microsoft Teams にサインインします (これはチュートリアルの事前質問に記載されています)。
サインインしたら、チームを展開し、アプリからメッセージを送信するチャネルを見つけます。 たとえば、 会社 のチームと 一般 チャネル (または使用するチーム/チャネル) を選択できます。
チーム ヘッダーで、3 つのドット (...) をクリックし、[ チームへのリンクを取得] を選択します。
ポップアップ ウィンドウに表示されるリンクでは、チーム ID は
team/後の文字と数字の文字列です。 たとえば、"https://teams.microsoft.com/l/team/19%3ae9b9.../"" リンクでは、チーム ID は 9b9%3ae19 です。 次の/文字まで。チーム ID をコピーし、
TEAM_IDファイル内のに割り当てます。チャネル ヘッダーで、3 つのドット (...) をクリックし、[ チャネルへのリンクを取得] を選択します。
ポップアップ ウィンドウに表示されるリンクでは、チャネル ID は
channel/後の文字と数字の文字列です。 たとえば、リンク "https://teams.microsoft.com/l/channel/19%3aQK02.../"" では、チャネル ID は 19%3aQK02 です。 次の/文字まで。チャネル ID をコピーし、
CHANNEL_IDファイル内のに割り当てます。続行する前に 、env ファイルを保存します。
アプリケーションおよび API サーバーの起動/再起動
ここまでに完了した演習に基づいて、次の手順の 1 つ実行します。
前の演習でデータベース、API サーバー、および Web サーバーを起動した場合は、API サーバーと Web サーバーを停止し、それらを再起動して .env ファイルの変更を取得する必要があります。 データベースは実行したままにしておくことができます。
API サーバーと Web サーバーを実行しているターミナル ウィンドウを見つけ、 Ctrl キーを押しながら C キー を押して停止します。 各ターミナル ウィンドウに「
npm start」と入力し、Enter キーを押して、もう一度起動 します。 次の演習に進みます。データベース、API サーバー、および Web サーバーをまだ起動していない場合は、次の手順を実行します。
次の手順では、Visual Studio Code で 3 つのターミナル ウィンドウを作成します。
Visual Studio Code ファイルの一覧で .env ファイルを右クリックし、[ 統合ターミナルで開く] を選択します。 続行する前に、ターミナルがプロジェクトのルート ( openai-acs-msgraph ) にあることを確認します。
PostgreSQL データベースを開始するには、次 のいずれかの オプションを選択します。
Docker Desktop をインストールして実行している場合は、ターミナル ウィンドウで
docker-compose up実行し、Enter キーを押します。podman-compose がインストールされ、実行されている Podman がある場合は、ターミナル ウィンドウで
podman-compose up実行し、Enter キーを押します。Docker Desktop、Podman、nerdctl、またはインストールした別のコンテナー ランタイムを使用して PostgreSQL コンテナーを直接実行するには、ターミナル ウィンドウで次のコマンドを実行します。
Mac、Linux、または Linux 用 Windows サブシステム (WSL):
[docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgresPowerShell を使用した Windows:
[docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
データベース コンテナーが起動したら、Visual Studio Code +の アイコンを押して、2 つ目のターミナル ウィンドウを作成します。
cdをサーバー/typescript フォルダーに移動し、次のコマンドを実行して依存関係をインストールし、API サーバーを起動します。npm installnpm start
Visual Studio Code +の アイコンをもう一度押して、3 番目のターミナル ウィンドウを作成します。
cdを クライアント フォルダーに移動し、次のコマンドを実行して依存関係をインストールし、Web サーバーを起動します。npm installnpm start
ブラウザーが起動し、 http://localhost:4200されます。
