Создание вкладки с помощью App StudioCreate a tab using App Studio

Совет

Ищете быстрый способ приступить к работе?Looking for a faster way to get started? С помощью набора инструментов Microsoft Teams создайте персональную группу или вкладку "канал" или " Группа ".Create a personal or channel and group tab using the Microsoft Teams Toolkit.

Вкладки позволяют обслуживать веб-контент, размещенный в канале, группе чатов и личным пользователям.Tabs allow you to serve web content that you host to your channel, group chat, and personal users. На высоком уровне необходимо выполнить следующие действия, чтобы создать вкладку:At a high level, you'll need to complete the following steps to create a tab:

  1. Подготовить среду разработки.Prepare your development environment.
  2. Создайте свою страницу (-ы).Create your page(s).
  3. Размещение службы приложений.Host your app service.
  4. Создайте пакет приложения и отправьте его в Microsoft Teams.Create your app package and upload to Microsoft Teams.

Подготовка среды разработкиPrepare your development environment

Первое, что нужно сделать, — подготовить среду разработки.The first thing you'll need to do is prepare your development environment. Необходимо убедиться в том, что для организации Office 365, в которой вы хотите создать приложение, включена специальная передача приложений.You'll need to make sure custom app uploading is enabled for the Office 365 organization you want to build your app in. Если вам нужен выделенный клиент разработки, вы можете зарегистрироваться в программе для разработчиков Office 365.If you need a dedicated development tenant, you can sign up for the Office 365 developer program. Дополнительные сведения см. в статье Настройка среды разработки.For additional information see Setup your development environment.

Создание страницCreate your page(s)

Если вы указываете вкладку в области личных или маркетинговых или групп, она будет состоять из одной или нескольких страниц HTML, размещаемых на вашем компьютере.Whether you present your tab within the personal or channel/group scope, it will consist of one or more HTML pages that you host. Вкладки с личными областями состоят из одной страницы контента, а для вкладок с областью канала или группы потребуется страница конфигурации, которая задает URL-адрес страницы контента на основе входных данных пользователя во время установки.Tabs with a personal scope consist of a single content page, while tabs with a channel or group scope will require a configuration page that sets the URL of the content page based on user input at the time of installation.

Существует три типа вкладок.There are three types of tab pages. Подробные сведения о создании можно найти на соответствующей странице документации.See the corresponding documentation page for full details on creating them.

  1. Страница контента— страница, отображаемая на вкладке.Content page, the page displayed in a tab.
  2. Страница конфигурации, на которой задается или обновляется URL-адрес страницы контента, и добавляется на вкладку канал/группа.Configuration page, the page used to set or update the content page URL, and add it to a channel/group tab.
  3. Страница "Удаление" — необязательная страница, которая отображается при удалении вкладки канал/группа.Removal page, an optional page that is displayed when a channel/group tab is removed.

Требования к вкладкамTab requirements

Независимо от типа страницы, на вкладке необходимо соблюдать следующие требования:Regardless of the type of page, you're tab will need to adhere to the following requirements:

  • Необходимо разрешить отправку страниц в IFrame, используя заголовки HTTP-ответа X-Frame-Options и/или Content-Security-Security-Policy.You must allow your pages to be served in an IFrame, via X-Frame-Options and/or Content-Security-Policy HTTP response headers.
    • Задать заголовок: Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.comSet header: Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com
    • Для совместимости с Internet Explorer 11 также следует задать X-Content-Security-Policy .For Internet Explorer 11 compatibility, set X-Content-Security-Policy as well.
    • Кроме того, можно задать заголовок X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/ .Alternatively, set header X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Этот заголовок является устаревшим, но по-прежнему учитывается большинством браузеров.This header is deprecated but still respected by most browsers.
  • Как правило, для защиты от применительно к розетке страницы входа не отображаются в элементах IFrame.Typically, as a safeguard against click-jacking, login pages don't render in IFrames. Поэтому логика проверки подлинности должна использовать метод, отличный от Redirect (например, использовать проверку подлинности на основе маркеров или на основе файлов cookie).Therefore, your authentication logic needs to use a method other than redirect (e.g., use token-based or cookie-based authentication).

Примечание

Хром 80, запланированный на выпуск ранних 2020, содержит новые значения файлов cookie и по умолчанию накладывает политики файлов cookie.Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. Рекомендуется задавать предполагаемый способ использования файлов cookie, а не полагаться на поведение браузера по умолчанию.It's recommended that you set the intended use for your cookies rather than rely on default browser behavior. Просмотрите атрибут самесите cookie (обновление 2020).See SameSite cookie attribute (2020 update).

  • Браузеры соответствуют ограничению политики единого происхождения, которое запрещает веб-странице делать запросы другому домену, чем тот, который выдает веб-страницу.Browsers adhere to a same-origin policy restriction that prevents a webpage from making requests to a different domain than the one that served a web page. Однако может потребоваться переадресовать страницу конфигурации или содержимого в другой домен или поддомен.However, you may need to redirect the configuration or content page to a another domain or subdomain. Логика навигации между доменами должна позволять клиенту Teams проверять происхождение в статическом списке Валиддомаинс в манифесте приложения при загрузке или взаимодействии с вкладкой.Your cross-domain navigation logic should allow the Teams client to validate the origin against a static validDomains list in the app manifest when loading or communicating with the tab.

  • Чтобы обеспечить удобство работы, необходимо задать стиль вкладок на основе темы, структуры и намеренности клиента Teams.To create a seamless experience, you should style your tabs based on the Teams client's theme, design, and intent. Как правило, вкладки работают в соответствии с конкретными нуждами, а на небольшом наборе задач или подмножестве данных, которые относятся к расположению канала вкладки.Typically, tabs work best when they're built to address a specific need and focus on a small set of tasks or a subset of data that is relevant to the tab's channel location.

  • На странице содержимого добавьте ссылку на пакет SDK клиента Microsoft Teams для JavaScript с помощью тегов script.Within your content page, add a reference to Microsoft Teams JavaScript client SDK using script tags. После загрузки страницы выполните вызов microsoftTeams.initialize() .Following your page load, make a call to microsoftTeams.initialize(). Если этого не сделать, страница не будет отображаться.Your page will not be displayed if you do not.

Размещение службы приложенийHost your app service

Контент должен размещаться на общедоступном URL-адресе, доступном по протоколу HTTPS.Your content needs to be hosted on a publicly available URL available using HTTPS. Для тестирования можно использовать обратный прокси-сервер, например ngrok, чтобы предоставить локальный порт URL-адресу, доступному из Интернета.For testing, you can use a reverse proxy, such as ngrok, to expose your local port to an internet-facing URL.

Создание пакета приложений с помощью App StudioCreate your app package with App Studio

Вы можете использовать приложение App Studio в клиенте Microsoft Teams, чтобы помочь создать манифест приложения.You can use the App Studio app from within the Microsoft Teams client to help create your app manifest. Если у вас нет приложения App Studio, установленного в Teams , выберите  Приложение Store в левом нижнем углу приложения Teams и найдите приложение App Studio.If you do not have App studio installed in Teams, select Apps Store App at the bottom-left corner of the Teams app, and search for App Studio. Найдя плитку, выберите ее и нажмите кнопку установить в диалоговом окне всплывающее окно.Once you find the tile, select it and choose install in the pop-up window dialog box.

  1. Откройте клиент Microsoft Teams, используя версию на основе Интернета , вы сможете проверить интерфейсный код с помощью средств разработчикав браузере.Open the Microsoft Teams client—using the web based version will enable you to inspect your front-end code using your browser's developer tools.
  2. Откройте приложение App Studio и выберите вкладку редактор манифестов .Open App Studio and select the Manifest editor tab.
  3. Выберите плитку Создание нового приложения .Choose the Create a new app tile.
  4. Добавьте сведения о приложении (см. Определение схемы манифеста для полного описания каждого поля).Add your app details (see the manifest schema definition for full description of each field).
  5. В разделе возможности выберите вкладки .In the capabilities section select Tabs .
    • Для вкладки Личные выберите Добавить вкладку Личные и нажмите кнопку Добавить .For a personal tab, choose Add a personal tab and select Add . Откроется всплывающее диалоговое окно, в котором можно добавить сведения о вкладке.You will be presented with a pop-up dialogue window where you can add your tab details.
    • Для вкладки канал/группа в разделе вкладка группа выберите Добавить и заполните поля сведения вкладки во всплывающем окне Вкладка команда.For a channel/group tab, under Team Tab select Add and complete the tab details fields in the Team tab pop-up window. Проверка возможности обновления конфигурации Флажки группа и Групповая беседа отмечены и нажмите кнопку сохранить .Make sure the can update configuration? Team and Group chat boxes are checked and select Save .
  6. В разделе домены и разрешения домены из поля вкладки должны содержать URL-адрес узла или обратного прокси-сервера без префикса HTTPS.In the Domains and permissions section, the Domains from your tabs field should contain your host or reverse proxy URL without the HTTPS prefix.
  7. На вкладке завершения => тестирования и распределения можно скачать пакет приложения, установить пакет в команду или Отправить в магазин приложений Teams для утверждения.From the Finish => Test and distribute tab you can Download your app package, Install the package into a team, or Submit to the Teams app store for approval. Если используется обратный прокси-сервер, вы получите предупреждение в поле Описание справа. Предупреждение можно игнорировать при тестировании вкладки .If you are using a reverse proxy you will get a warning in the Description field on the right. The warning can be ignored while testing your tab .

Создание пакета приложения вручнуюCreate your app package manually

Как и в случае с Боты и расширениями обмена сообщениями, вы обновляете Манифест приложения, чтобы включить свойства вкладки.As with bots and messaging extensions, you update the app manifest of your app to include the tab properties. Эти свойства управляют областями, в которых доступна вкладка, используемые URL-адреса и другие свойства.These properties govern the scopes your tab is available in, the URLs to be used, and various other properties.

Личные вкладкиPersonal Tabs

Отображаемое содержимое личных вкладок одинаково для всех пользователей и настроено в staticTabs массиве.The displayed content for personal tabs is the same for all users and is configured in the staticTabs array. Вы можете объявить до 16 персональных вкладок в приложении.You may declare up to sixteen (16) personal tabs in an app.

ИмяName ТипType Максимальный размерMaximum size ОбязательныйRequired ОписаниеDescription
entityId StringString 64 символа64 characters Уникальный идентификатор объекта, отображаемого на вкладке.A unique identifier for the entity that the tab displays.
name StringString 128 символов128 characters Отображаемое имя вкладки в интерфейсе канала.The display name of the tab in the channel interface.
contentUrl StringString 2048 символов2048 characters URL-адрес https://, указывающий на пользовательский интерфейс сущности, который будет отображаться в полотне Teams.The https:// URL that points to the entity UI to be displayed in the Teams canvas.
websiteUrl StringString 2048 символов2048 characters URL-адрес https://, указывающий, когда пользователь попытается просмотреть его в браузере.The https:// URL to point at if a user opts to view in a browser.
scopes Массив перечисленийArray of enum 1,11 Статические вкладки поддерживают только personal область, что означает, что ее можно подготовить только в составе личного приложения.Static tabs support only the personal scope, which means it can be provisioned only as part of a personal app.

Пример манифеста простой личной вкладкиSimple personal tab manifest example

В приведенном ниже примере показан только staticTabs массив из манифеста приложения.The example below shows just the staticTabs array from an app manifest.

...
"staticTabs": [
    {
      "entityId": "idForPage",
      "name": "Display name for tab",
      "contentUrl": "https:// yourURL.com/content ",
      "websiteUrl": "https://yourURL.com/website",
      "scopes": [ "personal" ]
    }
...

Вкладки каналов/группChannel/group tabs

Вкладки каналов и групп добавляются в configurableTabs массив.Channel/group tabs are added in the configurableTabs array. Вы можете объявить только одну вкладку "канал/группа" в configurableTabs массиве.You may declare only one channel/group tab in the configurableTabs array.

ИмяName ТипType Максимальный размерMaximum size ОбязательныйRequired ОписаниеDescription
configurationUrl StringString 2048 символов2048 characters Https://URL-адрес страницы конфигурации.The https:// URL to configuration page.
canUpdateConfiguration ЛогическийBoolean Значение, указывающее, может ли пользователь обновлять экземпляр конфигурации вкладки после создания.A value indicating whether an instance of the tab's configuration can be updated by the user after creation. Умолчани trueDefault: true
scopes Массив перечисленийArray of enum 1,11 Настраиваемые вкладки поддерживают только team groupchat области и области.Configurable tabs support only the team and groupchat scopes.

Пример манифеста простого канала/группы вкладокSimple channel/group tab manifest example

В приведенном ниже примере показан только configurableTabs массив из манифеста приложения.The example below shows just the configurableTabs array from an app manifest.

...
"configurableTabs": [
    {
      "configurationUrl": "https://yourURL.com/configure",
      "canUpdateConfiguration": true,
      "scopes": [ "team", "groupchat" ]
    }
...

После того как вы закончите manifest.json пакет в ZIP-папке вместе с двумя необходимыми значками.Once you have completed your manifest.json bundle it in a zip folder along with your two required icons.

Отправка пакета приложений непосредственно командеUpload app package directly to a team

  1. Откройте клиент Microsoft Teams.Open the Microsoft Teams client. Если вы используете версию на основе веб-сайта , вы можете проверить интерфейсный код с помощью средств разработчикав браузере.If you use the web based version you can inspect your front-end code using your browser's developer tools.
  2. На панели йоуртеамс слева выберите ... меню рядом с командой, которую вы используете для тестирования вкладки, и выберите пункт Управление командой .In the YourTeams panel on the left, select the ... menu next to the team that you're using to test your tab and choose Manage team .
  3. В главной панели выберите приложения из панели вкладок и нажмите кнопку Отправить пользовательское приложение , расположенное в правом нижнем углу страницы.In the main panel select Apps from the tab bar and choose Upload a custom app located in the lower right-hand corner of the page.
  4. Откройте каталог проекта, перейдите в папку ./паккаже , выберите папку ZIP пакет приложения и нажмите кнопку Открыть .Open your project directory, browse to the ./package folder, select the app package zip folder and choose Open . Вкладка будет загружена в Teams.Your tab will upload into Teams.

Просмотр вкладки в TeamsView your tab in Teams

  1. Просмотр личной вкладки:View your personal tab:

    • В панели навигации, расположенной в левой части клиента Teams, выберите ... меню и выберите приложение из списка.In the navbar located at the far-left of the Teams client, select the ... menu and choose your app from the list.
  2. Просмотрите вкладку ваш канал/Группа:View your channel/group tab:

    • Вернитесь к команде, выберите канал, в котором необходимо отобразить вкладку, нажмите ➕ на панели вкладок и выберите вкладку в коллекции.Return to your team, choose the channel where you would like to display the tab, select ➕ from the tab bar, and choose your tab from the gallery.
    • Следуйте инструкциям по добавлению вкладки. Обратите внимание, что для вкладки канал/группа существует настраиваемое диалоговое окно настройки. Нажмите кнопку сохранить , и вкладка будет добавлена на панель вкладок канала.Follow the directions for adding a tab. Note that there's a custom configuration dialog for your channel/group tab. Select Save and your tab will be added to the channel's tab bar.

ПодробнееLearn more