你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在 Microsoft Teams 自定义应用中嵌入聊天

本文介绍如何创建 Microsoft Teams 自定义应用来与 Azure 通信服务实例交互。 此聊天应用在两个系统之间实现互操作功能，同时保持后端环境和标识配置的独立性。

用例

• 销售点和售后支持

  消费者网站可为自动化机器人和/或销售助理提供对聊天通道的快速访问。 我们建议使用独立的 Azure 通信服务实例。

  同样，独立使用 Teams 中整合的聊天功能也能让售后支持和协调工作受益。

• 受保护的远程咨询服务

  对于医疗远程呈现应用程序、银行服务和其他隐私敏感型方案，Azure 通信服务提供的加密和安全性可以实现这些用例，而无需远程参与者使用 Teams。 你可以根据需要对解决方案进行品牌设计，组织的员工可以从他们现有的 Teams 安装中访问咨询服务。

• 数据分离要求方案

  对于某些区域，你可能需要确保在地理上将数据隔离到特定的司法管辖区。 公司的法律数据存储区可能与用于存储客户数据的位置不同。 你可以在创建实例时使用 Azure 通信服务存储位置配置此类方案。 该位置可与 Teams 的存储位置不同。

  

体系结构

下图显示了 Teams 扩展性聊天应用的整体视图。

1. Azure 通信服务实例支持该解决方案。

2. Web API 为解决方案的面向内部和外部的应用程序提供服务器端功能。

3. Contoso 客户使用客户端（Web 或移动）应用程序来与员工交互。 此示例演示了用于托管内容的 Web 应用。

4. Contoso 员工在其 Teams 客户端中使用 Teams 应用。 Teams 客户端是托管在 Teams 自定义应用中的 Web 应用，它通过 Teams 客户端中的 iframe 部署到 Teams。

   Azure 通信服务实例不会直接连接到 Teams 环境。 通信服务环境通过 Teams 自定义应用来呈现。

   Teams 自定义应用获得 Teams 的单一登录 (SSO)，而 SSO 为应用提供 Teams 用户 ID。 自定义消息传递应用使用 Teams 用户 ID 映射到通信服务用户 ID。

生成解决方案

需要使用以下组件来创建聊天应用。

1. Azure 通信服务实例。

   • 有关详细信息，请参阅快速入门：创建和管理通信服务资源。
   • 在创建期间配置实例的存储区。

2. 用于托管后端组件的 API 服务器。 API 服务器提供所需的后端逻辑。 常见用例包括用户身份验证和聊天线程管理 API。

3. 用于托管前端组件的 Web 应用实例。 面向客户的 Web 应用的前端组件，可能还包括用于通过嵌入式 iframe 驱动 Teams 自定义应用布局的前端组件。

4. Teams 自定义应用配置了 Teams 来启用此应用安装。 若要向员工提供体验，需设置 Teams 自定义应用，以使用由 Web 应用或通过 Teams 自定义应用部署驱动的 Web 内容。

设计应用

可以根据业务需求设计面向客户的门户站点。 简单的通话/聊天 Web 应用通常需要两项功能：

• 身份验证（注册/登录）
• 主要聊天（和通话）用户界面

Teams 单一登录 (SSO) 在面向员工的 Teams 自定义应用中提供身份验证。 在这种情况下，员工需要在进入主要聊天（和通话）体验之前查看更详细的客户列表。

Teams 内部设计工作的其他一些考虑因素包括用于确保体验具有凝聚力、包容性和易访问性的指导原则。 有关详细信息，请参阅设计 Microsoft Teams 应用。

实现 Teams 自定义应用

通过“入门”>“生成你的第一个 Teams 应用”开始你的专属旅程。

若要获取 Visual Studio Code 的开发工具包、学习材料的快速参考、代码示例和项目模板，请参阅 Microsoft Teams 工具包概述。

在 Microsoft Teams 工具包中，选择“新建项目”>“选项卡”。

选项卡应用提供最简单的框架，你可以进一步对其进行细化以使用“在 Fluent UI 中做出反应”。

可以使用 Microsoft 365 开发人员帐户快速创建应用骨架并在 Teams 本地试用它。 使用“在 Fluent UI 中做出反应”功能，然后在 Visual Studio Code 中进行基本安装。

此项目通过 Azure Functions 提供一个模板化 API 实现。 此时，你需要为聊天平台创建完整的后端实现。 “基本选项卡”选项提供 Web 应用前端结构。 它还为应用启用 SSO，如在 Teams 中开发单一登录体验 | GitHub 中所述。

实现 Teams 自定义应用的其他方式

可以使用 Teams 应用的 manifest.json 文件创建一个选项卡应用，将每个选项卡链接到外部应用。 有关详细信息，请参阅示例应用清单。

还可以使用现有的 Microsoft Entra 应用，如在 TeamsFx 项目中使用现有的 Microsoft Entra 应用中所述。

有关选项卡功能的详细信息，请参阅在 Teams 应用中配置选项卡功能 | GitHub。

生成聊天应用

若要生成功能齐全的聊天应用，需要提供一些关键函数。

需要一个 Azure 通信服务实例来托管聊天并提供发送和接收消息（和其他通信类型）的函数。 在此系统中，每个通信 ID 由应用的 API 服务提供，它代表一个用户。 完成用户身份验证流后，用户会收到通信 ID。

身份验证流

Azure 通信服务终结点需要以持有者令牌形式提供的身份验证。 身份验证服务为每个通信 ID 提供一个令牌。

根据你的要求，可能需要为用户提供一种注册、登录或解析其他某种形式的一次性身份验证链接的方式。

需要在后端服务中创建标识并颁发身份验证令牌，以确保安全。 有关详细信息，请参阅快速入门：创建和管理访问令牌。

聊天 UI

为 Web UI 提供带有消息条目的聊天窗格的最快方法是使用 Azure communication-react 包中的“React Web UI 库”复合组件。 Storybook 文档解释了这些组件的集成以及在 Storybook 环境中的直接使用方法。

包含参与者列表的聊天复合组件

聊天复合组件需要来自身份验证流、通信服务终结点及其必须附加到的线程 ID 的用户标识符和令牌。

线程 ID 表示通信标识符组之间的对话。 在对话之前，需要创建线程并将用户添加到该线程。 可以自动执行此过程，或者从 Teams 应用中的选项卡提供该函数以供员工配置。

聊天机器人

可以将机器人添加到聊天应用。 有关详细信息，请参阅快速入门：将机器人添加到聊天应用。

分发 Teams 应用

若要在组织中使用某个 Teams 应用，该应用必须获得 Teams 管理员的批准。 可以生成 Teams 自定义应用，并通过 Teams 管理中心安装应用包。 有关详细信息，请参阅在 Microsoft Teams 管理中心管理自定义应用。

后续步骤

• 快速入门：将机器人添加到聊天应用
• 在 Teams 互操作性聊天中使用 UI 库启用文件共享

相关文章

• 有关使用 Teams 互操作性生成应用的详细信息，请参阅联系中心。