Создание боковой панели собрания
Боковая панель собраний Microsoft Teams расширяет возможности собраний и помогает организаторам и выступающим иметь различные наборы представлений и действий.
Основные возможности боковой панели собрания:
- Положения для добавления нового пункта повестки дня.
- Добавляет повестку дня в качестве текстового ввода в список боковой панели собрания.
- Публикует список повестки дня в чате собрания.
Это пошаговое руководство поможет вам создать панель на стороне собрания для добавления и публикации повестки дня. Вы увидите следующие выходные данные:
Предварительные условия
Убедитесь, что установлены следующие средства и настроена среда разработки:
| Установка | Для использования... | |
|---|---|---|
| Microsoft Teams | Microsoft Teams позволяет взаимодействовать со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков в одном месте. | |
| Visual Studio 2022 | Вы можете установить корпоративную версию в Visual Studio 2022, а также рабочие нагрузки ASP.NET и веб-разработки. Используйте последнюю версию. | |
| Пакет SDK для .NET Core | Настраиваемые привязки для локальной отладки и развертываний приложений Функций Azure. Используйте последнюю версию или установите переносимую версию. | |
| Node.js и NPM | Серверной среды выполнения JavaScript. Дополнительные сведения см . вNode.js таблице совместимости версий для типа проекта. | |
| Клиентская библиотека JavaScript в Microsoft Teams (TeamsJS) | Пакет можно установить с помощью npm или yarn. Используйте последнюю версию. | |
| Пакет SDK Live Share | Live Share обеспечивает совместную работу приложений. | |
| Туннель разработки | Функции приложений Teams (диалоговые боты, расширения сообщений и входящие веб-перехватчики) требуют входящих подключений. Туннель соединяет систему разработки с Teams. Туннель разработки — это мощный инструмент для безопасного открытия локального узла в Интернете и контроля доступа. Туннель разработки доступен в Visual Studio 2022 версии 17.7.0 или более поздней. Вы также можете использовать ngrok в качестве туннеля для подключения системы разработки к Teams. Он не требуется для приложений, которые содержат только вкладки. Этот пакет устанавливается в каталоге проекта (с помощью npm devDependencies). |
Примечание.
После скачивания ngrok зарегистрируйтесь и установите authtoken.
Настройка локальной среды
Откройте Microsoft-Teams-Samples.
Выберите Код.
В раскрывающемся меню выберите Открыть с помощью GitHub Desktop.
Выберите Клонировать.
Примечание.
Если вы столкнулись с ошибкой Имя файла слишком долго, примените команду git config --system core.longpaths true Git в выбранном терминале администратора.
Регистрация приложения Microsoft Entra
Чтобы создать и зарегистрировать бота в Microsoft Entra ID, выполните следующие действия.
- Создайте ресурс Azure Bot для регистрации бота в службе Azure Bot.
- Создайте секрет клиента, чтобы включить проверку подлинности единого входа (SSO) бота.
- Добавьте канал Teams для развертывания бота.
- Создайте туннель ngrok или dev для конечных точек веб-сервера.
- Добавьте конечную точку обмена сообщениями в созданный туннель ngrok или dev.
Добавление регистрации приложения
Перейдите на портал Azure.
Выберите Регистрация приложений.
Выберите + Новая регистрация.
Введите имя приложения.
Выберите Учетные записи в любом каталоге организации (любой клиент Microsoft Entra ID — Мультитенант).
Нажмите Зарегистрировать.
Ваше приложение зарегистрировано в Идентификаторе Microsoft Entra. Откроется страница обзора приложения.
Примечание.
Сохраните идентификатор приложения из идентификатора приложения (клиента) и каталога (клиента) для дальнейшего использования.
Создание туннеля
Откройте Visual Studio.
Выберите Создать новый проект.
В поле поиска введите ASP.NET. В результатах поиска выберите ASP.NET Core Web App.
Нажмите кнопку Далее.
Введите имя проекта и нажмите кнопку Далее.
Нажмите Создать.
Откроется окно обзора.
В раскрывающемся списке отладки выберите Dev Tunnels (без активного туннеля)>Создать туннель....
Открывается всплывающее окно.
Обновите следующие сведения во всплывающем окне:
- Учетная запись. Введите учетную запись Майкрософт или GitHub.
- Имя: введите имя туннеля.
- Тип туннеля: в раскрывающемся списке выберите Временный.
- Доступ: в раскрывающемся списке выберите Общедоступный.
Нажмите OK.
Появится всплывающее окно, показывающее, что туннель разработки успешно создан.
Нажмите OK.
Созданный туннель можно найти в раскрывающемся списке отладки следующим образом:
Нажмите клавишу F5 , чтобы запустить приложение в режиме отладки.
Если появится диалоговое окно Предупреждение системы безопасности , выберите Да.
Открывается всплывающее окно.
Нажмите Продолжить.
В новом окне браузера откроется домашняя страница туннеля разработки, и туннель разработки теперь активен.
Перейдите в Visual Studio и выберите Просмотреть выходные > данные.
В раскрывающемся меню консоли вывода выберите Dev Tunnels (Туннели разработки).
В консоли вывода отображается URL-адрес туннеля разработки.
Добавление веб-проверки подлинности
В левой области в разделе Управление выберите Проверка подлинности.
Выберите Добавить веб-сайт платформы>.
Введите URI перенаправления для приложения, добавив
auth-endк полному доменному имени. Например,https://your-devtunnel-domain/auth-endилиhttps://your-ngrok-domain/auth-end.В разделе Неявное предоставление и гибридные потоки установите флажки Маркеры доступа и маркеры идентификаторов .
Нажмите Настроить.
В разделе Интернет выберите Добавить URI.
Введите
https://token.botframework.com/.auth/web/redirect.Выберите Сохранить.
Создание секрета клиента
В левой области в разделе Управление выберите Сертификаты & секреты.
В разделе Секреты клиента выберите + Новый секрет клиента.
Откроется окно Добавление секрета клиента .
Введите Описание.
Нажмите Добавить.
В разделе Значение выберите Копировать в буфер обмена , чтобы сохранить значение секрета клиента для дальнейшего использования.
Добавление разрешения API
В области слева в разделе Управление выберите Разрешения API.
Выберите + Добавить разрешение.
Выберите Microsoft Graph.
Выберите Делегированные разрешения.
Выберите следующие разрешения:
- Разрешения> OpenIdэлектронная почта, offline_access, openid, профиль.
- Пользователь>User.Read.
Выберите Добавить разрешения.
Примечание.
- Если приложению не предоставлено согласие ИТ-администратора, пользователи должны предоставить согласие при первом использовании приложения.
- Пользователям требуется согласие на разрешения API, только если приложение Microsoft Entra зарегистрировано в другом клиенте.
Добавление URI идентификатора приложения
В области слева в разделе Управление выберите Предоставить API.
Рядом с полем URI идентификатора приложения нажмите кнопку Добавить.
Обновите URI идентификатора
api://your-devtunnel-domain/botid-{AppID}приложения в формате илиapi://your-ngrok-domain/botid-{AppID}и нажмите кнопку Сохранить.
На следующем рисунке показано доменное имя:
Добавление области
В области слева в разделе Управление выберите Предоставить API.
Выберите + Добавить область.
Введите access_as_user в качестве имени области.
В разделе Кто может предоставить согласие? выберите Администраторы и пользователи.
Обновите значения остальных полей следующим образом:
Введите , что Teams может получить доступ к профилю пользователя в качестве отображаемого имени согласия администратора.
Введите Позволяет Teams вызывать веб-API приложения от имени текущего пользователя в качестве описания согласия администратора.
Введите Teams для доступа к профилю пользователя и отправлять запросы от имени пользователя в качестве отображаемого имени согласия пользователя.
Введите Включить Teams для вызова API этого приложения с теми же правами, что и у пользователя , в описании согласия пользователя.
Убедитесь, что параметру Состояние присвоено значение Включено.
Нажмите кнопку Добавить область.
На следующем рисунке показаны поля и значения:
Примечание.
Имя области должно совпадать с URI идентификатора приложения с
/access_as_userдобавлением в конце.
Добавление клиентского приложения
В области слева в разделе Управление выберите Предоставить API.
В разделе Авторизованные клиентские приложения определите приложения, которые вы хотите авторизовать для веб-приложения вашего приложения.
Выберите + Добавить клиентское приложение.
Добавьте мобильное или классическое приложение Teams и веб-приложение Teams.
Для мобильных или классических приложений Teams: введите идентификатор клиента как
1fec8e78-bce4-4aaf-ab1b-5451cc387264.
Для веб-сайта Teams: введите идентификатор клиента как
5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Установите флажок Авторизованные области .
Нажмите кнопку Добавить приложение.
На следующем рисунке отображается идентификатор клиента:
Создание бота
Создание ресурса бота Azure
Примечание.
Если вы уже тестируете бот в Teams, выйдите из этого приложения и Teams. Чтобы увидеть это изменение, войдите еще раз.
Перейдите на домашнюю страницу.
Выберите + Создать ресурс.
В поле поиска введите Azure Bot.
Выберите ВВОД.
Выберите Azure Bot.
Нажмите Создать.
Введите имя бота в поле Дескриптор бота.
Выберите свою подписку в раскрывающемся списке.
Выберите свою группу ресурсов в раскрывающемся списке.
Если у вас нет существующей группы ресурсов, можно создать новую группу ресурсов. Чтобы создать новую группу ресурсов, выполните следующие действия.
- Выберите Создать.
- Введите имя ресурса и нажмите кнопку ОК.
- Выберите расположение в раскрывающемся списке Расположение новой группы ресурсов .
В разделе Цены выберите Изменить план.
Выберите FO Free>Select.
В разделе Идентификатор приложения Майкрософт выберите Тип приложения в качестве мультитенантного.
В поле Тип создания выберите Использовать существующую регистрацию приложения.
Введите идентификатор приложения.
Примечание.
Нельзя создать несколько ботов с одним идентификатором приложения Майкрософт.
Выберите Проверить и создать.
После завершения проверки нажмите кнопку Создать.
Подготовка бота занимает несколько минут.
Выберите пункт Перейти к ресурсу.
Вы успешно создали бот Azure.
Добавление канала Teams
В левой области выберите Каналы.
В разделе Доступные каналы выберите Microsoft Teams.
Установите флажок, чтобы принять условия предоставления услуг.
Выберите Принять.
Нажмите Применить.
Добавление конечной точки обмена сообщениями
Используйте URL-адрес туннеля разработки в консоли вывода в качестве конечной точки обмена сообщениями.
В левой области в разделе Параметры выберите Конфигурация.
Обновите конечную точку обмена сообщениями в формате
https://your-devtunnel-domain/api/messages.
Нажмите Применить.
Вы успешно настроили бот в службе Azure Bot.
Примечание.
Если ключ инструментирования Application Insights отображает ошибку, обновите идентификатор приложения.
Настройка параметров приложения и файлов манифеста
Перейдите к файлу appsettings.json в клонированного репозитория.
Откройте файл appsettings.json в Visual Studio и обновите следующие сведения:
- Замените
<<Microsoft-App-ID>>на идентификатор приложения Майкрософт бота. - Замените
<<Microsoft-App-Secret>>значением Значениесекрета клиента бота. - Замените
<<Your_Domain_URL>>на доменное имя ngrok или dev tunnel.
- Замените
Перейдите к файлу manifest.json в клонированного репозитория.
Откройте файл manifest.json в Visual Studio и внесите следующие изменения:
- Замените
<<Manifest-id>>уникальным идентификатором манифеста. Вы также можете ввести идентификатор приложения Майкрософт. - Замените все вхождения
{{domain-name}}и{{Base_URL}}доменным именем ngrok или dev tunnel. - Замените все вхождения
<<YOUR-MICROSOFT-APP-ID>>идентификатором приложения Microsoft бота.
- Замените
Сборка и запуск службы
Чтобы создать и запустить службу, используйте Visual Studio или командную строку:
Откройте Visual Studio.
Перейдите в раздел Файл>Открыть>проект/Решение...
Выберите файл SidePanel.csproj из папки csharp>SidePanel .
Нажмите клавишу F5 , чтобы запустить проект. Проект можно запустить с помощью Visual Studio или .NET в соответствующей папке.
Перейдите в папку примеров>meetings-sidepanel>csharp>ClientApp и выполните следующую команду:
npx @fluidframework/azure-local-service@latestВыберите Да, если появится следующий диалог:
Появится веб-страница с сообщением " Ваш бот готов!
:::image type="content" source="~/assets/images/meetings-side-panel/appisready_1.png" alt-text="Screenshot shows the webpage that displays that your bot is ready.":::
Добавление боковой панели собрания в Teams
В клонированного репозитория перейдите к csharp > SidePanel > AppManifest.
Создайте файл .zip со следующими файлами, которые находятся в папке AppManifest :
manifest.json
outline.png
color.png
Создайте собрание с несколькими выступающими и участниками.
После создания собрания присоединитесь к собранию.
Перейдите на страницу сведений о собрании и щелкните значок Приложения , чтобы добавить приложение.
Во всплывающем окне выберите Управление приложениями.
Выберите Отправить приложение.
Перейдите в раздел csharp > SidePanel > AppManifest.
Выберите Открыть , чтобы отправить файл .zip, созданный в папку AppManifest .
Нажмите Добавить.
В разделе Управление приложениями отображается список приложений.
Перейдите на собрание Teams.
Выберите Приложения.
На странице выбора приложения отображается приложение "Боковая панель ".
Выберите приложение "Боковая панель".
Выберите Сохранить.
Приложение отображается на боковой панели собрания.
Взаимодействие с приложением в Teams
Давайте взаимодействовать с приложением в Teams!
Выберите Добавить новый элемент повестки дня , чтобы добавить новую повестку дня в список по умолчанию.
Введите новый элемент повестки дня и нажмите кнопку Добавить.
Новая повестка дня будет добавлена в список.
Выберите Опубликовать повестку дня.
Новый список повестки дня отображается в чате собрания.
Выполнение задачи
Вы придумали такие выходные данные?
Поздравляем!
Вы завершили учебник, чтобы приступить к работе с приложением боковой панели !
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по