具有自适应卡片的“生成”选项卡

Teams 中的自适应卡片选项卡提供显示信息的唯一方法。可以将自适应卡片呈现到选项卡，而不是在 iFrame 中嵌入 Web 内容。使用自适应卡呈现前端时，后端由机器人提供支持。机器人使用呈现的自适应卡片处理接受请求和适当响应。

警告

自适应卡片选项卡在新 Teams 客户端中不可用。经典 Teams 客户端预计将在 2024 年 3 月 31 日弃用。如果应用使用自适应卡片选项卡，建议将选项卡重新生成为基于 Web 的选项卡。

可以使用相关用户界面生成选项卡， (UI) 构建基块，这些构建基块是本机的桌面、Web 和移动设备。

本文可帮助你了解：

需要对应用清单进行更改。
标识如何使用自适应卡在选项卡中调用活动请求和发送信息。
对对话的影响 (TeamsJS v1.x) 工作流中称为任务模块。

本分步指南可帮助你在桌面和移动设备上使用自适应卡片生成选项卡。你将看到以下输出：

成功完成分步指南后选项卡自适应卡片输出的屏幕截图。

先决条件

剩余 15 分钟

确保安装以下工具并设置开发环境：

	安装	用于使用...
	Microsoft Teams	Microsoft Teams 可在一个位置通过聊天、会议和通话应用与你合作的每个人进行协作。
	Visual Studio 2022	可以在 Visual Studio 2022 中安装企业版，并安装 ASP.NET 和 Web 开发工作负载。使用最新版本。
	.NET Core SDK	用于本地调试和Azure Functions应用部署的自定义绑定。使用最新版本或安装可移植版本。
	开发隧道	Teams 应用功能 (对话机器人、消息扩展和传入 Webhook) 需要入站连接。隧道将开发系统连接到 Teams。开发隧道是一种功能强大的工具，用于安全地将 localhost 打开到 Internet 并控制谁有权访问。 Visual Studio 2022 版本 17.7.0 或更高版本中提供了开发隧道。或者，还可以使用 ngrok 作为隧道，将开发系统连接到 Teams。对于仅包含选项卡的应用，这不是必需的。此包使用 npm devDependencies) 安装在项目目录 (中。
	Microsoft 365 开发人员帐户	具有安装应用的相应权限的 Teams 帐户的访问权限。

注意

下载 ngrok 后，注册并安装 authtoken。

设置本地环境

剩余 14 分钟

打开 Microsoft-Teams-Samples。
选择“ 代码”。
在下拉菜单中，选择“ 使用 GitHub Desktop 打开”。
选择“ 克隆”。

注册Microsoft Entra应用

剩余 13 分钟

若要在 Microsoft Entra ID 中创建和注册机器人，请执行以下步骤：

Create到 Web 服务器的终结点的 ngrok 隧道。
Create Azure 机器人资源，将机器人注册到 Azure 机器人服务。
Create启用单一登录 (SSO) 机器人身份验证的客户端密码。
添加 Teams 频道以部署机器人。
将消息传递终结点添加到创建的 ngrok 或开发隧道。

添加应用注册

转到Azure 门户。
选择“应用注册”。
选择“ + 新建注册”。
输入应用的名称。
选择任何组织目录中的帐户 (任何Microsoft Entra ID租户 - 多租户) 。
选择“注册”。

你的应用已在 Microsoft Entra ID 中注册。此时会显示应用概述页。

注意

保存 应用程序 (客户端的应用 ID) ID 和 目录 (租户) ID 以供进一步使用。

Create隧道

开发隧道
ngrok

打开 Visual Studio。
选择“Create新项目”。
在搜索框中，输入 “ASP.NET”。在搜索结果中，选择“ASP.NET Core Web 应用”。
选择“下一步”。
输入 “项目名称 ”，然后选择“ 下一步”。
选择“创建”。

此时会显示概述窗口。
在调试下拉列表中，选择“开发隧道” (没有活动隧道) >Create隧道...“。

将出现一个弹出窗口。
在弹出窗口中更新以下详细信息：
1. 帐户：输入 Microsoft 或 GitHub 帐户。
2. 名称：输入隧道的名称。
3. 隧道类型：从下拉列表中选择“ 临时”。
4. 访问：从下拉列表中选择“ 公共”。
选择“确定”。

此时会显示一个弹出窗口，显示已成功创建开发隧道。
选择“确定”。

可以在调试下拉列表中找到已创建的隧道，如下所示：
选择 F5 以在调试模式下运行应用程序。
如果出现 “安全警告 ”对话框，请选择“ 是”。

将出现一个弹出窗口。
选择继续。

开发隧道主页将在新的浏览器窗口中打开，开发隧道现在处于活动状态。
转到 Visual Studio，选择“ 查看 > 输出”。
在 “输出 控制台”下拉菜单中，选择“ 开发隧道”。

输出控制台显示开发隧道 URL。

使用 ngrok 或命令提示符创建到本地运行的 Web 服务器的公开可用 HTTPS 终结点的隧道。在 ngrok 中运行以下命令：

ngrok http --host-header=localhost 3978

提示

如果遇到 ERR_NGROK_4018，请按照命令提示符中提供的步骤注册并验证 ngrok。然后运行命令 ngrok http --host-header=localhost 3978 。

窗口显示 HTTPS URL。

屏幕截图显示了 ngrok HTTPS URL。

添加 Web 身份验证

在左窗格中的 “管理”下，选择“ 身份验证”。
选择 “添加平台>Web”。
通过将追加 auth-end 到完全限定的域名，输入应用的重定向 URI。例如，https://your-devtunnel-domain/auth-end 或 https://your-ngrok-domain/auth-end。
在 “隐式授予和混合流”下，选中“ 访问令牌 和 ID 令牌 ”复选框。
选择“配置”。
在 “Web”下，选择“ 添加 URI”。
输入 https://token.botframework.com/.auth/web/redirect。
选择“保存”。

创建客户端密码

在左窗格中的 “管理”下，选择“ 证书 & 机密”。
在 “客户端机密”下，选择“ + 新建客户端密码”。

此时会显示 “添加客户端机密 ”窗口。
输入 “说明”。
选择“添加”。
在“ 值”下，选择“ 复制到剪贴板 ”以保存客户端密码值以供进一步使用。

添加 API 权限

在左窗格中的 “管理”下，选择“ API 权限”。
选择“ + 添加权限”。
选择 Microsoft Graph。
选择“委托的权限”。
选择 “用户”。读取 权限。
选择 添加权限。
注意
- 如果未向应用授予 IT 管理员同意，用户必须在首次使用应用时提供同意。
- 仅当Microsoft Entra应用在不同租户中注册时，用户才需要同意 API 权限。

添加应用程序 ID URI

在左窗格中的 “管理”下，选择“ 公开 API”。
在 “应用程序 ID URI”旁边，选择“ 添加”。
以或 api://your-ngrok-domain/botid-{AppID} 格式更新应用程序 ID URIapi://your-devtunnel-domain/botid-{AppID}，然后选择“保存”。

下图显示了域名：

添加范围

在左窗格中的 “管理”下，选择“ 公开 API”。
选择“ + 添加范围”。
输入 “access_as_user ”作为 “作用域名称”。
在 “谁可以同意？”下，选择“ 管理员和用户”。
更新其余字段的值，如下所示：
- 输入 Teams 可以访问用户的个人资料作为管理员同意显示名称。
- 输入“允许 Teams 以当前用户身份调用应用的 Web API”作为管理员同意说明。
- 输入 Teams 可以访问用户配置文件，并代表用户发出请求 作为 用户同意显示名称。
- 输入“启用 Teams”以调用此应用的 API，其权限与用户同意说明相同。
确保将“状态”设置为“已启用”。
选择“添加作用域”。

下图显示了字段和值：

注意

作用域名称必须与末尾追加的应用程序 ID URI /access_as_user 匹配。

添加客户端应用程序

在左窗格中的 “管理”下，选择“ 公开 API”。

在 “授权的客户端应用程序”下，确定要为应用的 Web 应用程序授权的应用程序。
选择“ + 添加客户端应用程序”。
添加 Teams 移动或桌面和 Teams Web 应用程序。
1. 对于 Teams 移动版或桌面版：输入 客户端 ID 作为 1fec8e78-bce4-4aaf-ab1b-5451cc387264。
2. 对于 Teams Web：输入 客户端 ID 作为 5e3ce6c0-2b1f-4285-8d4b-75ee78787346。
选中“ 授权的范围 ”复选框。
选择“添加应用程序”。

下图显示了 客户端 ID：

Create机器人

剩余 8 分钟

若要确保机器人服务允许用户登录并访问机器人，必须为机器人配置单 Sign-On (SSO) 。执行以下步骤进行配置：

将重定向 URI 添加到 Azure 机器人资源。
为下游调用添加任何必需的 API 权限。
启用隐式授权和混合流。
更新应用清单。
设置机器人服务连接。

Create Azure 机器人资源

注意

如果已在 Teams 中测试机器人，请注销此应用和 Teams。若要查看此更改，请再次登录。

转到“主页”。
选择“+ Create资源”。
在搜索框中，输入 Azure 机器人。
选择“Enter”。
选择“ Azure 机器人”。
选择“创建”。
在机器人句柄中输入机器人名称。
从下拉列表中选择订阅。
从下拉列表中选择 资源组 。

如果没有现有的资源组，可以创建新的资源组。若要创建新的资源组，请执行以下步骤：
1. 选择“新建Create”。
2. 输入资源名称，然后选择“ 确定”。
3. 从 “新建资源组 位置”下拉列表中选择一个位置。
在 “定价”下，选择“ 更改计划”。
选择 FO Free>Select。
在 “Microsoft 应用 ID”下，选择“ 应用类型 ”作为 “多租户”。
在 “创建类型”中，选择“ 使用现有应用注册”。
输入 应用 ID。

注意

不能使用相同的 Microsoft 应用 ID 创建多个机器人。
然后“审阅 + 创建”。
验证通过后，选择“Create”。

机器人需要几分钟时间进行预配。
选择“转到资源”。

已成功创建 Azure 机器人。

添加 Teams 频道

在左窗格中，选择“ 频道”。
在 “可用频道”下，选择“ Microsoft Teams”。
选中复选框以接受 服务条款。
选择“ 同意”。
选择“应用”。

添加消息传送终结点

开发隧道
ngrok

使用输出控制台中的开发隧道 URL 作为消息传送终结点。
在左窗格中的 “设置”下，选择“ 配置”。
以格式https://your-devtunnel-domain/api/messages更新消息传送终结点。
选择“应用”。

你已成功在 Azure 机器人服务中设置机器人。

注意

如果 Application Insights 检测密钥 显示错误，请使用 应用 ID 进行更新。

从 ngrok 复制 HTTPS URL。

注意

ngrok 中的 HTTPS URL 是完全限定的域名。 WebAppDomain是不包含https://在中的完全限定域名。
在左窗格中的 “设置”下，选择“ 配置”。
以格式https://your-ngrok-domain/api/messages更新消息传送终结点。
选择“应用”。

已成功在 Azure 机器人服务中设置机器人。

注意

如果 Application Insights 检测密钥 显示带有 应用 ID 的错误更新。

更新清单文件

从左窗格中选择“清单”。
设置配置项 “accessTokenAcceptedVersion”：2。如果未设置，请将其值更改为 2 ，然后选择“ 保存”。

注意

如果已在 Teams 中测试机器人，请注销此应用并注销 Teams。若要查看此更改，请再次登录。

设置机器人服务连接

转到 “配置”页。
选择“添加 OAuth 连接设置”。
在 “新建连接设置”中，输入以下详细信息：
- 名称：输入新连接设置的名称。可以在机器人服务代码的设置中使用名称。
- 服务提供程序：选择“ Azure Active Directory v2”。
- 客户端 ID：更新 Microsoft 应用 ID。
- 客户端密码：更新 客户端密码 ID 的值。
- 令牌交换 URL：使用 应用程序 ID URI。
- 租户 ID：输入 common。
- 作用域：输入 User.Read。
选择“保存”。

设置应用设置和清单文件

剩余 6 分钟

转到克隆存储库中的 appsettings.json 文件。
打开 appsettings.json 文件并更新以下信息：
- 将替换为 "MicrosoftAppId" 机器人的 Microsoft 应用 ID。
- 将替换为"MicrosoftAppPassword"机器人的客户端密码的值。
- 将替换为 "ConnectionName" 机器人的名称。
- 将替换为 "ApplicationBaseUrl" ngrok 或开发隧道域名。
转到克隆存储库中的 manifest.json 文件。
打开 manifest.json 文件并更新以下更改：
将和 {Microsoft App ID} 的所有匹配项{contentBotId}替换为机器人的 Microsoft 应用 ID。

生成并运行服务

剩余 5 分钟

若要生成并运行服务，请使用 Visual Studio：

打开 Visual Studio。
转到“文件>打开>项目/解决方案”。
从 csharp>TabWithAdpativeCardFlow 文件夹中选择 TabWithAdpativeCardFlow.csproj 文件。
按 F5 运行项目。可以在相应的文件夹中使用 Visual Studio 或 .NET 运行项目。

此时会显示一个网页，并显示消息“ 机器人已准备就绪！

在 Teams 中配置和上传应用

剩余 4 分钟

在克隆的存储库中，转到 csharp>TabWithAdpativeCardFlow>AppManifest。
使用 AppManifest 文件夹中存在的以下文件Create .zip 文件：
- manifest.json
- outline.png
- color.png
  
  注意
  
  不得 manifest.zip 包含任何其他文件夹。它必须在 zip 文件夹中具有清单 json 源文件、颜色图标和大纲图标。
在 Teams 客户端中，选择“ 应用” 图标。
选择“管理应用”。
选择 “上传应用”。
查找“ 上传自定义应用”选项。如果看到选项，则表示已启用自定义应用上传。
选择在 TeamsAppManifest 文件夹中创建的 .zip 文件，然后选择“ 打开”。
选择“添加”。

可以通过登录与此选项卡交互。
向选项卡发送消息。