Упражнение — отображение данных из Microsoft 365

  • 3 мин

В этом упражнении вы попрактикуетесь в использовании компонентов Microsoft Graph Toolkit в приложении и отображении данных из Microsoft 365.

Перед началом работы

Прежде чем приступить к этому упражнению, обязательно выполните первое упражнение в этом модуле.

Добавление компонента "Повестка дня" в приложение

Вы уже выполнили действия, необходимые для выполнения проверки подлинности в предыдущем упражнении. Теперь вы отобразите предстоящие события календаря в приложении для пользователя, выполнившего вход в систему. Добавьте компонент Agenda в текст файлаindex.html :

<mgt-agenda></mgt-agenda>

Окончательная версия файла index.html будет выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <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>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

Тестирование приложения в браузере

Если вы остановили Dev Proxy после последнего упражнения, запустите его снова. В терминале выполните следующую команду:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Не закрывайте терминал и запускайте прокси-сервер разработки во время тестирования приложения.

Протестируйте приложение в браузере, выполнив указанные ниже действия.

  1. Если вы впервые используете клиент Microsoft 365 для разработчиков, в календаре учетной записи этого клиента, возможно не будет никаких событий. Прежде чем приступить к тестированию приложения, перейдите по адресу https://outlook.office.com/calendar и войдите в систему, используя свою учетную запись клиента Microsoft 365 для разработчиков. Добавьте примеры событий для предстоящих дней в календаре.

  2. В Visual Studio Code запустите Live Server , чтобы протестировать приложение. Откройте браузер и перейдите по адресу to http://localhost:3000.

  3. Войдите в систему с использованием своей учетной записи клиента Microsoft 365 для разработчиков. Согласие на необходимые разрешения календаря и нажмите кнопку Принять.

  4. В приложении отобразятся предстоящие события календаря:

    Окончательный результат в Наборе средств Microsoft Graph.

  1. В Visual Studio Code запустите Live Server , чтобы протестировать приложение. Откройте браузер и перейдите по адресу to http://localhost:3000.

  2. В веб-браузере войдите в приложение. Прокси-сервер разработки имитирует процесс проверки подлинности.

  3. В приложении отобразятся предстоящие события календаря:

    Окончательный результат в Наборе средств Microsoft Graph.

  4. Остановите dev Proxy, нажав клавиши CTRL+C в терминале.

Примечание.

Мы будем рады вашим отзывам о вашем опыте использования прокси-сервера разработки для выполнения этого упражнения. Пожалуйста, уделите время, чтобы завершить этот короткий опрос.