在 Microsoft Teams 中嵌入自定义应用程序答案

【问题标题】：Embed custom application in Microsoft Teams在 Microsoft Teams 中嵌入自定义应用程序
【发布时间】：2020-11-20 14:22:25
【问题描述】：

我们计划将我们的应用程序作为自定义应用程序嵌入到 Microsoft Teams 选项卡中。我们的应用程序基于 AngularJS 框架。我想知道这是否可能？

目前我通过 MS-Teams 中的 App-studio 创建了一个 App Manifest，但是当我“测试和分发”该应用程序时，该应用程序没有加载到 iframe 选项卡中并且它一直在旋转。

我尝试在 iframe 中以简单的 HTML 运行我们的应用程序，它可以正常工作，但不能在 Teams 中运行。控制台没有错误，我不明白出了什么问题。

【问题讨论】：

【解决方案1】：

虽然这应该是可能的，但了解“个人”标签和“共享”标签之间的区别很重要 - 共享标签需要预先获得“配置”体验才能设置标签。不过，在这两种情况下，您都需要确保引用 Teams JS 库，以便您的选项卡实际呈现。有关更多信息，请参阅here，其中指出：

要在 Teams 中显示您的页面，您必须包含 Microsoft Teams JavaScript 客户端 SDK

【讨论】：

感谢希尔顿，我们正在使用“共享”标签。当然我们错过了包括 SDK。
好的，希望这是主要问题吗？您可以通过制作个人选项卡来测试它，但如果您想制作共享选项卡，您还需要包含一个“配置”页面。它基本上是添加选项卡时将出现在小弹出窗口中的内容。它使您可以更改以执行用户可能需要的任何配置（例如，请参阅“SharePoint”选项卡，该选项卡要求用户选择特定站点中的页面或列表等）。您不需要 - 有任何实际配置，但您只需要一个存根页面，通知团队最终选项卡已准备好呈现
我还是很困惑，内容页面可以是我的网络应用程序。对吗？
是的，正确的。但是，在“共享”选项卡中，您需要在项目中添加一个额外的页面，该页面将首先出现在“配置”弹出窗口中，然后用户才能看到您的内容页面/选项卡
我首先使用个人选项卡测试应用程序，我在代码中包含了 Microsoft SDK，但应用程序无法在团队内部呈现（在 chrome 浏览器上测试）。我收到很多错误：其中一个错误是：CORS 策略阻止了从源“dev.teams.microsoft.com”获取“developer.microsoft.com/en-us/json-schemas/teams/v1.9/…”的访问权限：没有“Access-Control-Allow-Origin”标头出现在请求的资源。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。