生成会议侧面板
Microsoft Teams 会议侧面板可增强会议中体验，并帮助组织者和演示者拥有不同的视图和操作集。
会议侧面板的主要功能包括：
- 添加新议程点的规定。
- 将议程作为文本输入添加到会议侧面板列表。
- 将议程列表发布到会议聊天。
本分步指南可帮助你生成会议侧面板以添加和发布议程。 你将看到以下输出：
先决条件
确保安装以下工具并设置开发环境：
| 安装 | 用于使用... | |
|---|---|---|
| Microsoft Teams | Microsoft Teams，在一个位置通过聊天、会议和通话应用与你合作的每个人协作。 | |
| Visual Studio 2022 | 可以在 Visual Studio 2022 中安装企业版，并安装 ASP.NET 和 Web 开发工作负载。 使用最新版本。 | |
| .NET Core SDK | 用于本地调试和 Azure Functions 应用部署的自定义绑定。 使用最新版本或安装可移植版本。 | |
| Node.js 和 NPM | 后端 JavaScript 运行时环境。 有关详细信息，请参阅 项目类型的Node.js 版本兼容性表。 | |
| Microsoft Teams JavaScript 客户端库 (TeamsJS) | 可以使用 npm 或 yarn 安装包。 使用最新版本。 | |
| 实时共享 SDK | Live Share 支持协作应用体验。 | |
| 开发隧道 | Teams 应用功能 (对话机器人、消息扩展和传入 Webhook) 需要入站连接。 隧道将开发系统连接到 Teams。 开发隧道是一种功能强大的工具，用于安全地将 localhost 打开到 Internet 并控制谁有权访问。 Visual Studio 2022 版本 17.7.0 或更高版本中提供了开发隧道。 或者 ，还可以使用 ngrok 作为隧道，将开发系统连接到 Teams。 对于仅包含选项卡的应用，这不是必需的。 此包使用 npm devDependencies) 安装在项目目录 (中。 |
注意
下载 ngrok 后，注册并安装 authtoken。
设置本地环境
选择“ 代码”。
在下拉菜单中，选择“ 使用 GitHub Desktop 打开”。
选择“ 克隆”。
注意
如果遇到错误 “文件名太长”，请在所选的管理员终端中应用 git 命令 git config --system core.longpaths true 。
Microsoft Entra 应用注册
若要在 entra ID Microsoft中创建和注册机器人，请执行以下步骤：
- 创建 Azure 机器人资源以将机器人注册到 Azure 机器人服务。
- 创建客户端密码以启用单一登录 (SSO) 机器人身份验证。
- 添加 Teams 频道以部署机器人。
- 创建到 Web 服务器终结点的 ngrok 或开发隧道。
- 将消息传递终结点添加到创建的 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 文件。
在 Visual Studio 中打开 appsettings.json 文件并更新以下信息：
- 将 替换为
<<Microsoft-App-ID>>机器人的 Microsoft 应用 ID。 - 将 替换为
<<Microsoft-App-Secret>>机器人的客户端密码的值。 - 将 替换为
<<Your_Domain_URL>>ngrok 或开发隧道域名。
- 将 替换为
转到克隆存储库中的 manifest.json 文件。
在 Visual Studio 中打开 manifest.json 文件，然后进行以下更改：
- 将 替换为
<<Manifest-id>>唯一清单 ID。 还可以输入 Microsoft应用 ID。 - 将 和
{{Base_URL}}的所有匹配{{domain-name}}项替换为 ngrok 或开发隧道域名。 - 将 的所有匹配项
<<YOUR-MICROSOFT-APP-ID>>替换为机器人的 Microsoft 应用 ID。
- 将 替换为
生成并运行服务
若要生成并运行服务，请使用 Visual Studio 或命令行：
打开 Visual Studio。
转到“文件>打开>项目/解决方案”。
从 csharp>SidePanel 文件夹中选择 SidePanel.csproj 文件。
按 F5 运行项目。 可以在相应的文件夹中使用 Visual Studio 或 .NET 运行项目。
转到 示例>会议-sidepanel>csharp>ClientApp 文件夹，并运行以下命令：
npx @fluidframework/azure-local-service@latest如果出现以下对话框，请选择“是”：
此时会显示一个网页，并显示消息“ 机器人已准备就绪！
:::image type="content" source="~/assets/images/meetings-side-panel/appisready_1.png" alt-text="Screenshot shows the webpage that displays that your bot is ready.":::
将会议侧面板添加到 Teams
在克隆的存储库中，转到 csharp > SidePanel > AppManifest。
使用 AppManifest 文件夹中存在的以下文件创建 .zip 文件：
manifest.json
outline.png
color.png
创建包含几个演示者和与会者的会议。
创建会议后，加入会议。
转到会议详细信息页，然后选择 “应用” 图标添加应用。
在弹出窗口中，选择“ 管理应用”。
选择 “上传应用”。
转到 csharp > SidePanel > AppManifest。
选择“ 打开 ”以上传在 AppManifest 文件夹中创建的 .zip 文件。
选择“添加”。
“ 管理应用 ”部分显示应用程序列表。
转到 Teams 会议。
选择“应用”。
在应用选择页中，显示 侧面板 应用。
选择 “侧面板” 应用。
选择“保存”。
应用在会议侧面板中可见。
在 Teams 中与应用交互
让我们在 Teams 中与应用交互！
选择“ 添加新议程项 ”，将新议程添加到默认议程列表。
输入新的议程项，然后选择“ 添加”。
新议程将添加到列表中。
选择 “发布议程”。
新的议程列表显示在会议聊天中。
完成挑战
你想出了这样的输出吗？
恭喜！
你已完成本教程以开始使用 侧面板 应用！
你有关于此部分的问题？ 如果有，请向我们提供反馈，以便我们对此部分作出改进。