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

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

  • Статья

Соблюдайте указанные ниже предварительные требования при создании личных вкладок, вкладок каналов или групповых вкладок Teams.

  • Включите обнаружение страниц вкладок в iFrame, используя заголовки ответов HTTP X-Frame-Options и Content-Security-Policy .

  • Убедитесь, что все страницы приложения Teams размещены в конечных точках HTTPS.

  • Задайте заголовки политики безопасности содержимого, чтобы разрешить Teams и другим ведущим приложениям вашего приложения:

    Узел приложения 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:

    1. Обновите библиотеку TeamsJS до версии 2.19.0 или более поздней. Дополнительные сведения о последнем выпуске TeamsJS см. в статье Клиентская библиотека JavaScript для Microsoft Teams.

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

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

    https://*.cloud.microsoft

    Примечание.

    Чтобы разместить в приложении другие приложения Teams или Microsoft 365, обновите приложение до среды Microsoft 365. Если вы управляете приложением, запущенным во вложенном кадре, вы можете обновить его код, чтобы инициализировать пакет SDK, указав свой домен. Это позволяет вложенной рамке действовать в качестве прокси-сервера для Teams.

  • Для совместимости с Internet Explorer 11 настройте X-Content-Security-Policy Или настройте заголовок X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Этот заголовок не рекомендуется использовать, но большинство браузеров по-прежнему принимают его.

  • Страницы входа не отображаются в iFrames в качестве защиты от щелчка. Ваша логика проверки подлинности должна использовать метод, отличный от перенаправления. Например, используйте проверку подлинности на основе маркеров или файлов cookie.

    Примечание.

    Рекомендуется настроить использование файлов cookie в явном виде, а не полагаться на поведение браузера по умолчанию. Дополнительные сведения см. в статье Атрибут cookie-файла SameSite.

  • Ограничение политики одинакового источника браузеров запрещает веб-страницам выполнять запросы к доменам, отличным от обслуживаемой веб-страницы. Поэтому вы можете перенаправить страницу конфигурации или содержимого в другой домен или поддомен. Логика междоменной навигации должна позволить клиенту Teams проверять источник на соответствие статичному validDomains списку в манифесте приложения при загрузке вкладки или взаимодействии с ней.

  • Создайте стиль вкладок на основе темы, дизайна и назначения клиента Teams. Вкладки лучше всего работают, когда они создаются для удовлетворения конкретных задач и фокусируются на небольшом наборе задач или подмножестве данных, относящихся к расположению канала вкладки.

  • На странице содержимого добавьте ссылку на клиентскую библиотеку JavaScript в Microsoft Teams с помощью тегов скриптов. После загрузки страницы выполните вызов app.initialize(), иначе страница не отображается.

  • Чтобы проверка подлинности работала на мобильных клиентах, необходимо выполнить обновление до TeamsJS версии 1.4.1 или более поздней.

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

  • Вкладка Microsoft Teams не поддерживает загрузку веб-сайтов интрасети, использующих самозаверяющие сертификаты.

Примечание.

В этом разделе представлена версия 2.0.x клиентской библиотеки JavaScript (TeamsJS) Microsoft Teams. Если вы используете более раннюю версию, ознакомьтесь с обзором библиотеки TeamsJS , чтобы узнать о различиях между последней версией TeamsJS и более ранними версиями.

Инструменты для создания вкладок

  Установка Для использования...
Required    
  Node.js Серверной среды выполнения JavaScript. Используйте последний выпуск LTS версии 16.
  Microsoft Edge (рекомендуется) или Google Chrome Браузера со средствами разработчика.
  Visual Studio Code; Сред сборки JavaScript, TypeScript или SharePoint Framework (SPFx).
  Рабочая нагрузка Visual Studio 2022, ASP.NET и веб-разработка .NET. Вы можете установить бесплатный выпуск Visual Studio 2022 для сообщества.
  Git Git для применения репозитория примеров приложений из GitHub.
  Microsoft Teams Microsoft Teams для взаимодействия в одном месте со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков.
  ngrok Ngrok — это программное средство обратного прокси-сервера. Ngrok создает туннель для общедоступных конечных точек HTTPS локального веб-сервера. Конечные веб-точки вашего сервера доступны во время текущего сеанса на компьютере. При завершении работы или переводе устройства в спящий режим служба становится недоступной.
  Портал разработчика Teams Веб-портал для настройки, управления и распространения приложения Teams, в том числе в вашей организации или Microsoft Teams Store.

Создание вкладки Teams

Теперь давайте создадим вкладку. Но сначала выберите вкладку для создания:

Создание личной вкладки

Создание вкладки канала или группы

Дополнительные ресурсы