生成会议内文档签名
会议签名是一个 Microsoft 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) 安装在项目目录 (中。 |
|
| Microsoft 365 开发人员帐户 | 具有安装应用的相应权限的 Teams 帐户的访问权限。 |
注意
下载 ngrok 后，注册并安装 authtoken。
提示
确保 Microsoft Teams 帐户不是来宾帐户。
设置 Teams 开发租户
租户类似于 Teams 中组织的空间或容器，可在其中聊天、共享文件和运行会议。 此空间也是上传和测试自定义应用的位置。 让我们验证是否已准备好使用租户进行开发。
检查自定义应用上传选项
创建应用后，必须在 Teams 中加载应用，而无需分发它。 此过程称为自定义应用上传。 登录到 Microsoft 365 帐户以查看此选项。
注意
自定义应用上传对于在 Teams 本地环境中预览和测试应用是必需的。 启用自定义应用上传，以在本地 Teams 中预览和测试应用。
是否已拥有租户，是否具有管理员访问权限？ 我们来检查，如果你真的这样做了！
在 Teams 中验证上传应用：
在 Teams 客户端中，选择“ 应用” 图标。
选择“管理应用”。
选择 “上传应用”。
查找“ 上传自定义应用”选项。 如果看到 选项，则表示已启用自定义应用上传。
注意
如果找不到上传自定义应用的选项，请与 Teams 管理员联系。
设置本地环境
选择“ 代码”。
在下拉菜单中，选择“ 使用 GitHub Desktop 打开”。
选择“ 克隆”。
更新Microsoft Entra应用注册
以下步骤可帮助你在 Azure 门户 中创建和注册机器人：
- Create并注册Microsoft Entra ID。
- Create客户端密码以启用机器人的 SSO 身份验证。
- 添加 Teams 频道以部署机器人。
- 使用开发隧道Create到 Web 服务器的终结点的隧道， (建议) 或 ngrok。
- 将消息传送终结点添加到你创建的开发隧道。
添加应用注册
转到Azure 门户。
选择“应用注册”。
选择“ + 新建注册”。
输入应用的名称。
选择任何组织目录中的帐户 (任何Microsoft Entra ID租户 - 多租户) 。
选择“注册”。
你的应用已在 Microsoft Entra ID 中注册。 此时会显示应用概述页。
注意
保存 应用程序 (客户端的应用 ID) ID 和 目录 (租户) ID 以供进一步使用。
Create隧道
打开 Visual Studio。
选择“Create新项目”。
在搜索框中，输入 “ASP.NET”。 在搜索结果中，选择“ASP.NET Core Web 应用”。
选择“下一步”。
输入 “项目名称 ”，然后选择“ 下一步”。
选择“创建”。
此时会显示概述窗口。
在调试下拉列表中，选择“开发隧道” (没有活动隧道) >Create隧道...“。
将出现一个弹出窗口。
在弹出窗口中更新以下详细信息：
- 帐户：输入 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 Entra应用在不同租户中注册时，用户才需要同意这些权限。
选择“ + 添加权限”。
选择 Microsoft Graph。
选择“委托的权限”。
选择以下权限：
- OpenId 权限>email、 offline_access、 openid、 profile。
- 用户>User.Read、 User.ReadBasic.All
选择 添加权限。
添加应用程序 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：
Create机器人
Create Azure 机器人资源
注意
如果已在 Teams 中测试机器人，请注销此应用和 Teams。 若要查看此更改，请再次登录。
转到“主页”。
选择“+ Create资源”。
在搜索框中，输入 Azure 机器人。
选择“Enter”。
选择“ Azure 机器人”。
选择“创建”。
在机器人 句柄中输入机器人名称。
从下拉列表中选择 订阅 。
从下拉列表中选择 资源组 。
如果没有现有的资源组，可以创建新的资源组。 若要创建新的资源组，请执行以下步骤：
- 选择“新建Create”。
- 输入资源名称，然后选择“ 确定”。
- 从 “新建资源组 位置”下拉列表中选择一个位置。
在 “定价”下，选择“ 更改计划”。
选择 FO Free>Select。
在 “Microsoft 应用 ID”下，选择“ 应用类型 ”作为 “多租户”。
在 “创建类型”中，选择“ 使用现有应用注册”。
输入 应用 ID。
注意
不能使用相同的 Microsoft 应用 ID 创建多个机器人。
然后“审阅 + 创建”。
验证通过后，选择“Create”。
机器人需要几分钟时间进行预配。
选择“转到资源”。
已成功创建 Azure 机器人。
添加 Teams 频道
在左窗格中，选择“ 频道”。
在 “可用频道”下，选择“ Microsoft Teams”。
选中复选框以接受 服务条款。
选择“ 同意”。
选择“应用”。
添加消息传送终结点
设置应用设置、清单和 env 文件
配置Microsoft Entra应用后，需要在应用设置、清单和 env 文件中配置应用详细信息。
配置应用设置
转到克隆存储库中的 appsettings.json 文件。
打开 appsettings.json 文件并更新以下信息：
- 设置为
"ClientId"应用的 Microsoft 应用 ID。 - 将 设置为
"ClientSecret"应用的客户端机密 值。 - 设置为
"Audience"应用 的应用程序 ID URI。
- 设置为
配置应用清单文件
转到克隆存储库中的 manifest.json 文件。
打开 manifest.json 文件并更新以下信息。
- 设置为
"ID"Microsoft 应用 ID。 - 将所有出现的 替换为完全限定的
"deployment-url"ngrok 或 devtunnel 域名。 - 将 的所有匹配项
"aad-id"替换为应用的 Microsoft 应用 ID。
- 设置为
配置 env 文件
转到克隆存储库中的 .env 文件。
打开 .env 文件并更新以下信息。
- 设置为
REACT_APP_AAD_CLIENT_ID应用的 Microsoft 应用 ID。 - 设置为
REACT_APP_MSA_ONLY_CLIENT应用的 Microsoft 应用 ID。 - 设置为
REACT_APP_MSA_ONLY_SCOPE应用的客户端密码 值。
- 设置为
生成并运行服务
使用 Visual Studio 生成和运行服务。
打开 Visual Studio。
转到 “文件>打开>项目/解决方案...”。
在 Visual Studio 中打开 MeetingSigning.sln 文件。
按 F5 运行项目。
如果出现以下对话框，请选择“是”：
将打开以下网页。
将会议签名应用添加到 Teams
在克隆的存储库中，转到 “源 > 会议”“签名.Web > AppManifest”。
使用 AppManifest 文件夹中存在的以下文件Create .zip 文件：
- manifest.json
- outlineIcon.png
- colorIcon.png
在 Teams 中Create具有几个演示者和与会者的会议。
加入会议。
会议开始后，选择“ 应用”。
在弹出窗口中，选择“ 管理应用”。
选择 “上传应用”。
选择在 AppManifest 文件夹中创建的 .zip 文件，然后选择“ 打开”。
选择“添加”。
现在，会议签名应用已添加到会议。
返回到会议详细信息页，然后选择“应用>会议签名应用”。
选择“保存”。
会议签名应用在会议窗口中可见。
转到 Teams 中的会议聊天，选择“会议签名”选项卡，然后选择“Create文档”。
在“会议签名”窗口中输入以下详细信息。
- 选择要查看的所需文档。
- 输入文档的查看者。
- 输入文档的签名者。
- 选择“完成”。
选择“ 同意” ，向应用授予访问帐户数据的权限。
使用凭据登录 Teams，然后选择“ 登录”。
在 Teams 中，你将收到成功创建文档的通知。
返回 Teams 会议，现在可以在侧面板中查看文档。
选择“ 共享到会议 ”以在会议中共享文档。
下图显示了会议中共享的文档。
完成挑战
你想出了这样的东西吗？
恭喜！
祝贺你！ 你已完成创建 会议内签名 应用的教程！
你有关于此部分的问题？ 如果有，请向我们提供反馈，以便我们对此部分作出改进。
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈