将 Teams 会议应用扩展到 Outlook

在 Microsoft 365 生态系统中，大多数每月用户都会从 Outlook 安排其Microsoft Teams 会议。 为了帮助用户继续工作，Outlook 现在支持 Teams 会议应用。 你可以配置会议应用并将其添加到从 Outlook 安排的 Teams 会议，还可以在 Outlook 日历中运行会议应用。

会议应用本质上是 Teams 选项卡应用，旨在促进会议之前、会议期间和会议后的协作。 可以通过 可配置Tabs.context 属性从应用清单 (以前称为 Teams 应用清单) 指定会议应用支持的上下文。

注意

除了 configurableTabs，会议应用还必须在个人范围内至少包含一个 应用功能 ， (例如， staticTabs) 才能在 Outlook 中可用。

下表显示了 Outlook 中支持的 Teams 会议应用上下文：

Teams 会议上下文	应用清单值	TeamsJS 值	Outlook 支持
会议详细信息视图	meetingDetailsTab	frameContext.content	✔️
会议聊天视图	meetingChatTab	frameContext.content	✔️
会议侧面板视图	meetingSidePanel	frameContext.sidePanel	✔️
会议阶段视图	meetingStage	frameContext.meetingStage	❌

如果会议应用支持 Stageview、其他会议内效果或包含邮件扩展和机器人等功能，则当会议从 Outlook 安排会议时，这些功能将继续在 Teams 中工作，但在 Outlook 中不会显示或运行。

先决条件

若要在 Outlook 中预览 Teams 会议应用，请确保以下各项：

• 启用了上传 的 Microsoft 365 开发人员沙盒 租户。
• 从 Microsoft 365 应用 当前频道安装了 Outlook for Windows 桌面的测试环境。
• 安装了 npm) 的 NodeJS (。
• 从 npm 安装的 TeamsFx CLI v2 库。
• Visual Studio Code 安装到开发环境。
• Visual Studio Code 的 Teams 工具包扩展。

若要在 Outlook 中预览 Teams 会议应用，可以使用 Teams 工具包生成新的会议应用，或在 Outlook 中扩展现有的 Teams 会议应用。

生成适用于 Outlook 的 Teams 会议应用

可以通过 Visual Studio Code 的 Teams 工具包扩展生成适用于 Outlook 的 Teams 会议应用。 生成 Teams 会议应用以在 Outlook 中预览：

1. 转到 Teams 并使用沙盒租户帐户登录。

2. 选择 “日历>新建会议 ”并安排会议。

   

3. 在 Visual Studio Code 中打开 Teams 工具包 扩展，然后选择“ 查看示例”。

4. 选择“ 我的第一个会议应用>创建 ”，并指定用于创建工作区的文件夹。

   

5. 按 F5 键在 Teams 中本地调试并运行示例。 Teams 会提示你安装应用。

6. 从下拉列表中选择“ 添加到会议 ”，然后选择之前安排的会议。

   

7. 选择示例选项卡配置，然后选择“ 保存”。 应用在会议聊天视图中可用。

   

将现有 Teams 会议应用扩展到 Outlook

若要在 Outlook 中扩展现有的 Teams 会议应用，请确保满足以下条件：

• 更新应用清单。
• 使用 Microsoft Teams JavaScript 客户端库 (TeamsJS) v2.5.0 或更高版本。
• 配置内容安全策略标头。
• 更新 Microsoft Entra 应用注册， (SSO) 。
• 在 Teams 管理中心上传更新的应用。

如果你有现有的会议应用，请创建生产项目的副本或分支，并在应用 id 清单中更新应用，以使用与生产应用 ID 不同的新标识符进行测试。

更新应用清单

将应用 清单 (以前称为 Teams 应用清单) 架构版本更新为 1.13 或更高版本。

打开 Teams 应用清单并更新 和 manifestVersion 属性，$schema如下所示：

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

使用 TeamsJS 版本 2.5.0 或更高版本

使用 TeamsJS 客户端库版本 2.5.0 或更高版本来扩展 Teams 会议应用以在 Outlook 中运行。 如果应用使用 TeamsJS v2.5.0 或更高版本，则无需更改应用程序代码即可在 Outlook 中运行。

如果需要将 TeamsJS npm 包从 v1.x.x 升级到最新的 v2.x.x TeamsJS，可以使用 Teams 工具包来帮助识别和自动执行所需的代码更改。 有关详细信息，请参阅 TeamsJS 库。

按照以下步骤使用 Teams 工具包将 TeamsJS 更新到最新版本：

1. 在 Visual Studio Code 中打开应用，然后选择“ Teams 工具包扩展 ”。
2. 在“ 视图”下，选择“ 命令面板...” 或 Ctrl+Shift+P。
3. 运行命令 Teams: Upgrade Teams JS SDK and code references。

package.json文件引用 @microsoft/teams-js@2.x.x 和 *.js/.ts 和 *.jsx/.tsx 文件更新为：

• 导入 的 teams-js@2.x.x语句。
• 对 的teams-js@2.x.x函数、枚举和接口调用。
• 新 "TODO" 注释提醒标记可能受 上下文 接口更改影响的区域。
• 将回调函数转换为 promise 的新"TODO"注释提醒。

注意

通过 Teams 工具包升级到最新的 TeamsJS 版本不会更新 html 文件中的代码。 必须手动更新 html 文件。

为 Outlook 配置 CSP 标头

Teams 选项卡应用程序托管在 Outlook 的 iframe 元素 中，就像它们在 Teams 中一样。 如果应用使用 内容安全策略 (CSP) 标头，请添加 outlook.office.com 为 帧祖先。

更新 sso Microsoft Entra 应用注册

Microsoft Entra 单一登录 (适用于会议应用的 SSO) 在 Outlook 中的工作方式与在 Teams 中的工作方式相同。 但是，需要手动将 Outlook 应用程序 ID 添加到Microsoft Entra 应用注册。

1. 使用测试租户帐户登录到 Azure 门户 。

2. 打开“应用注册”。

3. 选择你的应用。

4. 选择“ 管理>公开 API”。

5. 在 “授权的客户端应用程序 ”部分中，添加以下 Client Id 值：

   Microsoft 365 客户端应用程序	客户端 ID
   Outlook 桌面版	d3590ed6-52b3-4102-aeff-aad2292ab01c

   有关用于跨 Microsoft 365 扩展 Teams 应用的客户端应用程序 ID 的详细信息，请参阅 Microsoft 365 和 Outlook 中的 Teams 选项卡。

可以在 Teams 管理中心上传自定义应用 ， 并在 Outlook 中预览会议应用。

在 Teams 管理中心上传自定义应用

若要在 Microsoft 365 和 Outlook 中测试应用，请将 应用包 上传到 Teams 管理中心。

1. 将 Teams 应用清单 和 应用图标 打包到 zip 文件中。 若要通过 Teams 工具包创建应用包，请参阅 生成应用包。

2. 转到 Teams 管理中心 ，然后选择“ Teams 应用>”“管理应用”。

3. 选择 “上传新应用”，然后选择应用包。

将会议应用上传到 Teams 管理中心后，它可在 Teams 和 Outlook 中使用。 要让应用显示在“ 应用 ”菜单中，请等待几分钟并重启 Outlook for Windows。

在 Outlook 中预览会议应用

若要在 Outlook for Windows 中预览会议应用，请确保应用在本地运行，并按照以下步骤操作：

1. 打开使用测试租户帐户登录的 Outlook for Windows。 如果 Outlook 已在运行，请关闭并重新启动它。

2. 打开 “日历>新建会议”。 若要在 Outlook 中运行会议应用，请确保会议是 Teams 会议 ，因为不支持从 Outlook 安排的其他会议。

3. 在会议安排窗口中，选择“ 所有应用”。 已上传的会议应用会显示在已安装的会议应用中。

   

4. 选择会议应用。 此时会显示一个配置对话框，用户可在其中为其特定会议配置任何相关的应用设置。

   

5. 选择“添加”。 会议应用显示在 “应用” 部分和日程安排窗口的侧面板中。

若要在计划窗口中删除或配置应用，请选择应用上的下拉菜单，然后选择以下内容：

• 关于：应用在Microsoft Teams 应用商店中的显示方式。
• 设置：更新特定会议的应用配置。
• 删除：从会议中删除应用。

代码示例

示例名称	说明	Node.js
HelloWorld 会议内应用	演示会议详细信息视图、聊天视图和侧面板的简单会议应用。 在 Teams 和 Outlook 中工作。	View

另请参阅

支持和反馈