Создание подписывания документов на собрании
Подписывание собраний — это пример приложения Microsoft 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). |
|
| Учетная запись разработчика Microsoft 365 | Доступ к учетной записи Teams с соответствующими разрешениями для установки приложения. |
Примечание.
После скачивания ngrok зарегистрируйтесь и установите authtoken.
Совет
Убедитесь, что учетная запись Microsoft Teams не является гостевой учетной записью.
Настройка клиента разработки Teams
Клиент — это как пространство или контейнер для вашей организации в Teams, где вы общаетесь в чате, обмениваются файлами и выполняете собрания. В этом пространстве также можно отправлять и тестировать пользовательское приложение. Давайте проверим, готовы ли вы к разработке с помощью клиента.
Проверка параметра отправки пользовательских приложений
После создания приложения необходимо загрузить это приложение в Teams, не распространяя его. Этот процесс называется отправкой пользовательского приложения. Войдите в учетную запись Microsoft 365, чтобы просмотреть этот параметр.
Примечание.
Отправка пользовательских приложений необходима для предварительного просмотра и тестирования приложений в локальной среде Teams. Включите отправку пользовательских приложений для предварительного просмотра и тестирования приложения в Teams локально.
У вас уже есть клиент и есть ли у вас доступ к администратору? Давайте проверка, если вы действительно делаете!
Чтобы проверить отправку приложений в Teams, выполните следующее:
В клиенте Teams щелкните значок Приложения .
Выберите Управление приложениями
Выберите Отправить приложение.
Найдите параметр Отправить пользовательское приложение. Если параметр отображается, включена отправка пользовательских приложений.
Примечание.
Если вы не найдете параметр для отправки пользовательского приложения, обратитесь к администратору Teams.
Настройка локальной среды
Откройте Microsoft-Teams-Samples.
Выберите Код.
В раскрывающемся меню выберите Открыть с помощью GitHub Desktop.
Выберите Клонировать.
Обновление регистрации приложения Microsoft Entra
Следующие действия помогут вам создать и зарегистрировать бот в портал Azure.
- Создайте и зарегистрируйте Microsoft Entra ID.
- Создайте секрет клиента, чтобы включить проверку подлинности бота с единым входом.
- Добавьте канал Teams для развертывания бота.
- Создайте туннель к конечным точкам веб-сервера с помощью туннеля разработки (рекомендуется) или ngrok.
- Добавьте конечную точку обмена сообщениями в созданный туннель разработки.
Добавление регистрации приложения
Перейдите к портал Azure.
Выберите Регистрация приложений.
Выберите + Новая регистрация.
Введите имя приложения.
Выберите Учетные записи в любом каталоге организации (любой клиент Microsoft Entra ID — мультитенантный).
Нажмите Зарегистрировать.
Приложение зарегистрировано в Microsoft Entra ID. Откроется страница обзора приложения.
Примечание.
Сохраните идентификатор приложения из идентификатора приложения (клиента) и каталога (клиента) для дальнейшего использования.
Создание туннеля
Откройте Visual Studio.
Выберите Создать новый проект.
В поле поиска введите ASP.NET. В результатах поиска выберите ASP.NET Core Веб-приложение.
Нажмите кнопку Далее.
Введите имя проекта и нажмите кнопку Далее.
Нажмите Создать.
Откроется окно обзора.
В раскрывающемся списке отладки выберите 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 Entra зарегистрировано в другом клиенте.
Выберите + Добавить разрешение.
Выберите Microsoft Graph.
Выберите Делегированные разрешения.
Выберите следующие разрешения:
- Разрешения> OpenIdэлектронная почта, offline_access, openid, профиль.
- Пользователь>User.Read, User.ReadBasic.All
Выберите Добавить разрешения.
Добавление 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 отображает ошибку, обновите идентификатор приложения.
Настройка параметров приложения, файлов манифеста и env
После настройки приложения Microsoft Entra необходимо настроить сведения о приложении в параметрах приложения, манифесте и файле ENV.
Настройка параметров приложения
Перейдите к файлу appsettings.json в клонированного репозитория.
Откройте файл appsettings.json и обновите следующие сведения:
- Задайте
"ClientId"идентификатор приложения Microsoft App. - Задайте
"ClientSecret"значение секрета клиента приложения. - Задайте
"Audience"значение URI идентификатора приложения.
- Задайте
Настройка файла манифеста приложения
Перейдите к файлу manifest.json в клонированного репозитория.
Откройте файл manifest.json и обновите следующие сведения.
- Задайте значение
"ID"Идентификатор приложения Майкрософт. - Замените все вхождения
"deployment-url"на полное доменное имя ngrok или devtunnel. - Замените все вхождения
"aad-id"идентификатором приложения Майкрософт.
- Задайте значение
Настройка файла env
Перейдите к ENV-файлу в клонированного репозитория.
Откройте ENV-файл и обновите следующие сведения.
- Задайте
REACT_APP_AAD_CLIENT_IDидентификатор приложения Microsoft App. - Задайте
REACT_APP_MSA_ONLY_CLIENTидентификатор приложения Microsoft App. - Задайте
REACT_APP_MSA_ONLY_SCOPEзначение секрета клиента приложения.
- Задайте
Сборка и запуск службы
Создание и запуск службы с помощью Visual Studio.
Откройте Visual Studio.
Перейдите в раздел Файл>Открыть>проект или решение....
Откройте файл MeetingSigning.sln в Visual Studio.
Нажмите клавишу F5 , чтобы запустить проект.
Выберите Да, если появится следующий диалог:
Откроется следующая веб-страница.
Добавление приложения для подписывания собраний в Teams
В клонированного репозитория перейдите в раздел Source > MeetingSigning.Web > AppManifest.
Создайте файл .zip со следующими файлами, которые находятся в папке AppManifest :
- manifest.json
- outlineIcon.png
- colorIcon.png
Создайте собрание в Teams с несколькими выступающими и участниками.
Присоединитесь к собранию.
После начала собрания выберите Приложения.
Во всплывающем окне выберите Управление приложениями.
Выберите Отправить приложение.
Выберите файл .zip, созданный в папке AppManifest , и нажмите кнопку Открыть.
Нажмите Добавить.
Найдите или выберите требуемое собрание в списке и перейдите через диалоговое окно, чтобы выбрать Перейти.
Теперь приложение для подписи собрания добавлено в собрание.
Назад на страницу сведений о собрании и выберите Приложение дляподписывания собраний.>
Выберите Сохранить.
Приложение "Подписывание собрания" отображается в окне собрания.
Перейдите в чат собраний в Teams, перейдите на вкладку Подписывание собрания , а затем выберите Создать документы.
В окне Подписывание собрания введите следующие сведения.
- Выберите необходимые документы, которые требуется просмотреть.
- Введите средства просмотра документов.
- Введите подписывателей документов.
- Нажмите кнопку Готово.
Выберите Согласие , чтобы предоставить приложению разрешение на доступ к данным из учетной записи.
Войдите в Teams, используя свои учетные данные, и нажмите кнопку Войти.
В Teams вы получите уведомление об успешном создании документа.
Назад на собрание Teams, и теперь вы можете просматривать документы на боковой панели.
Выберите Поделиться, чтобы поделиться документом на собрании.
На следующем рисунке показан документ, которым предоставлен общий доступ на собрании.
Выполнение задачи
Ты придумала что-то вроде этого?
Поздравляем!
Поздравляем! Вы завершили работу с руководством по созданию приложения для подписывания на собрании !
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs