Вызов диалоговых окон из Microsoft Teams
Диалоговые окна (называемые модулями задач в TeamsJS версии 1.x) можно вызывать из ботов Teams с помощью адаптивных карточек или карточек Bot Framework.
Основные возможности диалогов:
- Улучшайте взаимодействие с пользователем, избегая нескольких шагов.
- Помогите пользователям отслеживать состояние бота.
- Получение входных данных от пользователя и отображение пользовательского содержимого веб-страницы.
Это пошаговое руководство поможет вам создать пример бота Azure для вызова диалогового окна Teams. Вы увидите следующие выходные данные:
Предварительные требования
Убедитесь, что вы установили следующие средства и настроили среду разработки:
| Установка | Для использования... | |
|---|---|---|
| Microsoft Teams | Microsoft Teams для совместной работы со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков в одном месте. | |
| Visual Studio 2022 |
Вы можете установить корпоративную версию в Visual Studio 2022, а также рабочие нагрузки ASP.NET и веб-разработки. Используйте последнюю версию. | |
| Пакет SDK для .NET Core | Настраиваемые привязки для локальной отладки и Функции Azure развертываний приложений. Используйте последнюю версию или установите переносимую версию. | |
| Туннель разработки | Функции приложений Teams (диалоговые боты, расширения сообщений и входящие веб-перехватчики) требуют входящих подключений. Туннель соединяет систему разработки с Teams. Туннель разработки — это мощный инструмент для безопасного открытия локального узла в Интернете и контроля доступа. Туннель разработки доступен в Visual Studio 2022 версии 17.7.0 или более поздней. или вы также можете использовать ngrok в качестве туннеля для подключения системы разработки к Teams. Он не требуется для приложений, которые содержат только вкладки. Этот пакет устанавливается в каталоге проекта (с помощью npm devDependencies). |
Примечание.
После скачивания ngrok зарегистрируйтесь и установите authtoken.
Настройка локальной среды
Откройте Microsoft-Teams-Samples.
Выберите Код.
В раскрывающемся меню выберите Открыть с помощью GitHub Desktop.
Выберите Клонировать.
Регистрация приложения Microsoft Entra
Следующие действия помогут вам создать и зарегистрировать бот в портал Azure.
- Создайте и зарегистрируйте приложение Azure.
- Создайте секрет клиента, чтобы включить проверку подлинности бота с единым входом.
- Добавьте канал Teams для развертывания бота.
- Создайте туннель к конечным точкам веб-сервера с помощью туннеля разработки (рекомендуется) или ngrok.
- Добавьте конечную точку обмена сообщениями в созданный туннель разработки.
Добавление регистрации приложения
Перейдите к портал Azure.
Выберите Регистрация приложений.
Выберите + Новая регистрация.
Введите имя приложения.
Выберите Учетные записи в любом каталоге организации (клиент с идентификатором любого Microsoft Entra — Мультитенант).
Нажмите Зарегистрировать.
Приложение зарегистрировано в идентификаторе Microsoft Entra. Откроется страница обзора приложения.
Примечание.
Сохраните идентификатор приложения из идентификатора приложения (клиента) и каталога (клиента) для дальнейшего использования.
Создание туннеля
Откройте Visual Studio.
Выберите Создать новый проект.
В поле поиска введите ASP.NET. В результатах поиска выберите ASP.NET Core Веб-приложение.
Нажмите кнопку Далее.
Введите имя проекта и нажмите кнопку Далее.
Нажмите Создать.
Откроется окно обзора.
В раскрывающемся списке отладки выберите Dev Tunnels (без активного туннеля)>Создать туннель....
Открывается всплывающее окно.
Обновите следующие сведения во всплывающем окне:
- Учетная запись. Введите учетную запись Майкрософт или GitHub.
- Имя: введите имя туннеля.
- Тип туннеля: в раскрывающемся списке выберите Временный.
- Доступ: в раскрывающемся списке выберите Общедоступный.
Нажмите ОК.
Появится всплывающее окно, показывающее, что туннель разработки успешно создан.
Нажмите ОК.
Созданный туннель можно найти в раскрывающемся списке отладки следующим образом:
Нажмите клавишу 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 и обновите следующие сведения:
- Задайте значение
"MicrosoftAppType"MultiTenant. - Задайте
"MicrosoftAppId"для бота идентификатор приложения Майкрософт. - Задайте
"MicrosoftAppPassword"значение Значениесекрета клиента. - Задайте
"MicrosoftAppTenantId"идентификатор клиента, в котором используется приложение. - Задайте
"BaseUrl"полное доменное имя (https — io).
- Задайте значение
Перейдите к файлу manifest.json в клонированного репозитория.
Откройте файл manifest.json и обновите следующие сведения:
- Замените все вхождения
<<Domain-Name>>на домен ngrok или dev tunnel. - Замените все вхождения
<<YOUR-MICROSOFT-APP-ID>>идентификатором приложения Microsoft бота.
- Замените все вхождения
Сборка и запуск службы
Для сборки и запуска службы используйте последнюю версию Visual Studio или командную строку.
Откройте Visual Studio.
Перейдите в раздел Файл>Открыть>проект или решение....
Выберите Файл TeamsTaskModule.csprojиз> папкиcsharpbot-task-module>.
В разделе Вид откройте Обозреватель решений.
Нажмите клавишу F5 , чтобы запустить проект.
Выберите Да, если появится следующий диалог:
Откроется веб-страница с сообщением. Ваш бот готов!
Отправка приложения "Модуль задач"
В клонированного репозитория перейдите к примеру>bot-task-module>csharp>TeamsAppManifest.
Создайте файл .zip со следующими файлами, которые находятся в папке TeamsAppManifest :
- manifest.json
- icon-outline.png
- icon-color.png
В клиенте Teams щелкните значок Приложения .
Выберите Управление приложениями
Выберите Отправить приложение.
Найдите параметр Отправить пользовательское приложение. Если параметр отображается, включена отправка пользовательских приложений.
Выберите файл .zip, созданный в папке TeamsAppManifest , и нажмите кнопку Открыть.
Нажмите Добавить.
В области создания сообщения введите hi и бот отправляет адаптивный карта.
Приложение отображает вызов модуля задачи из карточки главного героя и вызов модуля задачи из адаптивной карточки.
Взаимодействие с приложением в Teams
Выберите Адаптивная карточка из параметра Вызов модуля задач из карточки главного элемента или Вызов модуля задачи из адаптивной карточки.
Введите Hello и нажмите кнопку Отправить.
Адаптивная карточка отправляет сообщение подтверждения.
Выберите Пользовательская формав поле Вызов модуля задач из карточки главного элемента или Вызов модуля задачи из адаптивной карточки.
Введите необходимые сведения:
- Название
- Отправить сообщение
- Любимая книга
- Password
- Подтверждение пароля
Выберите Зарегистрироваться.
Пользовательская форма отправляет сообщение подтверждения.
В чате отображаются следующие сведения:
Выберите YouTube в поле Вызов модуля задач из карточки главного элемента или вызов модуля задачи из адаптивной карточки.
Выберите Воспроизвести.
Выполнение задачи
Ты придумала что-то вроде этого?
Поздравляем!
Вы завершили руководство по началу работы с диалоговым приложением Teams!
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по