Внедрение общего доступа в Teams на веб-приложения - Teams

Статья
10/29/2024

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

На следующем рисунке отображается диалоговое окно, которое появляется, когда пользователь выбирает Общий доступ в Teams:

По умолчанию общий доступ к Teams поддерживает маркировку пользователей с @username помощью и @everyone, а пользователи с тегами получают уведомления в Microsoft Teams при совместном использовании содержимого в Teams.

Примечание.

Поддерживаются только классические версии Microsoft Edge и Google Chrome.
Использование учетных записей Freemium или гостевых учетных записей не поддерживается.

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

На следующем рисунке показан процесс распаковки ссылок через общий доступ к Teams:

В этом разделе описано, как создать и внедрить общий доступ к Teams для веб-сайта, создать предварительную версию веб-сайта и расширить общий доступ к Teams для образования.

В следующем видео приведены основные шаги по внедрению share в Teams:

Существует два метода, с помощью которых можно внедрить общий доступ к Teams на веб-странице. В зависимости от элемента управления, который требуется в разделе "Общий доступ к Teams", можно использовать один из следующих методов:

Метод 1
Метод 2

Этот метод показывает простой и простой способ внедрения общего доступа в Teams, где можно настроить кнопку и ее функциональность в соответствии с вашими требованиями.

Добавьте сценарий launcher.js на веб-страницу.

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

Добавьте html-элемент на веб-страницу с teams-share-button параметром в атрибуте class и ссылкой для совместного использования в атрибуте data-href .
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>
```
После настройки кнопка "Поделиться в Teams " будет добавлена на веб-сайт.
- Если вам нужен другой размер значка для кнопки data-icon-px-size , используйте атрибут .
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-icon-px-size="64">
</div>
```
- Если для общей ссылки требуется проверка подлинности пользователя или предварительный просмотр URL-адреса из ссылки неправильно отображается в Teams, можно отключить предварительный просмотр URL-адреса, добавив data-preview атрибут и задав для него значение false.
```
<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>"
  data-preview="false">
</div>
```
- Если вы хотите отобразить сообщение по своему выбору в поле создания, можно определить текст в data-msg-text атрибуте .
```
<div
 class="teams-share-button"
 data-href="https://<link-to-be-shared>"
 data-msg-text="<default-message-to-be-populated-in-compose-box>"
 data-preview="false">
 </div>
```

Этот метод позволяет контролировать, какая кнопка динамически отображается или когда выполняется скрипт. Скрипт выполняется только при window.shareToMicrosoftTeams.renderButtons() вызове. Через API можно передать определенные html-элементы renderButtons({elements: []}) . Вы можете настроить стили, размер и языки кнопок.

Асинхронный shareToMicrosoftTeams.renderButtons(options) API отображает все кнопки общего доступа с именем teams-share-button класса на странице. options (optional) Если объект предоставляется со списком элементов, как показано в следующем коде, эти элементы отрисовываются в кнопках Общий доступ.

`options` (optional): `{ elements?: HTMLElement[] }`

Добавьте скрипт launcher.js на веб-страницу.

<script async defer src="https://teams.microsoft.com/share/launcher.js" onload="onLoadComplete()"></script>

Создайте элемент HTML и укажите необходимые атрибуты. После полной загрузки скрипта средства запуска убедитесь, что логика отрисовки выполнена.

async function onLoadComplete() {
    const shareButton = document.createElement("div");
    shareButton.setAttribute("data-app-id", "<app-id>");
    shareButton.textContent = "Share Test App"
    shareButton.setAttribute("data-href", "<app-content-url>");
    shareButton.setAttribute("data-preview", "false");
    shareButton.setAttribute("data-msg-text", "<default-message-to-be-populated-in-compose-box>");
    await window.shareToMicrosoftTeams.renderButtons({elements: [shareButton]});
}

Ниже приведен сценарий конечного пользователя, в котором содержимое предоставляется в чате или канале с помощью общего доступа к Teams:

Предоставление общего доступа к содержимому чату или каналу

Откройте веб-приложение в браузере и выберите Поделиться в Teams. Откроется диалоговое окно Общий доступ к Teams.
Добавьте имя чата или канала.

Примечание.

Если приложение еще не добавлено в чат или канал область, в диалоговом окне Поделиться в Teams появится заявление об отказе от ответственности приложения.
Нажмите Поделиться. Содержимое приложения предоставляется в соответствующей область.

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

Вот как отображается общее веб-содержимое на этапе собрания:

Прежде чем включить общий доступ к содержимому собраний, необходимо убедиться в следующем:

Приложение Microsoft Teams с вкладкой, поддерживающей боковую панель собраний и api share to Stage.
Приложение для собраний должно поддерживать API-интерфейсы "Общий доступ к этапу" с двумя основными требованиями для отображения содержимого на этапе собрания:
- Манифест приложения, поддерживающий и meetingSidePanel настроенные meetingStage в качестве контекстов кадра. Если настройка не настроена, участники собрания могут не иметь возможности просматривать содержимое на сцене.
- Приложение, поддерживающее MeetingStage.Write.Chat разрешения для управления этапом. Это требование к разрешению на чтение.

Примечание.

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

Включение общего доступа к Teams для собрания

Добавьте сценарий launcher.js на веб-страницу.

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

Добавьте html-элемент на веб-страницу с teams-share-button параметром в атрибуте class и ссылкой для совместного использования в атрибуте data-href . Чтобы пользователи могли делиться содержимым на собраниях из Раздела в Teams, добавьте allow-share-in-meeting атрибут и присвойте ему значение true.
```
    <div
    class="teams-share-button"
    data-href="https://<link-to-be-shared>"
    data-allow-share-in-meeting="true"
    data-app-id="<app-id>"
    >
    </div>
```
После настройки откроется диалоговое окно Общий доступ к Teams с параметром "Показать сейчас ". Теперь функция Present позволяет пользователям делиться содержимым текущего собрания. Для пользователя, который предоставил общий доступ к содержимому на этапе собрания, боковая панель автоматически открывается при начале собрания и заполняет общее содержимое на боковой панели собрания.

Ниже приведено несколько сценариев, в которых содержимое предоставляется собранию с помощью общего доступа к Teams:

Предоставление общего доступа к содержимому предстоящему собранию

Откройте веб-приложение в браузере и выберите Поделиться в Teams. Откроется диалоговое окно Общий доступ к Teams.
Добавьте имя собрания.

Примечание.

Если приложение еще не добавлено в область собрания, в диалоговом окне Поделиться в Teams появится заявление об отказе от предоставления согласия приложения.
Нажмите Поделиться. Содержимое приложения передается в чате предстоящего собрания в виде адаптивной карточки.

Когда собрание начинается, содержимое, к которому предоставлен общий доступ для собрания, отображается в интерфейсе боковой панели в зависимости от открытого приложения.

Предоставление общего доступа к содержимому на текущем собрании

Откройте веб-приложение в браузере и выберите Поделиться в Teams. Откроется диалоговое окно Общий доступ к Teams.
Выберите Показать сейчас. Появится диалоговое окно согласия для предоставления общего доступа к содержимому собрания.
Примечание.
- Если приложение еще не добавлено в область собрания, в диалоговом окне Поделиться в Teams появится заявление об отказе от предоставления согласия приложения.
- Если текущее собрание отсутствует, пользователь может выбрать Собрание сейчас , чтобы начать собрание и поделиться содержимым.
Выберите Начать общий доступ.
Веб-приложение предоставляется на этапе собрания, и все участники могут взаимодействовать и работать вместе.

Начало собрания и предоставление общего доступа к содержимому

Если текущее собрание отсутствует и пользователь хочет инициировать собрание и представить содержимое, он может сделать это с помощью параметра Поделиться в Teams. Чтобы начать собрание и поделиться содержимым, выполните следующие действия:

Откройте веб-приложение в браузере и выберите Поделиться в Teams. Откроется диалоговое окно Общий доступ к Teams.
Добавьте имя собрания или участников, чтобы начать новое собрание.
Выберите Показать сейчас. Откроется диалоговое окно согласия для начала собрания.

Примечание.

Если приложение еще не добавлено в область собрания, в диалоговом окне Поделиться в Teams появится заявление об отказе от предоставления согласия приложения.
Нажмите OK. Откроется окно собрания для присоединения к собранию.
Выберите Присоединиться сейчас. После присоединения к собранию появится диалоговое окно согласия для предоставления общего доступа к содержимому собрания.
Выберите Начать общий доступ.
Веб-приложение предоставляется на этапе собрания, и все участники могут взаимодействовать и работать вместе.

Создание предварительной версии веб-сайта

При совместном использовании веб-сайта в Teams карта, вставленный в выбранный канал, содержит предварительный просмотр веб-сайта. Вы можете управлять поведением этой предварительной версии, обеспечивая добавление соответствующих метаданных на веб-сайт, к которому предоставляется общий data-href доступ, например URL-адрес.

Чтобы отобразить предварительную версию, выполните следующие действия:

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

В следующей таблице описаны необходимые теги:

Значение	Метатег	Open Graph
Название	`<meta name="title" content="Example Page Title">`	`<meta property="og:title" content="Example Page Title">`
Описание	`<meta name="description" content="Example Page Description">`	`<meta property="og:description" content="Example Page Description">`
Эскиз	Нет	`<meta property="og:image" content="http://example.com/image.jpg">`

Можно использовать либо версии HTML по умолчанию, либо версию Open Graph.

Для преподавателей, использующих кнопку Поделиться в Teams, есть дополнительный параметр Create an Assignment , позволяющий быстро создать задание в выбранной команде на основе общей ссылки.

Вы можете настроить значения по умолчанию для следующих полей в форме «Отправить в Teams»:

Прокомментируйте это: msgText
Инструкции к заданию: assignInstr
Название задания: assignTitle

На следующем изображении показан общий доступ к Teams для образования:

Пример

Значения формы по умолчанию приведены в следующем примере:

<span
    class="teams-share-button"
    data-href="https://www.microsoft.com/education/products/teams"
    data-msg-text="Default Message"
    data-assign-title="Default Assignment Title"
    data-assign-instr="Default Assignment Instructions"
></span>

Ниже приведены определения launcher.js.

Свойство	Атрибут HTML	Тип	По умолчанию	Описание
url	`data-href`	string	Н/Д	URL-адрес содержимого, к которым необходимо предоставить доступ. Этот URL-адрес можно использовать для закрепления содержимого на предстоящем собрании или для предоставления общего доступа к текущему собранию. Требуется, если `allow-share-in-meeting` задано значение `true`.
preview	`data-preview`	Логическое значение (в виде строки)	`true`	Значение указывает, должен ли отображаться предварительный просмотр содержимого, к которым будет предоставлен общий доступ.
appId	`data-app-id`	String	Н/Д	Идентификатор приложения, к которым требуется предоставить доступ. Требуется, если `allow-share-in-meeting` задано значение `true`.
iconPxSize	`data-icon-px-size`	число (в виде строки)	`32`	Размер в пикселях кнопки Поделиться в Teams для отображения.
msgText	`data-msg-text`	Строка	Н/Д	Текст по умолчанию, добавляемый перед ссылкой в поле создания сообщения. Максимальное число символов — 200.
assignInstr	`data-assign-instr`	Строка	Н/Д	Текст по умолчанию, добавляемый в поле Инструкции по назначениям. Максимальное число символов — 200.
assignTitle	`data-assign-title`	Строка	Н/Д	Текст по умолчанию, добавляемый в поле Заголовок назначений. Максимальное число символов — 50.
общий доступ к собранию	`data-allow-share-in-meeting`	String	Н/Д	Значение, позволяющее пользователям делиться содержимым на собраниях в дополнение к существующей возможности предоставления общего доступа в чате или канале. Он считается по `false` умолчанию.

Пример кода

Название примера	Описание	Node.js
Отправка в Teams	Этот пример приложения отображает веб-страницу в виде вкладки и включает кнопку "Поделиться в Teams" с параметром "Показать сейчас".	Просмотр

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

Создание предварительной версии веб-сайта

Пример

Пример кода

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

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

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

Поделиться в Teams из веб-приложений