Расширение личной вкладки Teams в Microsoft 365

Статья
10/17/2024

Личные вкладки — это отличный способ расширить возможности Microsoft Teams. Используя личные вкладки, вы можете предоставить пользователю доступ к приложению прямо в Teams, при этом ему не понадобится выходить из интерфейса или снова входить в систему. Личные вкладки также могут освещаться в других приложениях Microsoft 365. В этом руководстве демонстрируется процесс создания существующей личной вкладки Teams и ее обновления для работы в приложениях Microsoft 365.

Обновление личного приложения Teams для запуска в других приложениях Microsoft 365 включает следующие действия:

Обновите манифест приложения (ранее — манифест приложения Teams).
Обновите ссылки на клиентскую библиотеку JavaScript (TeamsJS) в Microsoft Teams.
Измените заголовки политики безопасности содержимого.
Обновите регистрацию приложения Microsoft Entra для единого Sign-On (SSO).
Отправьте обновленное пользовательское приложение в Teams.

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

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

Чтобы завершить работу с этим руководством, вам потребуется:

Клиент изолированной программы для разработчиков Microsoft 365.
Компьютер с приложениями Microsoft 365, установленными из Приложения Microsoft 365 Current Channel.
(Необязательно) Клиент песочницы, зарегистрированный в целевых выпусках Microsoft 365.
(Необязательно) Устройство или эмулятор Android с установленным приложением Microsoft 365 для Android.
(Необязательно) Расширение набора средств Teams для Microsoft Visual Studio Code для обновления кода.

Необходимые условия для установки

Подготовьте личную вкладку к обновлению

Если у вас есть личные вкладки, создайте копию или ветвь рабочего проекта для тестирования и обновите идентификатор приложения в манифесте приложения, чтобы использовать новый идентификатор (отличный от рабочего идентификатора приложения для тестирования).

Если вы хотите использовать пример кода вместо собственного рабочего кода, можно использовать пример списка задач. Вы можете выполнить инструкции по настройке в репозитории GitHub Для списка дел или использовать расширение Teams Toolkit для создания нового приложения Teams (выберите Начать из примера>списка дел с серверной частью в Azure). После создания личной вкладки вернитесь к этой статье, чтобы расширить ее в Microsoft 365.

Кроме того, вы можете использовать простое приложение hello world с поддержкой единого входа( SSO), которое уже включено приложение Microsoft 365, как показано в следующем разделе краткого руководства , а затем перейти к отправке пользовательского приложения в Teams.

Быстрый запуск

Используйте расширение Набора средств Teams для Visual Studio Code, чтобы начать с личной вкладки, которая включена для запуска в Teams, Outlook и Microsoft 365.

Откройте Visual Studio Code.
Щелкните значок Набора средств Teams на панели действий.
Выберите Создать новое приложение.
Выберите Вкладка.
Выберите Вкладка "Базовый".
Выберите предпочтительный язык программирования.
Выберите расположение на локальном компьютере для папки рабочей области и введите имя приложения.
После создания приложения в расширении Teams Toolkit убедитесь, что вы вошли в соответствующий клиент песочницы Microsoft 365 Developer Program и учетную запись Azure. Эти параметры доступны в разделе ACCOUNTS расширения.
Выберите Палитра команд... под параметром Вид или CTRL+SHIFT+P.
Введите Teams: подготовка, чтобы создать ресурсы приложения Teams, такие как Служба приложений Azure, план Служба приложений, бот Azure и управляемое удостоверение в учетной записи Azure. Кроме того, можно выбрать Подготовить в разделе ЖИЗНЕННЫЙ цикл расширения.
Выберите подписку и группу ресурсов. Если вы решили создать новую группу ресурсов, необходимо указать расположение.
Выберите Подготовка.
Выберите Палитра команд... под параметром Вид или CTRL+SHIFT+P.
Введите Teams: Развертывание , чтобы развернуть пример кода в подготовленных ресурсах в Azure и запустить приложение. Кроме того, можно выбрать Развернуть в разделе ЖИЗНЕННЫЙ цикл расширения.

Здесь можно перейти к отправке пользовательского приложения в Teams и предварительному просмотру приложения в Outlook и приложении Microsoft 365. Манифест приложения и вызовы API TeamsJS уже обновлены для приложения Microsoft 365.

приложения SharePoint Framework (SPFx)

Начиная с версии 1.16 SharePoint Framework (SPFx), личные вкладки Teams, созданные и размещенные с помощью SPFx, также поддерживаются в Outlook и приложении Microsoft 365. Чтобы обновить приложение личной вкладки SPFx Teams, выполните следующие действия.

Убедитесь, что у вас установлена последняя версия SPFx.
```
npm install @microsoft/generator-sharepoint@latest --global
```
Обновите манифест приложения.
Обновите ссылки на TeamsJS.

После обновления ссылок TeamsJS отправьте приложение в Teams для предварительного просмотра приложения личной вкладки SPFx, работающего в Outlook и приложении Microsoft 365. Дополнительные сведения см. в статье Расширение приложения Outlook и Microsoft 365 с помощью SharePoint Framework.

Обновите манифест приложения

Чтобы включить личную вкладку Teams для запуска в Outlook и приложении Microsoft 365, необходимо использовать версию схемы манифеста приложения (или более позднюю версию 1.13 ). Дополнительные сведения о версии схемы см. в разделе Манифест приложения.

Существует два варианта обновления манифеста приложения:

Набор средств Teams
Выполнение вручную

Откройте палитру команд: Ctrl+Shift+P.
Запустите команду Teams: Upgrade Teams manifest и выберите файл манифеста приложения. Изменения вносятся на месте.

Откройте манифест приложения и обновите $schema и manifestVersion вручную, указав соответствующую версию. Сведения о версии см. в манифесте разработчика Teams .

{
    "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",
    "manifestVersion" : "1.16"
}

Набор средств Teams можно использовать для проверки манифеста приложения и выявления любых ошибок.

Указание требований к среде выполнения узла (предварительная версия для разработчиков)

Чтобы гарантировать, что приложение всегда предоставляет клиентам высококачественные возможности, вы можете настроить поведение приложения в применимых узлах Microsoft 365 или исключить его из контекстов, которые вы не готовы поддерживать. Используйте манифест приложения для указания любых связей зависимостей между возможностями приложения и конкретных требований среды выполнения статических вкладок, расширений сообщений и ботов.

Дополнительные сведения см. в статье Указание требований к среде выполнения узла Microsoft 365 в манифесте приложения.

Обновление ссылок на TeamsJS

Приложение должно ссылаться на пакет @microsoft/teams-js@2.19.0 npm (или более поздней версии) для запуска в Outlook и Microsoft 365. Предыдущие версии TeamsJS по-прежнему работают в приложениях Outlook и Microsoft 365, но предупреждения об устаревании регистрируются. Поддержка предыдущих версий в конечном итоге прекращается как в Outlook, так и в Microsoft 365. Чтобы определить последнюю версию TeamsJS, ознакомьтесь с репозиторием TeamsJS GitHub.

С помощью набора средств Teams можно определить и автоматизировать необходимые изменения кода для обновления с версий TeamsJS версии 1.x до Версий TeamsJS 2.x.x. Кроме того, можно выполнить те же действия вручную. Дополнительные сведения см. в библиотеке TeamsJS .

Откройте палитру команд: Ctrl+Shift+P.
Выполните команду Teams: Upgrade Teams JS SDK and code references.

По завершении ссылки на @microsoft/teams-js@2.0.0файлы package.json (или более поздние версии) и *.js/.ts файлы и *.jsx/.tsx обновляются следующим образом:

Инструкции импорта для teams-js@2.x.x
Вызовы функций, перечислений и интерфейсов для teams-js@2.x.x
TODOнапоминания о примечаниях к областям, на которые могут повлиять изменения интерфейса контекста
Напоминания в комментариях TODO о том, что следует преобразовать функции обратного вызова в обещания

Важно!

Код внутри.html файлов не поддерживается средствами обновления и требует внесения изменений вручную.

Настройка заголовков Content Security Policy

Как и в Microsoft Teams, приложения вкладок размещаются в элементах iframe в приложениях Microsoft 365 и веб-клиентах Outlook.

Если в приложении используются заголовки политики безопасности содержимого (CSP), убедитесь, что в заголовках CSP разрешены все следующие предки кадров :

Узел приложения Microsoft 365	разрешение для фрейма-предка
Все узлы (новые)	`*.cloud.microsoft`
Teams	`teams.microsoft.com`, `*.teams.microsoft.com`
Приложение Microsoft 365	`.microsoft365.com`, `.office.com`,
Outlook	`outlook.office.com`, `outlook.office365.com`, `outlook-sdf.office.com`, `outlook-sdf.office365.com`

Предупреждение

Облачные службы Майкрософт, включая веб-версии доменов Teams, Outlook и Microsoft 365, переносятся в *.cloud.microsoft домен. Выполните следующие действия до сентября 2024 г., чтобы приложение продолжало отрисовывать на поддерживаемых узлах веб-клиента Microsoft 365:

Обновите библиотеку TeamsJS до версии 2.19.0 или более поздней. Дополнительные сведения о последнем выпуске TeamsJS см. в статье Клиентская библиотека JavaScript для Microsoft Teams.
Если вы определили заголовки политики безопасности содержимого (CSP) для приложения, обновите директиву frame-ancestors , чтобы включить *.cloud.microsoft домен. Чтобы обеспечить обратную совместимость во время миграции, сохраните существующие frame-ancestors значения в заголовках CSP. Такой подход гарантирует, что ваше приложение будет продолжать работать как в существующих, так и в будущих ведущих приложениях Microsoft 365 и свести к минимуму потребность в последующих изменениях.

Обновите следующий домен в директиве frame-ancestors заголовков CSP приложения:

https://*.cloud.microsoft

Обновление регистрации приложения Microsoft Entra для единого входа

Microsoft Entra единый вход (SSO) для личных вкладок работает в приложении Microsoft 365 и Outlook так же, как и в Teams. Однако необходимо добавить несколько идентификаторов клиентских приложений в Microsoft Entra регистрации приложения вкладки на портале Регистрация приложений клиента.

Войдите на портал Microsoft Azure с помощью учетной записи арендатора песочницы.
Откройте Регистрации приложений.
Выберите имя приложения с личной вкладкой, чтобы открыть регистрацию приложения.
Выберите Предоставить API (в разделе Управление).

В разделе Авторизованные клиентские приложения убедитесь, что добавлены все следующие Client Id значения:

Клиентское приложение Microsoft 365	Идентификатор клиента
Классическое, мобильное приложение Teams	1fec8e78-bce4-4aaf-ab1b-5451cc387264
Веб-приложение Teams	5e3ce6c0-2b1f-4285-8d4b-75ee78787346
Microsoft 365 web	4765445b-32c6-49b0-83e6-1d93765276ca
Microsoft 365 desktop	0ec893e0-5785-4de6-99da-4ed124e5296c
Microsoft 365 mobile	d3590ed6-52b3-4102-aeff-aad2292ab01c
Классическое приложение Outlook	d3590ed6-52b3-4102-aeff-aad2292ab01c
Outlook Web	bc59ab01-8403-45c6-8796-ac3ef710b3e3
Outlook Mobile	27922004-5251-4030-b22d-91ecd9a37ea4

Примечание.

Некоторые клиентские приложения Microsoft 365 используют идентификаторы клиентов.

Отправка пользовательского приложения в Teams

Последним шагом к запуску приложения в Microsoft 365 и Outlook является отправка обновленного пакета приложения личной вкладки в Microsoft Teams.

Упаковка (манифест приложения и значки приложений) в ZIP-файл. Если вы использовали Teams Toolkit для создания приложения, это можно легко сделать с помощью параметра Zip Teams App Package (Пакет приложения Zip Teams ) в разделе СЛУЖЕБНЫЕ ПРОГРАММЫ набора средств Teams. manifest.json Выберите файл для приложения и соответствующую среду.
Перейдите в Microsoft Teams и войдите с помощью учетной записи клиента песочницы.
Выберите Приложения, чтобы открыть область Управление приложениями. Затем выберите Отправить приложение.
Выберите параметр Отправить пользовательское приложение и выберите пакет приложения.

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

Вы можете закрепить приложение для быстрого доступа или найти его во всплывающем меню с многоточием (...) среди последних приложений на боковой панели слева. Имейте в виду, что закрепление приложения в Teams не закрепляет его как приложение в приложении Microsoft 365 или Outlook.

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

Ниже описано, как предварительно просмотреть приложение, работающее в Microsoft 365 и Outlook, веб-клиентах и классических клиентах Windows.

Примечание.

Если вы используете пример приложения Teams Toolkit и удаляете его из Teams, оно будет удалено из каталогов Других приложений в Outlook и Приложении Microsoft 365.

Outlook для Windows

Чтобы просмотреть приложение, работающее в Outlook на рабочем столе Windows:

Запустите Outlook и войдите в систему, используя свою учетную запись разработчика.
На боковой панели выберите Другие приложения. Заголовок отправленного пользовательского приложения отображается среди установленных приложений.
Щелкните значок приложения, чтобы запустить приложение в Outlook.

Outlook в Интернете

Чтобы просмотреть свое приложение в Outlook в Интернете:

Перейдите на страницу Outlook в Интернете и войдите с помощью учетной записи клиента разработки.
На боковой панели выберите Приложения. Заголовок отправленного пользовательского приложения отображается среди установленных приложений.
Щелкните значок приложения, чтобы запустить и просмотреть приложение, работающее в Outlook в Интернете.

Приложение Outlook для Android

Чтобы просмотреть приложение, запущенное в Приложении Outlook для Android, выполните приведенные далее действия.

Откройте приложение Outlook на устройстве Android и войдите с помощью учетной записи клиента разработчика. Если приложение Outlook для Android уже работало до отправки пользовательского приложения, перезапустите приложение Outlook, чтобы увидеть его в разделе установленных приложений.
Щелкните значок Приложения . Загруженное пользовательское приложение отображается среди установленных приложений.
Щелкните значок приложения, чтобы открыть приложение в Outlook для Android.

Приложение Outlook для iOS

Чтобы просмотреть приложение, запущенное в приложении Outlook для iOS, выполните приведенные далее действия.

Откройте приложение Outlook на устройстве и войдите с помощью учетной записи клиента разработчика. Если приложение Outlook уже выполнялось до отправки пользовательского приложения в Teams, перезапустите Outlook, чтобы увидеть его в разделе установленных приложений.
Щелкните значок Дополнительно . Загруженное пользовательское приложение отображается среди установленных приложений.
Щелкните значок приложения, чтобы открыть приложение в приложении Outlook.

Microsoft 365 в Windows

Чтобы просмотреть приложение, работающее в Microsoft 365 на рабочем столе с Windows, выполните приведенные далее действия.

Запустите Microsoft 365 и войдите с помощью учетной записи клиента разработки.
Щелкните значок Приложения на боковой панели. Заголовок отправленного пользовательского приложения отображается среди установленных приложений.
Щелкните значок приложения, чтобы запустить приложение в Microsoft 365.

Microsoft 365 в Интернете

Чтобы просмотреть приложение, работающее в Microsoft 365 в Интернете, выполните следующие действия:

Войдите в microsoft365.com с использованием тестовых учетных данных клиента.
Щелкните значок Приложения на боковой панели. Заголовок отправленного пользовательского приложения отображается среди установленных приложений.
Щелкните значок приложения, чтобы запустить приложение в Microsoft 365 в Интернете.

Приложение Microsoft 365 для Android

Чтобы просмотреть приложение, запущенное в приложении Microsoft 365 для Android, выполните следующее:

Запустите приложение Microsoft 365 на устройстве и войдите с помощью учетной записи клиента разработчика. Если приложение Microsoft 365 уже работало до отправки пользовательского приложения в Teams, необходимо перезапустить Teams, чтобы увидеть его в установленных приложениях.
Щелкните значок Приложения . Загруженное пользовательское приложение отображается среди установленных приложений.
Щелкните значок приложения, чтобы запустить приложение в приложении Microsoft 365.

Microsoft 365 для iOS

Чтобы просмотреть приложение, работающее в Microsoft 365 для iOS:

Запустите приложение Microsoft 365 на устройстве и войдите с помощью учетной записи клиента разработчика. Если приложение Microsoft 365 уже работало до отправки пользовательского приложения в Teams, необходимо перезапустить Teams, чтобы увидеть его в установленных приложениях.
Щелкните значок Приложения . Загруженное пользовательское приложение отображается среди установленных приложений.
Щелкните значок приложения, чтобы запустить приложение в приложении Microsoft 365.

Устранение неполадок

В клиентах Outlook и Microsoft 365 поддерживается только подмножество типов и возможностей приложений Teams. Дополнительные сведения о проверка поддержке различных возможностей TeamsJS см. в разделе Поддержка приложений Microsoft 365.

Общие сведения о поддержке узлов и платформ Microsoft 365 для приложений Teams см. в статье Расширение приложений Teams в Microsoft 365.

Вы можете проверка для поддержки узла данной возможности во время выполнения, вызвав isSupported() функцию в этой возможности (пространство имен) и настроив поведение приложения соответствующим образом. Это действие позволяет приложению освещать пользовательский интерфейс и функциональные возможности на узлах, которые его поддерживают, а также предоставлять изящный резервный интерфейс на узлах, которые этого не сделали. Дополнительные сведения см. в разделе Дифференциация взаимодействия с приложением.

Используйте каналы сообщества разработчиков Microsoft Teams, чтобы сообщать о проблемах и оставлять отзывы.

Отладка

Вы можете выполнить отладку приложения вкладок, работающего в Teams, приложении Microsoft 365 и Outlook, с помощью набора средств Teams в Visual Studio Code.

Снимок экрана: раскрывающееся меню отладки в наборе средств Teams.

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

Предоставьте отзыв и сообщите о любых проблемах с отладкой набора средств Teams в Microsoft Teams Framework (TeamsFx).

Мобильная отладка

Отладка Outlook для Android

Отладка приложения в Outlook для Android:

Щелкните значок Дополнительно в мобильном клиенте Teams и откройте загруженное пользовательское приложение для запуска в приложении Outlook.
Убедитесь, что устройство Android подключено к компьютеру разработки. На компьютере разработки откройте в браузере страницу проверки средств разработки. Например, перейдите по адресу edge://inspect/#devices в Microsoft Edge, чтобы отобразить список отладочных веб-представлений Android WebView.
Найдите с Microsoft Teams Tab помощью URL-адреса вкладки и выберите проверить , чтобы начать отладку приложения с помощью средств разработки.
Отладка приложения вкладки в Android WebView так же, как и удаленная отладка обычного веб-сайта на устройстве Android.

Отладка Microsoft 365 для Android

Набор средств Teams (F5) не поддерживает отладку приложений Android в Microsoft 365. Вот как выполнить удаленную отладку приложения, работающего в приложении Microsoft 365 для Android:

При отладке с помощью физического устройства Android подключите его к компьютеру разработки и включите параметр отладки по USB. Этот параметр включен по умолчанию в эмуляторе Android.
Запустите приложение Microsoft 365 с устройства Android.
Откройте профиль Me > Settings > Allow debugging (Разрешить отладку) и выберите параметр Включить удаленную отладку.
Оставьте параметры.
Оставьте экран профиля.
Выберите Приложения и запустите переданное пользовательское приложение для запуска в приложении Microsoft 365.
Убедитесь, что устройство Android подключено к компьютеру разработки. На компьютере разработки откройте в браузере страницу проверки средств разработки. Например, перейдите по адресу edge://inspect/#devices в Microsoft Edge, чтобы отобразить список отладочных веб-представлений Android WebView.
Найдите с Microsoft Teams Tab помощью URL-адреса вкладки и выберите проверить , чтобы начать отладку приложения с помощью средств разработки.
Отладка приложения вкладки в Android WebView так же, как и удаленная отладка обычного веб-сайта на устройстве Android.

Пример кода

Название примера	Описание	Node.js
Список дел	Редактируемый список дел с единым входом, созданным с помощью React и Функции Azure. Работает только в Teams (используйте этот пример приложения, чтобы попробовать процесс обновления, описанный в этом руководстве).	Просмотр
Список задач (Microsoft 365)	Редактируемый список дел с единым входом, созданным с помощью React и Функции Azure. Работает в Teams, Outlook, приложении Microsoft 365.	Просмотр
Редактор изображения (приложение Microsoft 365)	Создание, изменение, открытие и сохранение образов с помощью Microsoft API Graph. Работает в Teams, Outlook, приложении Microsoft 365.	Просмотр
Приложение Northwind Orders	Демонстрирует использование библиотеки TeamsJS версии 2 для расширения приложения Teams для других ведущих приложений Microsoft 365. Работает в Teams, Outlook, приложении Microsoft 365. Оптимизировано для мобильных устройств.	Просмотр

Следующий этап

Опубликуйте приложение, чтобы его можно было обнаружить в Teams, Outlook и приложении Microsoft 365:

Публикация приложений Teams для Outlook и Office

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