跨 Microsoft 365 扩展 Teams 个人选项卡

  • 项目

个人选项卡提供了增强 Microsoft Teams 体验的好方法。 使用个人选项卡，可以在 Teams 中提供用户对其应用程序的访问权限，无需用户离开体验或再次登录。 通过此预览版，个人选项卡也可在其他 Microsoft 365 应用程序中亮起。 本教程演示了采用现有 Teams 个人选项卡并将其更新为在 Outlook 和 Microsoft 365 应用中运行的过程， (桌面和 Web 体验) ，以及 Microsoft 365 for Android 应用。

更新 Teams 个人应用以在其他 Microsoft 365 应用程序中运行涉及以下步骤：

本指南的其余部分将指导你完成这些步骤，并演示如何在其他 Microsoft 365 应用程序中预览你的个人选项卡。

先决条件

若要完成本教程，需要：

  • Microsoft 365 开发人员计划沙盒租户。
  • 从当前频道安装了 Microsoft 365 应用的计算机Microsoft 365 应用版。
  • (可选) 在 Microsoft 365 目标版本中注册的沙盒租户。
  • (可选) 安装了 Microsoft 365 for Android 应用的 Android 设备或模拟器。
  • (Microsoft Visual Studio Code的可选) Teams 工具包扩展，以帮助更新代码。

安装先决条件

准备好个人选项卡进行升级

如果你有现有的个人选项卡应用，请创建生产项目的副本或分支，以便在应用清单中测试并更新应用 ID，以使用与生产应用 ID 不同的新标识符 (，以测试) 。

如果要使用示例代码而不是自己的生产代码，可以使用待办事项列表示例。 可以按照待办事项列表示例 GitHub 存储库中的设置步骤，或使用 Teams 工具包扩展创建新的 Teams 应用， (Azure) 上的后端从示例>待办事项列表中选择“开始”。 创建个人选项卡后，请返回本文，将其扩展到 Microsoft 365。

或者，可以使用已启用 Microsoft 365 应用的基本单一登录 (SSO) hello world 应用，如以下 快速入门 部分所示，然后跳到 Teams 中上传自定义应用。

快速入门

若要从已启用在 Teams、Outlook 和 Microsoft 365 应用中运行的个人选项卡开始，可以使用适用于Visual Studio Code的 Teams 工具包扩展。

  1. 打开 Visual Studio Code。

  2. 在“视图”选项或 Ctrl+Shift+P 下选择“命令面板...”。

  3. 选择 “Teams：创建新应用”。

  4. 选择 “选项卡” 选项。

  5. 选择“ 基本”选项卡。

    屏幕截图显示突出显示了“基本选项卡”选项，以使用选项卡创建新应用功能。

  6. 选择首选编程语言。

  7. 在本地计算机上为工作区文件夹选择一个位置，然后输入应用程序名称。

  8. 创建应用后，在 Teams 工具包扩展中，请确保已登录到相应的 Microsoft 365 开发人员计划沙盒租户和 Azure 帐户。 可以在扩展的 “帐户 ”部分中找到这些选项。

  9. 在“视图”选项或 Ctrl+Shift+P 下选择“命令面板...”。

  10. 输入 Teams：预配以在 Azure 帐户中创建 Teams 应用资源，例如Azure 应用服务、App 服务计划、Azure 机器人和托管标识。 或者，可以在扩展的“生命周期”部分下选择“预配”。

  11. 选择订阅和资源组。 如果选择创建新的资源组，则需要指定位置。

  12. 选择“ 预配”。

  13. 在“视图”选项或 Ctrl+Shift+P 下选择“命令面板...”。

  14. 输入 “Teams：部署 ”，将示例代码部署到 Azure 中的预配资源并启动应用。 或者，可以在扩展的“生命周期”部分下选择“部署”。

  15. 选择“部署”。

在此处，你可以跳到 在 Teams 中上传自定义应用 ，并在 Outlook 和 Microsoft 365 应用中预览你的应用。 Microsoft 365 应用的应用清单和 TeamsJS API 调用已更新。

SharePoint 框架 (SPFx) 应用

从 SharePoint 框架 (SPFx) 版本 1.16 开始，Outlook 和 Microsoft 365 应用中也支持使用 SPFx 生成和托管的 Teams 个人选项卡。 若要更新 SPFx Teams 个人选项卡应用，请执行以下步骤：

  1. 确保拥有最新版本的 SPFx。

    npm install @microsoft/generator-sharepoint@latest --global

  2. 更新应用清单。

  3. 更新 TeamsJS 引用。

更新 TeamsJS 引用后， 在 Teams 中上传应用 ，以预览 Outlook 和 Microsoft 365 应用中运行的 SPFx 个人选项卡应用。 有关详细信息，请参阅使用 SharePoint 框架扩展 Outlook 和 Microsoft 365 应用。

更新应用清单

你需要使用应用清单架构版本 1.13 (或更高版本) ，使 Teams 个人选项卡能够在 Outlook 和 Microsoft 365 应用中运行。 有关架构版本的详细信息，请参阅 应用清单。

可通过两个选项更新应用清单：

  1. 打开命令面板：Ctrl+Shift+P。
  2. 运行该 Teams: Upgrade Teams manifest 命令并选择应用清单文件。 更改已到位。

如果使用 Teams 工具包创建个人应用，还可以使用它来验证对应用清单文件的更改并识别任何错误。 打开命令面板 () Ctrl+Shift+P 并查找 Teams：验证清单文件。

更新 TeamsJS 引用

你的应用必须引用 npm 包 @microsoft/teams-js@2.5.0 (或更高版本) 才能在 Outlook 和 Microsoft 365 中运行。 以前版本的 TeamsJS 在 Outlook 和 Microsoft 365 应用中仍然有效，但会记录弃用警告。 对以前版本的支持最终在 Outlook 和 Microsoft 365 中停止。 若要确定最新版本的 TeamsJS，请参阅 TeamsJS GitHub 存储库。

注意

如果要使用早于 v2.5.0 的 TeamsJS 版本，请确保将 添加到 www.microsoft365.comvalidMessageOrigins 调用的 (可选) 数组 app.initialize 。

可以使用 Teams 工具包来帮助识别和自动执行从 1.x TeamsJS 版本升级到 TeamsJS 2.x.x 版本所需的代码更改。 或者，可以手动执行相同的步骤;有关详细信息，请参阅 TeamsJS 库 。

  1. 打开 命令面板： Ctrl+Shift+P。
  2. 运行命令 Teams: Upgrade Teams JS SDK and code references。

完成后， package.json 文件引用 @microsoft/teams-js@2.0.0 (或更高版本) ， *.js/.ts 和 *.jsx/.tsx 文件将更新为：

重要

升级工具不支持 .html 文件内的代码，需要手动更改。

配置内容安全策略标题

与在 Microsoft Teams 中一样，选项卡应用程序托管在 Microsoft 365 应用和 Outlook Web 客户端的 iframe 元素 中。

如果应用使用 内容安全策略 (CSP) 标头，请确保在 CSP 标头中允许以下所有 上级帧 ：

Microsoft 365 应用主机 框架上级元素权限
Teams teams.microsoft.com, *.teams.microsoft.com, *.skype.com
Microsoft 365 应用 *.microsoft365.com, *.office.com
Outlook outlook.live.com, outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com

更新 SSO Microsoft Entra应用注册

Microsoft Entra个人选项卡的单一登录 (SSO) 在 Microsoft 365 应用和 Outlook 中的工作方式与在 Teams 中的工作方式相同。 但是，需要向租户应用注册门户中选项卡应用的Microsoft Entra应用注册添加多个客户端应用程序标识符。

  1. 使用沙盒租户帐户登录到 Microsoft Azure 门户 。

  2. 打开 应用注册 边栏选项卡。

  3. 选择个人选项卡应用程序的名称以打开其应用注册。

  4. 选择“管理) ”下的“公开 API (”。

    屏幕截图显示了Azure 门户上“应用注册”边栏选项卡中的“授权客户端 ID”。

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

    Microsoft 365 客户端应用程序 客户端 ID
    Teams 桌面、移动设备 1fec8e78-bce4-4aaf-ab1b-5451cc387264
    Teams Web 5e3ce6c0-2b1f-4285-8d4b-75ee78787346
    Microsoft 365 Web 4765445b-32c6-49b0-83e6-1d93765276ca
    Microsoft 365 桌面版 0ec893e0-5785-4de6-99da-4ed124e5296c
    Microsoft 365 移动版 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 客户端应用程序共享客户端 ID。

在 Teams 中上传自定义应用

在 Microsoft 365 和 Outlook 中运行应用的最后一步是在 Microsoft Teams 中上传更新的个人选项卡 应用包 。

  1. 将 (应用清单 和 应用图标) 打包到 zip 文件中。 如果使用 Teams 工具包创建应用，则可以使用 Teams 工具包的实用工具部分中的 Zip Teams 应用包选项轻松执行此操作。 选择 manifest.json 应用和相应环境的文件。

    屏幕截图显示了适用于Visual Studio Code的 Teams 工具包扩展中的 Zip Teams 应用包选项。

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

  3. 选择“应用”以打开“管理你的应用”窗格。 然后选择“ 上传应用”。

    屏幕截图显示“管理应用”下的“上传应用”选项。

  4. 选择 “上传自定义应用 ”选项，然后选择应用包。

    屏幕截图显示用于在 Teams 中上传应用的选项。

上传到 Teams 后，你的个人选项卡可在 Outlook 和 Microsoft 365 应用中使用。 必须使用用于将应用上传到 Teams 的相同凭据登录。 运行 Microsoft 365 for Android 应用时，需要重启应用才能使用 Microsoft 365 应用中的个人选项卡应用。

可以固定应用以进行快速访问，也可以在省略号 (...) 中找到应用左侧边栏中最近应用程序中的浮出控件。 请注意，在 Teams 中固定应用不会将其固定为 Microsoft 365 应用或 Outlook 中的应用。

在其他 Microsoft 365 体验中预览个人选项卡

下面介绍如何预览在 Microsoft 365 和 Outlook、Web 和 Windows 桌面客户端中运行的应用。

注意

如果使用 Teams 工具包示例应用并从 Teams 中卸载它，则会从 Outlook 和 Microsoft 365 应用中的 “更多应用” 目录中删除它。

Windows 版 Outlook

若要在 Windows 桌面上查看在 Outlook 中运行的应用：

  1. 启动 Outlook 并使用开发租户帐户登录。

  2. 在侧边栏上，选择“ 更多应用”。 上传的自定义应用标题显示在已安装的应用之间。

  3. 选择应用图标以在 Outlook 中启动应用。

    屏幕截图显示 Outlook 桌面客户端侧栏上的“更多应用”选项，用于查看已安装的选项卡应用。

Outlook 网页版

若要查看 Outlook 网页版中的应用，请执行以下操作：

  1. 转到Outlook 网页版并使用开发租户帐户登录。

  2. 在侧边栏上，选择“ 应用”。 上传的自定义应用标题显示在已安装的应用之间。

  3. 选择应用图标以启动和预览在 Outlook 网页版 中运行的应用。

    屏幕截图显示 outlook.com 侧栏上的“应用”选项，以查看已安装的选项卡应用。

Outlook for Android 应用

若要查看在 Outlook for Android 应用中运行的应用：

  1. 在 Android 设备上打开 Outlook 应用，并使用开发人员租户帐户登录。 如果在上传自定义应用之前已运行适用于 Android 的 Outlook 应用，请重启 Outlook 应用，在“已安装的应用”部分查看它。

  2. 选择 “应用” 图标。 上传的自定义应用显示在已安装的应用之间。

  3. 选择应用图标，在 Outlook for Android 中打开应用。

    屏幕截图显示 Android 上的 Outlook 应用的“应用”选项。

适用于 iOS 的 Outlook 应用

若要查看在适用于 iOS 的 Outlook 应用中运行的应用，请执行以下操作：

  1. 在设备上打开 Outlook 应用，并使用开发人员租户帐户登录。 如果 Outlook 应用在 Teams 中上传自定义应用之前已在运行，请重启 Outlook，在已安装的应用部分查看它。

  2. 选择“ 更多 ”图标。 上传的自定义应用显示在已安装的应用之间。

  3. 选择你的应用图标以在 Outlook 应用中打开你的应用。

    屏幕截图显示 iOS 上的 Outlook 应用的“更多”选项。

Windows 上的 Microsoft 365

若要查看在 Windows 桌面版上的 Microsoft 365 中运行的应用，请执行以下操作：

  1. 启动 Microsoft 365 并使用开发租户帐户登录。

  2. 选择侧栏上的 “应用” 图标。 上传的自定义应用标题显示在已安装的应用之间。

  3. 选择应用图标以在 Microsoft 365 中启动应用。

    屏幕截图显示 Microsoft 365 桌面客户端侧栏上的“应用”选项，用于查看已安装的选项卡应用。

Microsoft 365 网页版

预览 Web 上的 Microsoft 365 中运行的应用：

  1. 使用测试租户凭据登录到 microsoft365.com 。

  2. 选择侧栏上的 “应用” 图标。 上传的自定义应用标题显示在已安装的应用之间。

  3. 选择应用图标以在 Microsoft 365 网页版中启动应用。

    屏幕截图显示 microsoft365.com 侧栏上的“应用”选项，以查看已安装的选项卡应用。

Microsoft 365 for Android 应用

若要查看在 Microsoft 365 for Android 应用中运行的应用，请执行以下操作：

  1. 在设备上启动 Microsoft 365 应用，并使用开发人员租户帐户登录。 如果 Microsoft 365 应用在 Teams 中上传自定义应用之前已在运行，则需要重启 Teams 才能在已安装的应用中看到它。

  2. 选择 “应用” 图标。 上传的自定义应用显示在已安装的应用之间。

  3. 选择应用图标以在 Microsoft 365 应用中启动应用。

    屏幕截图显示了 Microsoft 365 应用侧栏上的“应用”选项，以查看你在 Microsoft 365 for Android 应用上安装的个人选项卡。

Microsoft 365 for iOS

若要查看在 Microsoft 365 for iOS 中运行的应用，请执行以下操作：

  1. 在设备上启动 Microsoft 365 应用，并使用开发人员租户帐户登录。 如果 Microsoft 365 应用在 Teams 中上传自定义应用之前已在运行，则需要重启 Teams 才能在已安装的应用中看到它。

  2. 选择 “应用” 图标。 上传的自定义应用显示在已安装的应用之间。

  3. 选择应用图标以在 Microsoft 365 应用中启动应用。

    屏幕截图显示 Microsoft 365 应用侧栏上的“应用”选项，用于查看 Microsoft 365 for iOS 上已安装的个人选项卡。

疑难解答

Outlook 和 Microsoft 365 客户端仅支持一部分 Teams 应用程序类型和功能。 有关检查主机对各种 TeamsJS 功能的支持的详细信息，请参阅 Microsoft 365 应用支持。

有关 Microsoft 365 主机和平台对 Teams 应用支持的总体摘要，请参阅 跨 Microsoft 365 扩展 Teams 应用。

可以通过调用该功能上的函数 (命名空间) ，并根据需要调整应用行为，在运行时isSupported()检查给定功能的主机支持。 这允许你的应用在支持它的主机中亮起 UI 和功能，并在不支持的主机中提供优美的回退体验。 有关详细信息，请参阅 区分应用体验。

使用 Microsoft Teams 开发人员社区频道报告问题并提供反馈。

调试

使用 Teams 工具包从 Visual Studio 代码中，可以调试 (F5) 在 Teams、Microsoft 365 应用和 Outlook 中运行的选项卡应用程序。

屏幕截图显示了 Teams 工具包中 Teams 中的“调试”下拉菜单。

选择所需的目标，然后启动调试体验。 首次运行本地调试时，系统会提示你登录到 Microsoft 365 租户帐户。

在 Microsoft Teams Framework (TeamsFx) 提供反馈并报告 Teams 工具包调试体验的任何问题。

移动调试

调试 Outlook for Android

若要在 Outlook for Android 中调试应用，请执行以下操作：

  1. 在 Teams 移动客户端中选择“ 更多 ”图标，然后打开已上传的自定义应用以在 Outlook 应用中运行。

  2. 确保 Android 设备已连接到开发计算机。 在开发计算机上，打开浏览器到其 DevTools 检查页。 例如，在 Microsoft Edge 中转到 edge://inspect/#devices 以显示已启用调试的 Android WebView 的列表。

  3. Microsoft Teams Tab找到带有选项卡 URL 的 ，然后选择“检查”以开始使用 DevTools 调试应用。

    屏幕截图显示 DevTools 中的 Web 视图列表。

  4. 在 Android WebView 中调试选项卡应用的方式与在 Android 设备上 远程调试 常规网站的方式相同。

调试 Microsoft 365 for Android

Microsoft 365 for Android 应用尚不支持 Teams 工具包 F5 () 调试。 下面介绍如何远程调试在 Microsoft 365 for Android 应用中运行的应用：

  1. 如果使用物理 Android 设备进行调试，请将其连接到开发计算机，并启用 USB 调试选项。 默认情况下，此选项在 Android 模拟器中处于启用状态。

  2. 从 Android 设备启动 Microsoft 365 应用。

  3. 打开配置文件 “我 > 设置 > 允许调试”，并打开 “启用远程调试”选项。

    屏幕截图显示“启用远程调试”切换选项。

  4. 保留“设置”。

  5. 离开个人资料屏幕。

  6. 选择“ 应用 ”并启动上传的自定义应用以在 Microsoft 365 应用中运行。

  7. 确保 Android 设备已连接到开发计算机。 在开发计算机上，打开浏览器到其 DevTools 检查页。 例如，在 Microsoft Edge 中转到 edge://inspect/#devices 以显示已启用调试的 Android WebView 的列表。

  8. Microsoft Teams Tab找到带有选项卡 URL 的 ，然后选择“检查”以开始使用 DevTools 调试应用。

    屏幕截图显示 DevTools 中的 Web 视图列表。

  9. 在 Android WebView 中调试选项卡应用的方式与在 Android 设备上 远程调试 常规网站的方式相同。

代码示例

示例名称 说明 Node.js
待办事项列表 具有使用 React 和 Azure Functions 生成的 SSO 的可编辑待办事项列表。 仅适用于 Teams (使用此示例应用尝试本教程) 中所述的升级过程。 View
待办事项列表 (Microsoft 365) 具有使用 React 和 Azure Functions 生成的 SSO 的可编辑待办事项列表。 适用于 Teams、Outlook、Microsoft 365 应用。 View
(Microsoft 365 应用) 的图像编辑器 使用 Microsoft 图形 API创建、编辑、打开和保存图像。 适用于 Teams、Outlook、Microsoft 365 应用。 View
Microsoft 365 应用) (静态选项卡示例 演示不同主机中可用的 SSO 身份验证和 TeamsJS 库功能。 适用于 Teams、Outlook、Microsoft 365 应用。 View
Northwind Orders 应用 演示如何使用 TeamsJS 库 v.2 将团队应用程序扩展到其他 Microsoft 365 主机应用。 适用于 Teams、Outlook、Microsoft 365 应用。 针对移动设备进行优化。 View

后续步骤

发布可在 Teams、Outlook 和 Microsoft 365 应用中发现的应用：

发布适用于 Outlook 和 Office 的 Teams 应用

另请参阅