使用自适应卡片在机器人中调用对话框
可以使用自适应卡片或 Bot Framework 卡从 Teams 机器人调用对话 (称为 TeamsJS v1.x) 中的任务模块。
对话框的主要功能:
- 通过避免多个步骤来增强用户体验。
- 帮助用户跟踪机器人状态。
- 从用户检索输入并显示自定义网页内容。
本分步指南可帮助你创建示例 Azure 机器人来调用 Teams 对话框。 你将看到以下输出:
先决条件
确保安装以下工具并设置开发环境:
安装 | 用于使用... | |
---|---|---|
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 ) 安装在项目目录 (中。 |
注意
下载 ngrok 后,注册并安装 authtoken。
设置本地环境
选择“ 代码”。
在下拉菜单中,选择“ 使用 GitHub Desktop 打开”。
选择“ 克隆”。
Microsoft Entra 应用注册
以下步骤可帮助你在 Azure 门户中创建和注册机器人:
- 创建并注册 Azure 应用。
- 创建客户端密码以启用机器人的 SSO 身份验证。
- 添加 Teams 频道以部署机器人。
- 使用开发隧道创建到 Web 服务器终结点的隧道, (建议) 或 ngrok。
- 将消息传送终结点添加到你创建的开发隧道。
添加应用注册
转到 Azure 门户。
选择“应用注册”。
选择“ + 新建注册”。
输入应用的名称。
选择 任何组织目录中的帐户 (任何Microsoft Entra ID 租户 - 多租户) 。
选择“注册”。
应用在 Entra ID Microsoft注册。 此时会显示应用概述页。
注意
保存 应用程序 (客户端的应用 ID) ID 和 目录 (租户) ID 以供进一步使用。
创建隧道
打开 Visual Studio。
选择 “创建新项目”。
在搜索框中,输入 “ASP.NET”。 在搜索结果中,选择“ ASP.NET 核心 Web 应用”。
选择 下一步。
输入 “项目名称 ”,然后选择“ 下一步”。
选择“创建”。
此时会显示概述窗口。
在调试下拉列表中,选择“ 开发隧道 (无活动隧道) >创建隧道...”。
将出现一个弹出窗口。
在弹出窗口中更新以下详细信息:
- 帐户:输入Microsoft或 GitHub 帐户。
- 名称:输入隧道的名称。
- 隧道类型:从下拉列表中选择“ 临时”。
- 访问:从下拉列表中选择“ 公共”。
选择“确定”。
此时会显示一个弹出窗口,显示已成功创建开发隧道。
选择“确定”。
可以在调试下拉列表中找到已创建的隧道,如下所示:
选择 F5 以在调试模式下运行应用程序。
如果出现 “安全警告 ”对话框,请选择“ 是”。
将出现一个弹出窗口。
选择 继续。
开发隧道主页将在新的浏览器窗口中打开,开发隧道现在处于活动状态。
转到 Visual Studio,选择“ 查看 > 输出”。
在 “输出 控制台”下拉菜单中,选择“ 开发隧道”。
输出控制台显示开发隧道 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。
选择“委托的权限”。
选择以下权限:
- OpenId 权限>email、 offline_access、 openid、 profile。
- 用户>User.Read。
选择 添加权限。
注意
- 如果未向应用授予 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 应用程序。
对于 Teams 移动版或桌面版:输入 客户端 ID 作为
1fec8e78-bce4-4aaf-ab1b-5451cc387264
。对于 Teams Web:输入 客户端 ID 作为
5e3ce6c0-2b1f-4285-8d4b-75ee78787346
。
选中“ 授权的范围 ”复选框。
选择“添加应用程序”。
下图显示了 客户端 ID:
创建机器人
创建 Azure 机器人资源
注意
如果已在 Teams 中测试机器人,请注销此应用和 Teams。 若要查看此更改,请再次登录。
转到“主页”。
选择“ + 创建资源”。
在搜索框中,输入 Azure 机器人。
选择“Enter”。
选择“ Azure 机器人”。
选择“创建”。
在机器人 句柄中输入机器人名称。
从下拉列表中选择 订阅 。
从下拉列表中选择 资源组 。
如果没有现有的资源组,可以创建新的资源组。 若要创建新的资源组,请执行以下步骤:
- 选择“ 新建”。
- 输入资源名称,然后选择“ 确定”。
- 从 “新建资源组 位置”下拉列表中选择一个位置。
在 “定价”下,选择“ 更改计划”。
选择 FO Free>Select。
在 “Microsoft应用 ID”下,选择“ 应用类型 ”作为 “多租户”。
在 “创建类型”中,选择“ 使用现有应用注册”。
输入 应用 ID。
注意
不能使用相同的 Microsoft应用 ID 创建多个机器人。
然后“审阅 + 创建”。
验证通过后,选择“ 创建”。
机器人需要几分钟时间进行预配。
选择“转到资源”。
已成功创建 Azure 机器人。
添加 Teams 频道
在左窗格中,选择“ 频道”。
在 “可用频道”下,选择“ Microsoft Teams”。
选中复选框以接受 服务条款。
选择“ 同意”。
选择“应用”。
添加消息传送终结点
设置应用设置和清单文件
转到克隆存储库中的 appsettings.json 文件。
打开 appsettings.json 并更新以下信息:
- 设置为
"MicrosoftAppType"
MultiTenant。 - 设置为
"MicrosoftAppId"
机器人 Microsoft应用 ID。 - 将 设置为
"MicrosoftAppPassword"
“客户端机密的值”。 - 设置为
"MicrosoftAppTenantId"
使用应用的租户的租户 ID。 - 设置为
"BaseUrl"
完全限定的域名, (https 到 io) 。
- 设置为
转到克隆存储库中的 manifest.json 文件。
打开 manifest.json 文件并更新以下信息:
- 将 的所有匹配项
<<Domain-Name>>
替换为 ngrok 或开发隧道域。 - 将 的所有匹配项
<<YOUR-MICROSOFT-APP-ID>>
替换为机器人的 Microsoft 应用 ID。
- 将 的所有匹配项
生成并运行服务
若要生成并运行服务,请使用最新版本的 Visual Studio 或命令行。
打开 Visual Studio。
转到 “文件>打开>项目/解决方案...”。
从示例>bot-task-module>csharp 文件夹中选择 TeamsTaskModule.csproj 文件。
在“ 视图”下,打开 “解决方案资源管理器”。
按 F5 运行项目。
如果出现以下对话框,请选择“是”:
此时会打开一个网页,其中包含一条消息。 机器人已准备就绪!
上传任务模块应用
在克隆的存储库中,转到 示例>bot-task-module>csharp>TeamsAppManifest。
使用 TeamsAppManifest 文件夹中存在的以下文件创建 .zip 文件:
- manifest.json
- icon-outline.png
- icon-color.png
在 Teams 客户端中,选择“ 应用” 图标。
选择“管理应用”。
选择 “上传应用”。
查找“ 上传自定义应用”选项。 如果看到 选项,则表示已启用自定义应用上传。
选择在 TeamsAppManifest 文件夹中创建的 .zip 文件,然后选择“ 打开”。
选择“添加”。
在撰写消息区域中,键入 hi ,机器人发送自适应卡片。
应用显示 来自主图卡的任务模块调用 和 来自自适应卡片的任务模块调用。
在 Teams 中与应用交互
从主卡的任务模块调用中选择自适应卡片,或者从自适应卡片中选择任务模块调用。
输入 Hello ,然后选择“ 提交”。
自适应卡片 发送确认消息。
从主图卡的任务模块调用中选择自定义窗体,或从自适应卡片调用任务模块调用。
输入所需信息:
- 名称
- 电子邮件
- 最喜爱的书籍
- Password
- 确认密码
选择“ 注册”。
自定义窗体 发送确认消息。
聊天中将显示以下信息:
从主图卡的任务模块调用中选择 YouTube,或者从自适应卡片中选择任务模块调用。
选择“ 播放”。
完成挑战
你想出了这样的东西吗?
恭喜!
你已完成开始使用 Teams 对话应用的教程!
你有关于此部分的问题? 如果有,请向我们提供反馈,以便我们对此部分作出改进。