Создание приложений для повышения производительности с помощью Microsoft Graph Toolkit

Microsoft Graph Toolkit — это коллекция веб-компонентов и поставщиков проверки подлинности для подключения приложений к данным и аналитике Microsoft 365. В этом руководстве показано, как создать веб-приложение для мониторинга событий календаря, задач задач и файлов с помощью компонентов Microsoft Graph Toolkit и поставщика MSAL2.

Как работает пример?

В этом примере создается веб-приложение, которое использует поставщик MSAL2 microsoft Graph Toolkit для обеспечения проверки подлинности через Microsoft Entra ID и использует компоненты пользовательского интерфейса для отображения событий календаря, задач задач и файлов, которые будут выглядеть как собственные возможности Майкрософт.

Снимок экрана: пример One Productivity Hub

Предварительные требования

Вам нужен клиент разработчика Microsoft 365. Вы можете получить право на участие в программе для разработчиков Microsoft 365. Дополнительные сведения см. в разделе Вопросы и ответы. Кроме того, вы можете зарегистрироваться для получения бесплатной пробной версии на 1 месяц или приобрести план Microsoft 365.
Установите Visual Studio Code.
Установите Visual Studio Code Live Server для тестирования веб-приложения.

Регистрация приложения в Microsoft Entra ID

Осталось 40 мин

Зарегистрируйте приложение в Microsoft Entra ID, чтобы включить проверку подлинности пользователей.

Перейдите на Центр администрирования Microsoft Entra и войдите в клиент Microsoft 365 Developer Program.
Разверните меню >Удостоверение, разверните пункт Приложения>выберите Регистрация приложений>Новая регистрация.
Заполните форму Регистрация приложения , используя следующие значения, а затем выберите Зарегистрировать.
- Имя: демонстрация one Productivity Hub
- Поддерживаемые типы учетных записей: учетные записи в любом каталоге организации (любой каталог Microsoft Entra — мультитенантный) и личные учетные записи Майкрософт (например, Skype, Xbox).
- URI перенаправления. Выберите одностраничное приложение (SPA) в качестве типа URI перенаправления и поместите http://localhost:3000/index.html в качестве URI перенаправления для локальной проверки.
После завершения регистрации приложения перейдите на вкладку Обзор на странице приложения и скопируйте идентификатор приложения (клиента). Этот идентификатор потребуется для следующего шага.

Создание приложения

Осталось 30 мин

На этом шаге вы создадите веб-приложение и включите проверку подлинности с помощью поставщика MICROSOFT Graph Toolkit MSAL2.

Создание веб-приложения

Создайте папку и присвойте ей имя OneProductivityHub. Щелкните правой кнопкой мыши и откройте папку с Visual Studio Code.
Создайте новый файл в папке OneProductivityHub и назовите егоindex.html.
Выберите CTRL + SPACE и выберите пример HTML из параметров.
Чтобы включить проверку подлинности с помощью Microsoft Graph Toolkit через CDN, добавьте следующий тег скрипта в index.html в <body></body> разделе:
```
<script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
</script>
```

Инициализация поставщика MSAL2

В index.htmlдобавьте поставщик MSAL2 в <body></body> раздел следующим образом:
```
<mgt-msal2-provider
    client-id="<YOUR_CLIENT_ID>"
    scopes="User.Read,
    User.ReadBasic.All,
    Calendars.Read,
    Files.Read,
    Files.Read.All,
    Sites.Read.All,
    Tasks.Read,
    Tasks.ReadWrite,
    People.Read">
</mgt-msal2-provider>
```
Важно!

Следующие области, определенные в поставщике, будут отображаться в виде списка необходимых разрешений для запроса согласия пользователя в процессе проверки подлинности: User.Read, User.ReadBasic.All, Calendars.Read, Files.Read, Files.Read.All, Sites.Read.All, Tasks.Read, Tasks.ReadWrite, People.Read.
Замените <YOUR_CLIENT_ID> идентификатором клиента, скопированным из приложения Microsoft Entra.

Убедитесь, что окончательная версия index.html аналогична следующему примеру:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>One Productivity Hub</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
</head>
<body>
  <script type="module">
    import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
    registerMgtMsal2Provider();
    registerMgtComponents();
  </script>
  <mgt-msal2-provider
      client-id="<YOUR_CLIENT_ID>"
      scopes="User.Read,
      User.ReadBasic.All,
      Calendars.Read,
      Files.Read,
      Files.Read.All,
      Sites.Read.All,
      Tasks.Read
      Tasks.ReadWrite,
      People.Read">
  </mgt-msal2-provider>
</body>
</html>

Проектирование приложения

Осталось 20 мин

На этом шаге вы создадите веб-приложение с помощью компонентов Microsoft Graph Toolkit и создадите стиль с помощью CSS.

В index.html в <body></body>разделе добавьте следующий код в поставщик.

<div>
  <mgt-login />
</div>

Создание заголовка и столбца для остальных компонентов

Чтобы сделать приложение структурированным, создайте заголовок и столбец для каждой функции, которая будет добавлена в One Productivity Hub. В index.html в разделе <body></body>добавьте следующий HTML-код в div под компонентом входа.

<div class="features">

  <div class="header"><div class="title">
    <h2>One Productivity Hub</h2>
    <div class="row">
      <div class="column"><h3>Calendar events</h3></div>
      <div class="column"><h3>To-do tasks</h3></div>
      <div class="column"><h3>Files</h3></div>
    </div>
  </div></div>

  <div class="row" id="content">
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
    <div class="column" id="mgt-col"></div>
  </div>

</div>

Компонент повестки дня

В разделе div с тегом class="row"добавьте компонент Agenda внутри первого div столбца div.

<mgt-agenda />

Компонент "Дела"

В разделе div, помеченном тегом class="row", добавьте компонент To-Do во второй раздел div столбца.

<mgt-todo />

Компонент FileList

В разделе div с тегом class="row"добавьте компонент списка файлов внутри третьего столбца div.

<mgt-file-list />

Стиль веб-приложения с помощью CSS

Создайте файл index.css в проекте и добавьте следующий код CSS.

body,
#root>div {
    background-color: #F3F2F1;
}
.features {
    min-height: 80vh;
    margin: 20px;
    background-color: #FFF;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
    display: flex;
    background-color: #f0f0f0;
}
.title {
    margin-top: 20px;
    margin-left: 10px;
    width: 100%;
}
.title h2 {
    font-size: 24px;
    padding-left: 5px;
    display: inline;
    font-weight: 600;
}
.title h3 {
    float: left;
    width: 32%;
    background:transparent;
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    color: #8A8886;
    font-weight: 600;
}
mgt-login {
    margin-left: 20px;
    --avatar-size: 60px;
    --font-family: 'Segoe UI';
    --font-size: 20px;
    --font-weight: 700;
    --color: black;
    --text-transform: none;
    --line2-font-size: 14px;
    --line2-font-weight: 400;
    --line2-color: #8A8886;
    --line2-text-transform: none;
}
#content, html, body {
    height: 98%;
  }
#mgt-col {
  float: left;
  width: 32%;
  background:transparent;
  height:500px;
  overflow: hidden;
  padding: 5px;
  margin-top: 5px;
}
#mgt-col:hover {
  overflow-y: auto;
}

В index.html внутри <head></head>определите ссылку href таблицы стилей как index.css.
```
<link rel='stylesheet' type='text/css' media='screen' href='index.css'>
```

Убедитесь, что окончательная версия index.html аналогична следующей.

<!DOCTYPE html>
  <html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>One Productivity Hub</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>
    <script src='main.js'></script>
  </head>
  <body>
    <script type="module">
      import { registerMgtComponents, registerMgtMsal2Provider } from "https://unpkg.com/@microsoft/mgt@4";
      registerMgtMsal2Provider();
      registerMgtComponents();
    </script>
    <mgt-msal2-provider
        client-id="<YOUR_CLIENT_ID>"
        scopes="User.Read,
        User.ReadBasic.All,
        Calendars.Read,
        Files.Read,
        Files.Read.All,
        Sites.Read.All,
        Tasks.Read,
        Tasks.ReadWrite,
        People.Read">
    </mgt-msal2-provider>
    <div>
      <mgt-login />
    </div>
    <div class="features">
        <div class="header">
            <div class="title">
                <h2>One Productivity Hub</h2>
                <div class="row">
                    <div class="column"><h3>Calendar events</h3></div>
                    <div class="column"><h3>To-do tasks</h3></div>
                    <div class="column"><h3>Files</h3></div>
                </div>
            </div>
        </div>
        <div class="row" id="content">
            <div class="column" id="mgt-col"><mgt-agenda /></div>
            <div class="column" id="mgt-col"><mgt-todo /></div>
            <div class="column" id="mgt-col"><mgt-file-list /></div>
        </div>
    </div>
  </body>
</html>

Запуск приложения

Осталось 10 мин

На этом шаге вы запустите пример приложения в браузере с помощью Live Server.

ВыберитеCTRL + SHIFT + P, чтобы открыть панель в Visual Studio Code, введите Preferences на панели и выберите Preferences: Open Workspace Settings (JSON) один из параметров.
В открываемом settings.json файле добавьте следующий код.
```
{
"liveServer.settings.host": "localhost",
"liveServer.settings.port": 3000
}
```
ВыберитеCTRL + SHIFT + P, чтобы открыть панель в Visual Studio Code, введите Live Server на панели и выберите Live Server: Open with Live Server один из параметров. Live Server запустит приложение в браузере.
Выберите Войти и используйте клиент Microsoft 365 Developer Program для входа.
Согласие на необходимые разрешения на использование функций приложения, таких как просмотр событий календаря, задач задач и папок файлов.
Чтобы убедиться, что приложение One Productivity Hub работает правильно, добавьте некоторые события календаря, задачи задач и папки файлов в клиент разработчика Microsoft 365.

Сводка

100% завершено

Вы успешно создали пример приложения One Productivity Hub с помощью Microsoft Graph Toolkit. В этом руководстве вы создали веб-приложение и потребили поставщик MICROSOFT Graph Toolkit MSAL2 и компоненты пользовательского интерфейса.

Если вы ищете способы улучшения приложения One Productivity Hub, ознакомьтесь со списком веб-компонентов, доступных в Наборе средств Microsoft Graph, и включите в приложение дополнительные компоненты.

Дальнейшие действия

Дополнительные сведения о Наборе средств Microsoft Graph см. в обзоре Microsoft Graph Toolkit и схеме обучения Разработка приложений с помощью Microsoft Graph Toolkit .

Поделиться через

Создание приложений для повышения производительности с помощью Microsoft Graph Toolkit

Как работает пример?

Предварительные требования

Регистрация приложения в Microsoft Entra ID

Создание приложения

Создание веб-приложения

Инициализация поставщика MSAL2

Проектирование приложения

Создание заголовка и столбца для остальных компонентов

Компонент повестки дня

Компонент "Дела"

Компонент FileList

Стиль веб-приложения с помощью CSS

Запуск приложения

Сводка

Дальнейшие действия

Обратная связь

Поделиться через

Создание приложений для повышения производительности с помощью Microsoft Graph Toolkit

Как работает пример?

Предварительные требования

Регистрация приложения в Microsoft Entra ID

Создание приложения

Создание веб-приложения

Инициализация поставщика MSAL2

Проектирование приложения

Инициализация компонента входа

Создание заголовка и столбца для остальных компонентов

Компонент повестки дня

Компонент "Дела"

Компонент FileList

Стиль веб-приложения с помощью CSS

Запуск приложения

Сводка

Дальнейшие действия

Обратная связь