演習 - Microsoft Graph を使用してユーザーの予定表イベントにアクセスする

完了

これまでに説明したすべての概念を使用して、サンプル アプリを変更し、予定表イベントにアクセスしてみましょう。

  1. コード エディターで、index.html を見つけます。 次の HTML コードを <main> タグ内の、閉じる </main> タグの直前に追加します。

    <button id="btnShowEvents" style="display: none;" onclick="displayEvents();">Show events</button>
    <div id="eventWrapper" style="display: none;">
      <p>Your events retrieved from Microsoft Graph for the upcoming week:</p>
      <ul id="events"></ul>
    </div>
    
  2. エディターで graph.js を見つけます。 Microsoft Graph API エンドポイント /me/calendarView を使用して、サインイン ユーザーの翌週の予定表イベントを取得する新しい関数を追加します。 この関数 getEvents() を呼び出さないでください。

    次のコードをファイルの最後に追加します。

    async function getEvents() {
      ensureScope('Calendars.read');
      const dateNow = new Date();
      const dateNextWeek = new Date();
      dateNextWeek.setDate(dateNextWeek.getDate() + 7);
      const query = `startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()}`;
    
      return await graphClient
      .api('/me/calendarView').query(query)
      .select('subject,start,end')
      .orderby(`start/DateTime`)
      .get();
    }
    
  3. ui.js ファイルを見つけて、Microsoft Graph から受け取った予定表イベントをリスト要素に表示する新しい関数を追加します。 この関数 displayEvents() を呼び出さないでください。

    次のコードをファイルの最後に追加します。

    async function displayEvents() {
      var events = await getEvents();
      if (!events || events.value.length < 1) {
        var content = document.getElementById('content');
        var noItemsMessage = document.createElement('p');
        noItemsMessage.innerHTML = `No events for the coming week!`;
        content.appendChild(noItemsMessage)
    
      } else {
        var wrapperShowEvents = document.getElementById('eventWrapper');
        wrapperShowEvents.style = "display: block";
        const eventsElement = document.getElementById('events');
        eventsElement.innerHTML = '';
        events.value.forEach(event => {
          var eventList = document.createElement('li');
          eventList.innerText = `${event.subject} - From  ${new Date(event.start.dateTime).toLocaleString()} to ${new Date(event.end.dateTime).toLocaleString()} `;
          eventsElement.appendChild(eventList);
        });
      }
      var btnShowEvents = document.getElementById('btnShowEvents');
      btnShowEvents.style = "display: none";
    }
    
  4. 同じ ui.js ファイルで、displayUI() 関数を更新して、正常に承認された場合にのみ [イベントの表示] ボタンを表示するようにします。

    次のコードを displayUI() 関数の最後に追加します。

    var btnShowEvents = document.getElementById('btnShowEvents');
    btnShowEvents.style = "display: block";
    

サインイン ユーザーの翌週のイベントに対する追加関数とコード スニペットをすべて追加し終わったので、次のステップはアプリをローカルで実行することです。

アプリを実行する

アプリケーションを実行してテストするには、Microsoft Outlook または Microsoft Teams を使用して予定表に予定表イベントを追加する必要があります。 イベントは 1 週間以内に収める必要があります。

ヒント

この手順では、Node.js がマシンにインストールされていることを確認してください。

アプリケーションがローカルで実行できるかを確認するときが来ました。

  1. ターミナル ウィンドウで、ソース コードが配置されているプロジェクト フォルダーに移動します。

  2. コマンドラインで次のスクリプトを実行すると、アプリがローカルで起動し、ブラウザーで http://localhost:8080 が開きます。

    npm start
    
  3. アプリが正しく構成されている場合は、次のようなサインイン ボタンが表示されます。

    [Microsoft アカウントでサインイン] のボタンを示すスクリーンショット。

  4. ユニット 2 で使用した Microsoft 365 開発者テナントで、Microsoft Entra アプリケーションを登録したのと同じアカウントを使用してサインインします。

  5. サインインに成功すると、同意を求めるプロンプトが表示されます。

    同意ページのスクリーンショット。

  6. アプリケーションがユーザーに代わって操作を実行することに同意するには、[同意する] を選択します。

  7. 同意すると、アプリケーションは検証済みのアカウント情報を使用してアクセス トークンを取得しようとします。 Microsoft 認証ライブラリがユーザーに代わってこのステップを処理します。

  8. アプリケーションにトークンが戻された後、Microsoft Graph /me エンドポイントに対して GET 要求が行われます。 アクセス トークンが認証ヘッダーで渡されます。 /me を呼び出すと、サービスからデータが安全に取得されます。

  9. Microsoft Graph から応答を受信すると、サインインしたユーザーの名前と共にウェルカム メッセージが表示されます。 [イベントの表示] ボタンを選びます。

    ウェルカム メッセージのスクリーンショット。

  10. 別の同意のダイアログ ボックスが表示されます。 ダイアログで、同意するユーザーの予定表の読み取りアクセス許可範囲を確認します。

    予定表アクセス許可の同意ページのスクリーンショット。

  11. アプリケーションがユーザーに代わって操作を実行することに同意するには、[同意する] を選択します。

  12. 同意すると、アプリケーションは検証済みのアカウント情報を使用してアクセス トークンを取得しようとします。 Microsoft 認証ライブラリがユーザーに代わってこのステップを処理します。

  13. アプリケーションにトークンが戻された後、Microsoft Graph /me/calendarView エンドポイントに対して GET 要求が行われます。 アクセス トークンが認証ヘッダーで渡されます。 /me/calendarView を呼び出すと、サービスからデータが安全に取得されます。

  14. Microsoft Graph から応答を受信すると、サインインしたユーザーの翌週の予定表イベントがリスト表示されます。

    ユーザーの 1 週間のイベントのスクリーンショット

Microsoft Graph を使用して、サインイン ユーザーの Microsoft 365 予定表イベントにアクセスし表示する方法を実証できました。