通过

先决条件

  • 项目

在构建 Teams 个人和频道或组选项卡时，请确保遵守以下先决条件：

  • 利用 X-Frame-Options 和 Content-Security-Policy HTTP 响应标头，在 iFrame 中发现选项卡页。

  • 确保所有 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

    警告

    Microsoft的云服务（包括 Web 版本的 Teams、Outlook 和 Microsoft 365 域）正在迁移到域 *.cloud.microsoft 。 在 2024 年 9 月之前执行以下步骤，确保应用继续在受支持的 Microsoft 365 Web 客户端主机上呈现：

    1. 将 TeamsJS 库更新到 v.2.19.0 或更高版本。 有关最新版本的 TeamsJS 的详细信息，请参阅 Microsoft Teams JavaScript 客户端库。

    2. 如果已为应用定义了 内容安全策略 (CSP) 标头，请更新 frame-ancestors 指令以包含域 *.cloud.microsoft 。 为确保迁移过程中的向后兼容性，请保留 CSP 标头中的现有 frame-ancestors 值。 此方法可确保应用继续跨现有和将来Microsoft 365 主机应用程序工作，并最大程度地减少后续更改的需求。

    在应用的 CSP 标头的 指令中 frame-ancestors 更新以下域：

    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/。 此标头已弃用，但大多数浏览器仍接受它。

  • 登录页不会在 iFrame 中呈现，以防范点击劫持。 身份验证逻辑需要使用重定向以外的方法。 例如，使用基于令牌或基于 Cookie 的身份验证。

    注意

    建议为 Cookie 设置预期用途，而不是依赖默认浏览器行为。 有关详细信息，请参阅 SameSite cookie 属性。

  • 浏览器同源策略限制可防止网页向所服务网页以外的不同域发出请求。 因此，可以将配置或内容页重定向到另一个域或子域。 跨域导航逻辑需要允许 Teams 客户端在加载选项卡或与选项卡通信时针对应用清单中的静态validDomains列表验证源。

  • 根据 Teams 客户端的主题、设计和意向设置选项卡样式。 选项卡在构建以满足特定需求并专注于与选项卡的频道位置相关的一小部分任务或数据子集时效果最佳。

  • 在内容页中，使用脚本标记添加对 Microsoft Teams JavaScript 客户端库 的引用。 页面加载后，调用 app.initialize()，否则不显示页面。

  • 若要在移动客户端上运行身份验证，必须升级到 TeamsJS 版本 1.4.1 或更高版本。

  • 如果选择让频道或组选项卡显示在 Teams 移动客户端上，则 setConfig() 配置必须具有 websiteUrl 属性的值。

  • Microsoft Teams 选项卡不支持加载使用自签名证书的 Intranet 网站。

注意

本主题反映 2.0.x 版的 Microsoft Teams JavaScript 客户端库 (TeamsJS) 。 如果使用的是早期版本，请参阅 TeamsJS 库概述 ，获取有关最新 TeamsJS 与早期版本之间的差异的指导。

用于生成选项卡的工具

  安装 用于使用...
Required    
  Node.js 后端 JavaScript 运行时环境。 使用最新的 v16 LTS 版本。
  Microsoft Edge（推荐）或 Google Chrome 包含开发人员工具的浏览器。
  Visual Studio Code JavaScript、TypeScript 或 SharePoint 框架 (SPFx) 生成环境。
  Visual Studio 2022、 ASP.NET 和 Web 开发 工作负载 .NET。 可以安装 Visual Studio 2022 的免费社区版。
  Git 使用 GitHub 中示例应用存储库的 Git。
  Microsoft Teams 通过聊天、会议、通话等应用与每一位同事进行协作的 Microsoft Teams - 一个地方完成所有操作。
  ngrok Ngrok 是反向代理软件工具。 Ngrok 创建通向本地运行 Web 服务器的公开可用 HTTPS 终结点的隧道。 在计算机上当前会话期间，服务器的 Web 终结点可用。 当你关闭设备或将设备置于睡眠状态时，该服务不再可用。
  Teams 开发人员门户 基于 Web 的门户，用于配置、管理和分发 Teams 应用，包括到组织或 Microsoft Teams 应用商店。

生成 Teams 选项卡

现在，让我们生成选项卡。但首先请选择要生成的选项卡：

创建个人选项卡

生成频道或组选项卡

另请参阅