MSTeam-解决方案构建教程-二-

MSTeam 解决方案构建教程（二）

原文：Building Solutions with Microsoft Teams

协议：CC BY-NC-SA 4.0

四、消息传递扩展和操作注释

消息传递扩展是在团队客户机中调用定制代码的好方法。这使得用户可以直接在他们的对话中与你的应用进行交互，而不必离开团队，使用自适应卡或英雄卡或消息来发布信息。

在本章中，您将了解消息传递扩展的各种功能，我们将通过示例指导用户解释如何创建消息传递扩展和命令操作。消息传递扩展允许人们与渠道共享内容、进行有意义的通信以及共享协作体验，与消息传递扩展操作命令一起，允许用户使用模式弹出从 API 搜索数据，然后处理他们的数据并将其发送回团队渠道对话区域以共享协作体验。

消息传递扩展概述

消息传递扩展使用户能够从外部系统执行搜索命令或操作命令。消息传递扩展由您托管的 web 服务组成，并在 manifest.json 文件中定义，您的 web 服务可以在 Microsoft 团队中从该文件中调用。您还需要在消息传递模式和安全通信协议的 bot 框架中将您的 web 服务注册为 Bot。

Microsoft Teams client 能够扩展开箱即用的功能，并与您现有的业务线应用集成。因此，这将有助于利用您现有的知识，并在集成业务线应用方面取得收益。它还将减少用户在应用之间移动的工作量。

以下是邮件扩展命令的类型:

1. 操作命令消息传递扩展

2. 搜索命令消息传递扩展

3. 用消息传送扩展链接展开的 URL

消息传递扩展命令的类型定义了 web 服务可用的 UI 元素和交互流。某些交互，如身份验证和配置，可用于这两种类型的命令。见图 4-1 。

图 4-1

撰写扩展

邮件扩展出现在撰写框的底部。有几个是内置的，比如 Emoji、Giphy、Sticker。选择“更多选项”(⋯)按钮以查看其他消息传递扩展，包括您从应用库添加的或自己上传的扩展。

撰写扩展

撰写扩展允许用户在对话中查询和共享丰富的卡片。当您创建聊天信息时，无论是新的对话还是回复现有信息，都可以使用信息扩展功能。消息扩展帮助您搜索内容并将其插入到您正在编写的聊天消息中。

图 4-2

可操作的消息

借助可操作的消息(图 4-2 )，您可以向连接器卡添加丰富的内容。在设计可操作消息的实施时，关键是解决方案既要可扩展又要可靠，同时还要考虑服务的未来增长。

消息传递扩展是一种特殊的 Microsoft Teams 应用，它受 Bot 框架 v4 支持。

您将如何使用消息传递扩展？

邮件扩展有助于以下方面:

• 处理工作项目和错误

• 客户支持票据

• 使用图表和报告

• 图像和媒体内容

• 销售机会和销售线索

Microsoft 团队消息扩展

消息传递扩展允许用户通过按钮事件使用 web 服务进行搜索，并从外部系统的撰写消息区域启动操作。您也可以使用命令框或直接从邮件中搜索。然后您可以使用自适应卡或英雄卡或消息显示结果(图 4-3 )。

图 4-3

邮件扩展搜索

卡片是可操作的内容片段，可以通过机器人、连接器或应用添加到对话中。使用文本、图形和按钮，卡片可以让你与观众交流。卡片是简短或相关信息的用户界面容器。卡片可以有多个属性和附件。卡片可以包括可以触发卡片动作的按钮。参见图 4-4 。

图 4-4

信息扩展卡

你可以在这里找到更多关于如何使用卡的信息: https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference

邮件扩展如何工作

消息传递扩展在您的自定义 Microsoft Teams 应用清单中注册，该清单指定了可以从 Microsoft Teams 客户端中的何处调用该扩展。可以调用消息传递扩展的三个位置包括:

1. 命令框:这是 MSTeam 客户端顶部的区域

2. 撰写消息框:这是一对一聊天或群组聊天底部的区域，也是频道中对话选项卡底部的区域

3. 消息的“更多操作”菜单:更多操作菜单项可从...当您将鼠标悬停在对话中的一条消息上时

消息传递扩展被实现为使用 bot 框架注册为 Bot 的 web 服务。当调用消息传递扩展时，MSTeam 将通过 Bot 框架的消息传递模式和安全通信协议调用您的 web 服务。

在创建命令之前，您需要决定:

• 动作命令可以从哪里触发？

• 如何创建任务模块？

• 最终的消息或卡片会从机器人发送到频道，还是会插入到撰写消息区域供用户提交？

使用 App Studio 创建命令

让我们做一个简单的例子。以下步骤假设您已经创建了一个消息传递扩展。

图 4-5

新命令

1. 从 Microsoft Teams 客户端，打开 App Studio 并选择 Manifest Editor 选项卡。

2. 如果您已经在 App Studio 中创建了应用包，请从列表中选择它。如果没有，您可以导入现有的应用包。

3. 单击命令部分中的添加按钮。

4. 选择允许用户在团队内部触发外部服务中的操作。

5. 如果要使用一组静态参数来创建任务模块，请选择该选项。否则，选择从 bot 获取一组动态参数。

6. 添加命令 Id 和标题。

7. 选择您想要触发动作命令的位置。

8. 如果您正在为任务模块使用参数，请添加第一个参数。

9. 单击保存。参见图 4-5 。

如果需要添加更多参数，请单击“参数”部分中的“添加”按钮来添加它们。

动作命令消息传递扩展

动作命令允许您向用户呈现一个模态弹出窗口，以收集或显示信息(图 4-6 )。

图 4-6

从用户处收集信息

当他们提交表单时，您的 web 服务可以通过直接在对话中插入消息，或者通过在撰写消息区域插入消息并允许用户提交消息来做出响应。对于更复杂的工作流，您甚至可以将多个表单链接在一起。参见图 4-7 。

图 4-7

回复用户

它们可以从撰写消息区域、命令框或消息中触发。当从消息中调用时，发送给 bot 的初始 JSON 有效负载将包括调用它的整个消息。

搜索命令消息传递扩展

搜索命令允许用户在外部系统中搜索信息，然后将搜索结果插入到消息中。在最基本的搜索命令流中，初始调用消息将包括用户提交的搜索字符串。您将回复一个卡片列表和卡片预览。团队客户端将在列表中呈现卡片预览，供最终用户选择。当用户选择一张卡片时，全尺寸的卡片将被插入到撰写消息区域。

它们可以从撰写消息区域或命令框中触发。与动作命令不同，它们不能由消息触发。参见图 4-8 。

图 4-8

搜索命令查询

链接展开消息传递扩展

当在撰写消息区域粘贴 URL 时，您还可以选择调用您的服务。这个功能称为链接展开，允许您在包含域的 URL 被粘贴到撰写消息区域时订阅接收调用。您的 web 服务可以将 url“展开”到一个详细的卡片中，提供比标准网站预览卡更多的信息。您甚至可以添加按钮，让您的用户无需离开 Microsoft Teams 客户端即可立即行动。

练习 1 -创建动作命令消息传递扩展

在本练习中，您将学习如何在 Microsoft Teams 应用中创建和添加新的消息传递扩展，并从 Microsoft Teams 客户端与之交互。

在开始练习之前，请验证您的环境。在本练习中，我将使用安装在我的环境中的以下工具:

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

• MS 团队的约曼生成器- 2.14.0

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

要为您的 Microsoft Team client 创建新的 Microsoft Teams bot 应用，请遵循以下步骤:

1. 向微软 Azure 的机器人框架注册机器人

2. Bot 渠道注册

3. 为机器人启用 Microsoft Teams 频道

4. 检索 bot 应用 ID 和密码

5. 使用约曼生成器创建行动命令消息扩展 MS Teams 应用

6. 测试动作命令消息扩展应用

向微软 Azure 的机器人框架注册机器人

打开浏览器，导航到 Azure 门户( https://portal.azure.com/ )。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft.com登录。

点击创建资源，在搜索市场输入框中输入 bot ，在返回的资源列表中选择 Bot 频道注册。然后在下一页选择 Create 开始注册新的 bot 资源的过程(图 4-9 )。

图 4-9

搜索机器人频道注册

在 Bot 通道注册页面，点击发起创建 Bot 通道注册(图 4-10 )。

图 4-10

Bot 渠道注册

在 Bot 通道注册刀片(图 4-11 )中，输入以下值，然后选择创建:

图 4-11

Bot 渠道登记表

• Bot 句柄:输入 bot 的全局唯一名称。

  • **例如:**消息扩展 Ch4

• 订阅:选择先前创建资源组时选择的订阅。

• 资源组:选择您之前创建的资源组，例如:团队

• 位置:选择你喜欢的 Azure 地区。

• 定价层:选择首选的定价层；F0 层是免费的。

• 消息传送端点:https://REPLACE_THIS.ngrok.io/api/messages

  bot 注册需要知道实现 bot 的 web 服务的端点。这将在每次启动之前练习中使用的 ngrok 实用程序时发生变化。

• 应用洞察:关闭

• Microsoft 应用 ID 和密码:自动创建应用 ID 和密码

Azure 将开始提供新资源。这需要一两分钟的时间。完成后，导航到资源组中的 bot 资源。参见图 4-12 。

图 4-12

Bot 已创建

为机器人启用 Microsoft Teams 频道

为了让 bot 与 Microsoft 团队进行交互，您必须启用团队通道。

图 4-13

选择团队频道

• 从 Azure 的 bot 资源中，选择左侧导航中的通道。

• 在连接通道面板上，选择MSTeam 通道，然后选择保存确认动作(图 4-13 )。

• 同意服务条款

一旦此过程完成，您应该会在您启用的频道中看到列出的网络聊天和 MSTeam(图 4-14 )。

图 4-14

连接到频道

检索 Bot 应用 Id 和密码

当 Azure 创建机器人时，它还为机器人注册了一个新的 Azure AD 应用。您需要生成这个新的 bot 应用作为一个秘密，并复制应用的凭据。

从左侧导航栏中选择设置。向下滚动到 Microsoft App ID 部分。

复制机器人的 ID，因为您稍后会需要它(图 4-15 )。

图 4-15

应用标识

为应用创建客户端密码

点击管理链接，导航至 Azure 广告应用。

为了让守护程序应用在没有用户参与的情况下运行，它将使用应用 ID 和证书或密码登录 Azure AD。在本练习中，您将使用一个秘密。

从左侧导航面板中选择证书&机密。

选择客户端密码部分下的新客户端密码按钮。

出现提示时，对密码进行描述，并选择所提供的有效期选项之一:例如，从不，然后选择添加(图 4-16 )。

Note

复制新的客户端密码值。在您执行另一个操作或离开此刀片后，您将无法取回它。

“证书和机密”页面将显示新的机密。复制该值很重要，因为它只显示一次；如果您离开页面并返回，它将仅显示为一个屏蔽值。

图 4-16

应用客户端机密

The Certificate & Secrets

复制并存储秘密值的值，因为您以后会需要它。

使用约曼生成器创建 MSTeam 应用

在本节中，您将使用 Yeoman generator (yo teams)创建一个新的消息传递扩展团队应用。

在这个练习中，我使用 REST API (Google Books API)获取基于 ISBN 号的图书信息，并将其发送到一个通道对话。

图 4-17

哟团队

• 创建新的消息传递扩展应用项目

• 在您喜欢的位置创建一个新的项目目录

• 打开命令提示符

• 创建一个新文件夹“messagingExtensionCh4”

• 导航到新创建的目录

• 通过运行以下命令来运行 MSTeam 的 Yeoman 生成器: yo teams (图 4-17 )。

约曼会发射并问你一系列问题(图 4-18 )。用下列值回答问题:

图 4-18

回答约曼问卷

• 您的解决方案名称是什么？消息传递-扩展

• 您想将文件放在哪里？使用当前文件夹

• 您的 Microsoft Teams 应用项目的标题？消息传递扩展示例

• 你(公司)的名字？(最多 32 个字符)JPOWER4

• 您希望使用哪个清单版本？v1.6

• 如果您有 Microsoft Partner ID，请输入。(留空以跳过)

• 您希望在项目中添加哪些功能？消息扩展命令

• 您将在其中托管此解决方案的 URL？https://messagingextension.azurewebsites.net

• 当你的应用/标签加载时，你想显示加载指示器吗？不

• 是否要包括测试框架和初始测试？不

• 您希望将 Azure Applications Insights 用于遥测吗？不

• 您的消息扩展托管在哪里？在一个新机器人里

• 消息扩展使用的 bot 的 Microsoft 应用 ID 是什么？4c 64 a9 e 8-9 aed-4b 35-b4fd-c56bd 4835 a66

• 什么类型的消息传递扩展命令？基于动作的消息传递扩展

• 你希望你的行动在什么样的背景下进行？撰写框、命令框、对话消息

• 您希望如何为您的操作从用户那里收集信息？使用适配卡

• 收集信息时需要配置或授权吗？不

• 您想要邮件扩展的设置选项吗？不

• 您的消息扩展命令的名称是什么？获取书籍

• 描述一下你的消息扩展命令？从 google API 获取图书

Note

这些问题的大多数答案在创建项目后都可以更改。例如，在创建或测试项目时，项目所在的 URL 并不重要。

使用代码打开 Visual Studio 代码。在命令提示符下(图 4-19 )。

图 4-19

Visual studio 代码 OOB

• 打开。env 文件➤并添加了从新客户端拷贝的 MICROSOFT_APP_PASSWORD 值

MICROSOFT_APP_ID=4c64a9e8-9aed-4b35-b4fd-c56bd4835a66
MICROSOFT_APP_PASSWORD=_5Z_S2.0tU7cGOWmec1KH3pm3yFg5YOzc-

**第一步:**首先更新消息扩展命令的 Manifest.json 文件。

• 导航到。/src/manifest/manifest.json 文件并替换名称和描述部分。

• 并将“composeExtensions”标题下的“commands”部分更新为“Get Books”

"name": {
    "short": "Get Books App",
    "full": "To get books using ISBN number"
  },
  "description": {
    "short": "Messaging extension Teams App to get books",
    "full": "Messaging extension Teams App to get books using ISBN number"
  },

"commands": [{
            "id": "getBooksMessageExtension",
            "title": "Get Books",
            "description": "Add a clever description here",

步骤 2 :请求用户给出 ISBN 号以获得更多详细信息。

• 导航到。/src/app/getBooksMessageExtension/getBooksMessageExtension . ts

• 转到“onFetchTask”方法并替换 value 部分，以获取用户的输入。

value: {
                title: "ISBN Number Selector",
                card: CardFactory.adaptiveCard({
                    $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
                    type: "AdaptiveCard",
                    version: "1.0",
                    body: [
                        {
                            type: "TextBlock",
                            text: "Please enter an ISBN Number"
                        },
                        {
                            type: "Input.Text",
                            id: "isbn",
                      placeholder: "ISBN Number ISBN:9780789748591",
                            style: "email"
                        },
                    ],
                    actions: [
                        {
                            type: "Action.Submit",
                            title: "OK",
                            data: { id: "unique-id" }
                        }
                    ]
                })
            }

**第三步:**回复用户

• 转到“onSubmitAction”方法来替换下面的代码
  • 这个提交请求将根据 ISBN 号调用 google API ( https://www.googleapis.com/books/v1/volumes?q=ISBN-Number ) ，并用第一本书的详细信息响应用户:

    • 标题

    • 描述

    • 图书封面

    • 出版者

    • 国际标准书号(供参考)

      const request = require("request");
              const isbnnumber = value.data.isbn;
              const url = "https://www.googleapis.com/books/v1/volumes?q=" + isbnnumber + "&limit=1&offset=0";
      
              let title: string = "";
              let description: string = "";
              let publisher: string = "";
              let imageurl: string = "";
              let messagingExtensionResult;
      
              return new Promise<MessagingExtensionResult>((resolve, reject) => {
              request(url, {json: true}, (err, res, body) => {
                      if (err) {
                          return;
                      }
                      const data = body;
                      if (data.items) {
                          const item = data.items[0];
                          title = item.volumeInfo.title;
                          description = item.volumeInfo.description;
                          publisher = item.volumeInfo.publisher;
                          imageurl = item.volumeInfo.imageLinks.thumbnail;
                      }
                      const card = CardFactory.adaptiveCard(
                          {
                              type: "AdaptiveCard",
                              body: [
                                  {
                                      type: "Image",
                                      url: imageurl
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Large",
                                      text: "Title: " + title
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Medium",
                                      text: description
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Medium",
                                      text: "Publisher: " + publisher
      
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Medium",
                                      text: "ISBN Number: " + isbnnumber
                                  }
                              ],
                              $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
                              version: "1.0"
                          });
      
                      messagingExtensionResult = {
                          type: "result",
                          attachmentLayout: "list",
                          attachments: [card]
                      };
                      resolve(messagingExtensionResult);
      
                  });
              });
      
      

该方法将首先加载书籍，然后加载模式的适配卡。最后，它返回一个类型为 MessagingExtensionResult 的对象，该对象为 Bot 框架定义了使用适配卡实现的任务模块。机器人框架将与 MSTeam 通信以显示卡片。

至此，action 命令的第一部分已经完成，它将提示用户输入 ISBN 号，并触发消息传递扩展。消息传递扩展的第二部分是使用输入的 ISBN 号来回复触发扩展的消息，其中包含图书的详细信息，或者，如果扩展是从撰写框触发的，它会将图书的详细信息添加到新消息中。

• 文件➤保存所有 保存的修改

• 至此，您的消息传递扩展已经准备好接受测试了！

测试消息传递扩展

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，所以不需要设置或配置任何东西。参见图 4-20 。

图 4-20

吞咽 ngrokserve 执行

Ngrok 已经创建了临时 URL 841c87a33afc.ngrok.io，它将映射到我们本地运行的 web 服务器。

然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL 841c87a33afc.ngrok.io 更新消息端点(参见图 4-21 )。

图 4-21

具有 ngrok url 的消息传递端点

Note

ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，确保每次重启 web 服务器时都更新 URL 的消息端点。

在 Microsoft 团队中安装消息传递扩展

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传(图 4-22 )。

图 4-22

向 MS 团队添加应用

在出现的文件对话框中，选择项目中的 Microsoft Teams 包。这个应用包是一个 ZIP 文件，可以在项目中找到。/包文件夹(图 4-23 )。

图 4-23

上传应用

安装后，您将能够在应用列表中看到该应用(图 4-24 )。

图 4-24

安装的应用

一旦软件包上传，MSTeam 将显示应用的摘要(图 4-25 )。

图 4-25

将应用添加到团队和渠道

从 Microsoft Teams 客户端测试消息传递扩展应用

图 4-26

对话部分

• 单击添加按钮导航到与机器人聊天，以测试 1:1 消息传递扩展。

• 或者转到您的任何渠道添加此应用。

• 请注意，当应用加载时，消息传递扩展支持的命令显示在编写框中。让我们测试消息扩展！参见图 4-26 。

图 4-27

用户输入模式弹出

• 点击图标，将打开用户输入模态弹出窗口(图 4-27 )。

图 4-28

响应输出

• 输入 ISBN 号，例如:ISBN:9780789748591，它支持任何 ISBN 号。

• 几秒钟后，它会在对话部分加载有关书籍的信息，您可以将这些信息发送给所有渠道用户(图 4-28 )。

您还可以使用从聊天中的现有消息触发消息传送扩展...邮件右上角的菜单。选择模式动作，然后选择获取书籍选项(图 4-29 )。

图 4-29

作用指令

在本练习中，您已经为自定义 Microsoft Teams 应用创建了一个 action command 消息传递扩展。

练习 2 -创建搜索命令消息传递扩展

在本练习中，您将学习如何从现有邮件中执行邮件扩展搜索命令。

在上一个练习中，您创建了一个 action messaging 扩展，该扩展使用户能够将图书的详细信息添加到消息中。在本节中，您将添加一个搜索消息传递扩展来查找特定的书籍。

更新应用的配置

首先，更新应用的清单以添加新的消息传递扩展。找到并打开。/src/manifest/manifest.json 文件。

接下来，找到 composeExtensions.commands 数组。将以下对象添加到数组中，以添加搜索扩展:

• 要查询的替换类型操作

• 要“编写”的上下文

• 对“搜索书籍”的描述

• 添加参数

更新后，代码如下所示:

"commands": [{
            "id": "getBooksMessageExtension",
            "title": "Get Books",
            "description": "Search for a Book",
            "initialRun": true,
            "type": "query",
            "context": [
                "compose"
            ],
            "parameters": [{
                "name": "searchKeyword",
                "description": "Enter ISBN number to search",
                "title": "ISBN Number"
            }],

            "fetchTask": true
        }]

更新消息传送扩展代码

然后找到 GetBooksMessageExtension.ts 文件。/src/app/GetBooksMessageExtension/GetBooksMessageExtension . ts

更新 botbuilder 包的导入语句，以包含 MessagingExtensionAttachment 对象

import { TurnContext, CardFactory, MessagingExtensionQuery, MessagingExtensionResult, MessagingExtensionAttachment} from "botbuilder";

接下来，将下面的方法" onQuery "添加到getbookmessageextension类

public async onQuery(context: TurnContext, query: MessagingExtensionQuery): Promise<MessagingExtensionResult> {
        let isbnnumber = "ISBN:9780789748591";
        if (query && query.parameters && query.parameters[0].name === "searchKeyword" && query.parameters[0].value) {
            isbnnumber = query.parameters[0].value;
        }

        const request = require("request");
        const url = "https://www.googleapis.com/books/v1/volumes?q=" + isbnnumber + "&limit=10&offset=0";

        let messagingExtensionResult;
        const attachments: MessagingExtensionAttachment[] = [];

        return new Promise<MessagingExtensionResult>((resolve, reject) => {
            request(url, { json: true }, (err, res, body) => {
                if (err) {
                    return;
                }

                const data = body;

                const searchResultsCards: MessagingExtensionAttachment[] = [];
                data.items.forEach((book) => {
                    searchResultsCards.push(this.getBookResultCard(book));
                });

                messagingExtensionResult = {
                    type: "result",
                    attachmentLayout: "list",
                    attachments: searchResultsCards
                };

                resolve(messagingExtensionResult);

            });
        });

    }

该方法将首先从 MSTeam 发送给机器人的查询中获取搜索关键字。然后，它将根据来自 Google Books API 的查询检索图书。

接下来，它将获取查询结果，将它们转换成卡片，并将它们添加到返回给 Bot 框架的 MessagingExtensionResult 中，最终返回给 MSTeam。

然后将下面给出的私有方法添加到同一个类中绑定英雄卡。

• 文件➤保存所有 保存的修改

• 至此，您的消息传递扩展搜索命令已经准备好进行测试了！

private getBookResultCard(selectedBook: any): MessagingExtensionAttachment {
        return CardFactory.heroCard(selectedBook.volumeInfo.title, selectedBook.volumeInfo.description);
    }

保存并测试消息传递扩展搜索命令

流程是这样的:

• 从命令行导航到项目的根文件夹，并执行以下命令:

图 4-30

搜索命令

• Ngrok 已经创建了临时 URL 956fce259023.ngrok.io，它将映射到我们本地运行的 web 服务器。

• 然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL 956fce259023.ngrok.io 更新消息传递端点

• 转到您在上一节中安装了“应用”的频道

• 删除对话 app，在频道重新安装。(仅供参考:我们还可以更改应用的版本，更新应用。)

• 转到团队➤频道

• 在搜索框中输入 ISBN 号，等待几秒钟。MSTeam 将执行搜索并返回结果(图 4-30 )。

gulp ngrok-serve

在本练习中，您学习了如何从现有邮件中执行邮件扩展搜索命令。

练习 3 -实现一个链接展开消息传递扩展

在本练习中，您将学习如何将展开的链接添加到您的 Microsoft Teams 应用中，以及如何实现这种类型的消息传递扩展。

更新应用的配置

首先，更新应用的清单以添加新的消息传递扩展。找到并打开。/src/manifest/manifest.json 文件。

接下来，找到 composeExtensions 属性。在 commands 属性后添加以下属性，以添加 link unfurling messaging 扩展。

,
        "messageHandlers": [{
            "type": "link",
            "value": {
                "domains": [
                    "*. wikipedia.org"
                ]
            }
        }]

接下来，找到 validDomains 属性。将以下域添加到有效域数组中:" *.google.com "

"validDomains": [
        "{{HOSTNAME}}",
        "*. wikipedia.org"
    ],

更新消息传送扩展代码

然后找到 GetBooksMessageExtension.ts 文件。/src/app/GetBooksMessageExtension/GetBooksMessageExtension . ts

更新 botbuilder 包的导入语句，以包含对象 AppBasedLinkQuery

  import {
      TurnContext, CardFactory, MessagingExtensionAttachment, MessagingExtensionQuery, MessagingExtensionResult, AppBasedLinkQuery
} from "botbuilder";

接下来，将下面的方法" onQueryLink "添加到 GetBooksMessageExtension 类中

public async onQueryLink(context: TurnContext, query: AppBasedLinkQuery): Promise<MessagingExtensionResult> {

        let messagingExtensionResult;
        const attachments: MessagingExtensionAttachment[] = [];
        const url: any = query.url;
        const attachment = CardFactory.thumbnailCard(
            "Link unfurling", url, ["http://jenkinsblogs.com/wp-content/uploads/2018/04/cropped-icon.png"]);

        messagingExtensionResult = {
            attachmentLayout: "list",
            type: "result",
            attachments: [attachment]
        };

        return messagingExtensionResult;
    }

当与域匹配的 URL 在应用清单中列出时，Bot 框架调用此方法，并返回 MessagingExtensionResult 对象，该对象包含与现有消息的 URL 匹配的更新缩略图卡。

• 文件➤保存所有 保存的修改

• 至此，您的消息传递扩展链接展开就可以测试了！

保存并测试展开的消息传递扩展链接

现在是测试的时候了:

• 从命令行导航到项目的根文件夹，并执行以下命令:

图 4-31

链接展开

• Ngrok 已经创建了临时 URL f95c9feee129.ngrok.io，它将映射到我们本地运行的 web 服务器。

• 然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL f95c9feee129.ngrok.io 更新消息传递端点

• 转到您在上一节中安装了“应用”的频道

• 删除对话 app，在频道重新安装。(仅供参考:我们还可以更改应用的版本，更新应用。)

• 转到团队➤频道

• 将其中一个 wikipedia.org Ex:https://en.wikipedia.org/wiki/book的网址复制粘贴到撰写框中。请注意，消息已更新为包括卡片，当您发送消息时也会包括卡片(图 4-31 )。

gulp ngrok-serve

在本练习中，您学习了如何将链接展开添加到 Microsoft Teams 应用中，以及如何实现这种类型的消息传递扩展。

结论

在本章中，您已经学习了消息传递扩展的各种功能，以及如何使用 Yeoman generator (yo teams)为 Microsoft 团队创建和添加消息传递扩展应用。它还介绍了如何使用自适应卡和带有动作命令的动作按钮，带有搜索命令的英雄卡，以及带有从应用展开的链接的缩略图卡。

您还学习了如何使用 Yeoman generator for Microsoft Teams 创建消息传递扩展应用。除此之外，在我们接下来的章节中，您将开始了解 Microsoft Teams 应用的不同选项和功能。

五、使用标签的嵌入式 Web 体验

当您想要将大面积的 web 内容或仪表板集成到用户中时，选项卡是 Microsoft 团队中的最佳选择。用户可以与页面交互并获得动态数据。选项卡内的对话将发布在团队的渠道中，并宣传您的选项卡。团队成员可以访问服务、渠道中的内容，或者在选项卡的聊天中访问。团队选项卡直接处理工具和数据，并就工具和数据进行对话，所有这些都在渠道或聊天的上下文中进行。

在本章中，您将了解选项卡的各种功能–它解释了如何为个人、组和团队上下文创建选项卡，并提供了指导用户的示例。标签是用户从 MSTeam 参与你的应用的一种强大而简单的方式。

选项卡概述

对于团队成员而言，选项卡始终位于屏幕顶部，每个人都可以轻松访问。Microsoft Teams 中的选项卡允许您像网页一样显示丰富的交互式 web 内容。这可以很容易地被描述为向你的私聊、群聊或团队频道添加更多相关信息的可能性。你可以在所有三种不同类型的对话中添加标签:团队、群聊或个人用户的个人应用。选项卡嵌入在 MSTeam 中，使用简单的 iframes 指向应用清单中声明的域。您还可以根据上下文轻松地向选项卡添加特定功能。

团队中有两种选项卡:

• 频道/组

  频道/群组选项卡向频道和群组聊天提供内容，是围绕基于网络的专用内容创建协作空间的绝佳方式。

• 个人的

  个人标签，以及个人范围的机器人，是个人应用的一部分，范围是单个用户。它们可以固定在左侧导航栏上，以便于访问。

  一个好的标签应该显示以下特征:

• 聚焦功能

  选项卡在满足特定需求时效果最佳。关注与选项卡所在频道相关的一小组任务或数据子集。

• 还原铬

  避免在一个选项卡中创建多个面板，添加导航层，或者要求用户在一个选项卡中进行垂直和水平滚动。换句话说，尽量不要在你的标签里有标签。

• 综合

  通过在对话中张贴卡片，找到通知用户标签活动的方法。

• 简化访问

  确保您在正确的时间授予正确的人访问权限。保持您的登录过程简单将避免对贡献和协作造成障碍。

• 个性

  Your tab canvas presents a good opportunity to brand your experience. Incorporate your own logos, colors, and layouts to communicate personality. Your logo is an important part of your identity and a connection with your users. So be sure to include it.

  • 将您的徽标放在左上角、右上角或底边。

  • 保持你的标志小而不显眼。

选项卡布局

选项卡是画布，您可以使用它们来共享内容、举行对话和托管第三方服务，所有这些都在团队的有机工作流中进行。当您在 Microsoft Teams 中创建选项卡时，它会将您的 web 应用放在突出位置，便于从关键对话中访问。

选项卡可以排列成列表、网格、列或单个画布，只要最适合您的应用即可。

单一画布

这是一个完成工作的大领域。OneNote 和 Wiki 遵循这种模式。如果你有一个不把内容分成更小的组件的应用，这将是一个很好的选择。见图 5-1 。

图 5-1

单一画布布局

圆柱

对于将项目从一列移动到另一列以指示新状态的工作流，列非常有用。考虑在这些情况下支持拖放。我们建议对详细视图使用对话框或内嵌扩展。见图 5-2 。

图 5-2

列画布布局

目录

列表对于排序和过滤大量数据以及将最重要的事情放在最上面非常有用。使用可排序的列很有帮助。可以向省略号菜单下的每个列表项添加操作。见图 5-3

图 5-3

列表画布布局

格子

网格对于显示高度可视化的元素非常有用。它有助于在顶部包含一个过滤器或搜索控件(图 5-4 )。

图 5-4

网格画布布局

Microsoft 团队个人选项卡

在应用包的应用清单中声明了一个自定义选项卡。对于需要作为选项卡包含在应用中的每个网页，您需要定义一个 URL 和一个范围。

Microsoft Teams 支持两种不同类型的选项卡:

• 静态选项卡

• 可配置选项卡

静态选项卡只能使用个人范围，而可配置选项卡可以使用团队或“群聊”范围。静态标签为个人用户提供一个私人区域，用户不与团队的其他成员共享信息。

定义个人标签

个人应用是具有个人范围的团队应用。作为应用开发人员，您可以选择提供一个侧重于与单个用户交互的应用版本，一个提供嵌入式 web 体验的个人标签。个人应用使用户能够在一个地方查看他们选择的内容。

在应用包的应用清单中声明了一个自定义选项卡。对于需要作为选项卡包含在应用中的每个网页，您需要定义 URL 和范围。无论您选择在渠道/组或个人范围内显示您的选项卡，您都需要在您的选项卡中显示一个“IFramed”HTML 内容页面。对于个人选项卡，内容 URL 由“staticTabs”数组中的“content URL”属性直接在清单中设置。您的选项卡内容对所有用户都是一样的。

创建静态选项卡

要创建一个静态选项卡，您需要有一些想要在团队中公开的 web 内容。对于所有用户来说，这些内容应该是相同的。您需要创建一个“man feist . JSON”文件来表示您的静态选项卡。从下面描述的基本模板开始，然后添加用于创建静态选项卡的特定部分。

以下是个人选项卡清单示例:

|

名字

|

描述

| | --- | --- | | entity yid | 这是您选项卡的唯一标识符。 | | 名称 | 您希望页面在团队中显示的显示名称。 | | contentUrl | 这是作为选项卡内容呈现和显示的 URL。 | | 网站 Url | 替代 URL，当您的 contentUrl 呈现时，页面顶部会显示一个带有“转到网站”链接的图标。如果您想将用户引向另一种体验，可以为此链接指定不同的 URL。 | | 范围 | 定义选项卡在团队客户端中的显示位置。注意:静态选项卡仅支持个人范围。 |

   "staticTabs": [
        {
          "entityId": "default-data",
          "name": "My Personal Tab",
          "contentUrl": "https://{{HOSTNAME}}/myPersonalTab/",
          "scopes": [
            "personal"
          ]
        }
      ]

个人选项卡的显示内容对所有用户都是相同的，并且在“staticTabs”数组中进行配置。您可以在一个应用中声明多达 16 个个人标签。

Note

移动客户端的个人选项卡目前在开发者预览版中可用。

Microsoft 团队频道或组选项卡

频道或群组选项卡向频道和群组聊天提供内容，是围绕基于 web 的专用内容创建协作空间的绝佳方式。频道和“群聊”的可配置选项卡，这些选项卡除了包含主内容页面外，还包含一个配置页面。您需要创建一个额外的配置页面，允许您的用户配置您的内容页面 URL，方法是使用 URL 查询字符串参数为该上下文加载适当的内容。这是因为您的频道或群组选项卡可以添加到多个不同的团队或群组聊天中。在每次后续安装时，您的用户将能够配置选项卡，让您根据需要定制体验。当用户添加一个选项卡或配置一个选项卡时，就会有一个 URL 与团队 UI 中显示的选项卡相关联。配置一个选项卡只需向该 URL 添加额外的参数。

例如，当您添加 Azure DevOps 板选项卡时，配置页面允许您选择该选项卡将加载哪个板。配置页 URL 由应用清单中 configurableTabs 数组中的 configurationUrl 属性指定。

移动客户端

您的频道或群组选项卡出现在团队移动客户端上，为此， setSettings ()方法配置必须有一个用于 websiteUrl 属性的值。

创建可配置的选项卡

频道或“群聊”被添加到可配置标签阵列中。您只能在 configurableTabs 数组中声明一个频道或“群聊”。如果您需要根据不同用户或不断变化的环境而变化的内容，那么您需要一个可配置的选项卡。

下面是一个频道/组标签清单示例:

|

名字

|

描述

| | --- | --- | | 配置 Url | 配置页面的 https:// URL。 | | canupdateconfiguration | 一个值，指示选项卡配置的实例在创建后是否可由用户更新。默认值:true(布尔值) | | 范围 | 可配置的选项卡仅支持团队和群组聊天范围。(枚举数组) |

   "configurableTabs": [
       {
         "configurationUrl": "https://{{HOSTNAME}}/myConfigurableTab/config.html",
         "canUpdateConfiguration": true,
            "scopes": [
           "team",
           "groupchat"
         ]
       }
     ],

Note

每个应用最多可以有一个频道或群组标签和十六个个人标签。

在自定义选项卡中实现身份验证

团队中的选项卡表示为“Iframes 因此，必须做出一些牺牲。如果是身份验证，那么如果没有正确设置权限，应用就无法导航到第三方提供者。

选项卡的 Microsoft 团队身份验证流程

OAuth 2.0 是 Azure AD 和许多其他身份提供者使用的一种开放的身份验证和授权标准。对 OAuth 2.0 的基本理解是在团队中使用身份验证的先决条件。标签和僵尸工具的认证流程略有不同，因为标签和网站非常相似，所以它们可以直接使用 OAuth 2.0 机器人不会也必须做一些不同的事情，但核心概念是相同的。见图 5-5 。

图 5-5

标签的流验证流

• 用户与选项卡配置或内容页面上的内容进行交互，通常是一个标记为“登录或“登录”的按钮。

• 选项卡为其身份验证起始页构造 URL，可选地使用来自 URL 占位符的信息或通过调用*Microsoft Teams . get context()*Teams 客户端 SDK 方法来简化用户的身份验证体验。

• 选项卡然后调用*Microsoft teams . authentic ation . authenticate()*方法，并注册 successCallback 和 failureCallback 函数。

• Teams 在弹出窗口的 iframe 中打开起始页。起始页生成随机状态数据，将其保存以供将来验证，并重定向到身份提供者的/授权端点，如用于 Azure AD 的https://login.microsoftonline.com/<tenantID>/oauth 2/authorize。用您自己的租户 id ( context.tid )替换<租户 id >。

• 与团队中的其他应用授权流一样，起始页必须位于其有效域列表中的域上，并且与登录后重定向页面位于同一域上。

• 要点:OAuth 2.0 隐式授权流在身份验证请求中调用状态参数，该参数包含唯一的会话数据，以防止跨站点请求伪造攻击。以下示例使用随机生成的 GUID 作为状态数据。

• 在提供商的站点上，用户登录并被授权访问该选项卡。

• 提供者使用访问令牌将用户带到选项卡的 OAuth 2.0 重定向页面。

• 选项卡检查返回的状态值是否与之前保存的相匹配，并调用*Microsoft teams . authentic ation . notify success()，*进而调用在步骤 3 中注册的 successCallback 函数。

• 团队关闭弹出窗口。

• 该选项卡显示配置 UI，或者刷新或重新加载选项卡内容，具体取决于用户的起始位置。

将选项卡上下文视为提示

尽管选项卡上下文提供了关于用户的有用信息，但不要使用这些信息来验证用户，无论您是通过选项卡内容 URL 的 URL 参数还是通过调用 Microsoft Teams client SDK 中的*Microsoft Teams . get context()*函数来获得这些信息。一个恶意的参与者可以使用自己的参数调用您的选项卡内容 URL，一个冒充 MSTeam 的网页可以在一个 iframe 中加载您的选项卡内容 URL，并将其自己的数据返回给 getContext() 函数。您应该将选项卡上下文中与身份相关的信息简单地视为提示，并在使用前验证它们。

使用 Azure AD 身份验证

您可能希望在团队应用中使用许多服务，其中大多数服务都需要身份验证和授权才能访问服务；服务包括脸书、推特和团队。团队的用户使用 Microsoft Graph 将用户配置文件信息存储在 Azure Active Directory (Azure AD)中，本节将重点介绍使用 Azure AD 访问这些信息的身份验证。

OAuth 2.0 是一个开放的认证标准，被 Azure AD 和许多其他服务提供商使用。理解 OAuth 2.0 是在 Teams 和 Azure AD 中使用身份验证的先决条件。下面给出的例子使用 OAuth 2.0 隐式授权流，目标是最终从 Azure AD 和 Microsoft Graph 读取用户的个人资料信息。

使用静默身份验证

Azure Active Directory (Azure AD)中的静默身份验证通过静默刷新身份验证令牌，最大限度地减少了用户需要输入登录凭据的次数。

？ADAL.js 库为 OAuth 2.0 隐式授权流创建了一个隐藏的 iframe，但它指定了 prompt=none，这样 Azure AD 就永远不会显示登录页面。如果因为用户需要登录或授予对应用的访问权限而需要用户交互，Azure AD 会立即返回 ADAL.js 的错误，然后报告给你的应用。此时，如果需要，您的应用可以显示一个登录按钮。

Note

目前，静默认证仅适用于选项卡。从 bot 登录时，它不起作用。

使用单点登录身份验证

用户通过他们的工作、学校或微软帐户“登录”MSTeam。您可以利用这一点，在桌面或移动客户端上允许单点登录来授权您的 Microsoft Teams 选项卡。因此，如果用户同意使用你的应用，他们不必在另一台设备上再次同意；他们将自动登录。

需要额外 Microsoft Graph 范围的应用

SSO 的当前实现只对用户级权限授予许可:电子邮件、配置文件、offline_access、OpenId，而不是其他 API，例如 user。阅读或邮件。

以下是一些可行的解决方法:

• 租户管理员同意

• 使用 Auth API 请求额外同意

练习 1 -创建自定义的 Microsoft 团队个人选项卡

Microsoft Teams Developer Platform 帮助您将业务线(LOB)应用和服务无缝地扩展到 Microsoft 团队中。如果您开发了通用功能应用，它还允许您将自定义应用分发给您的组织或公共用户。

在开始练习之前，请验证您的环境。在本练习中，我将使用安装在我的环境中的以下工具:

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

• MS 团队的约曼生成器- 2.14.0

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

在本练习中，您将使用 Microsoft Teams Yeoman generator Visual Studio 代码和 App Studio 创建一个新的 Microsoft Teams 个人选项卡。

使用 Yeoman 生成器创建个人选项卡

在本节中，您将使用 Yeoman 生成器(yo teams)创建一个新的个人应用团队应用。本练习将指导您如何创建自定义个人选项卡。

要创建新的个人选项卡应用项目，请在您喜欢的位置创建新的项目目录(图 5-6 ):

1. 打开命令提示符

2. 创建一个新文件夹“personaltabCh5”

3. 通过运行以下命令，导航到新创建的目录并运行 Yeoman generator for Microsoft Teams:

图 5-6

yo 团队发电机

yo teams

约曼将发射并问你一系列问题。用以下数值回答问题(图 5-7 ):

图 5-7

回答约曼问卷

• 您的解决方案名称是什么？个人选项卡

• 您想将文件放在哪里？使用当前文件夹

• 您的 Microsoft Teams 应用项目的标题？个人标签

• 你(公司)的名字？(最多 32 个字符)JPOWER4

• 您希望使用哪个清单版本？v1.6

• 如果您有 Microsoft Partner ID，请输入。(留空以跳过)

• 您希望在项目中添加哪些功能？一个标签

• 您将在其中托管此解决方案的 URL？https://personaltab.azurewebsites.net

• 当你的应用/标签加载时，你想显示加载指示器吗？不

• 是否要包括测试框架和初始测试？不

• 您希望将 Azure Applications Insights 用于遥测吗？不

• 默认选项卡名称？(最多 16 个字符)我的标签

• 您想创建哪种选项卡？个人(静态)

• 该选项卡是否需要 Azure AD 单点登录支持？不

Note

这些问题的大多数答案在创建项目后都可以更改。例如，在创建或测试项目时，项目所在的 URL 并不重要。

使用代码打开 Visual Studio 代码。在命令提示符下(图 5-8 )。

图 5-8

Visual studio 代码

步骤 1:首先更新个人选项卡范围的 Manifest.json 文件:

• 导航到。/src/manifest/manifest.json 文件，并根据您的 tab 业务替换名称和描述部分。

• 找到“static tabs”:section 并将 entityid - default-data 替换为“personaldata”。

步骤 2: 更新 react 组件 MyTab.tsx(对用户的响应)

• 导航到。/src/app/scripts/MyTab/MyTab . tsx

• 找到导出接口 IMyTabState，定义 userEmailID 类型变量

  export interface IMyTabState extends ITeamsBaseComponentState {
  
  

• 转到 public async componentWillMount()方法，从选项卡上下文中获取用户电子邮件 Id。

    entityId?: string;
    userEmailID?: string;
}

• 然后转到 render 方法来呈现用户信息。

this.setState({
                    entityId: context.entityId,
                    userEmailID: context.upn
                });

replace <Text content={this.state.entityId} /> to
User Email ID: <Text content={this.state.userEmailID} />

该组件将向用户显示电子邮件 id 和样本按钮。这是用于选项卡的基于 TypeScript React 的类。找到 render()方法并添加用户业务线。

要添加更多 React fluent UI 控件**(@ fluent UI/React-north star**)，请参考 App Studio–控件库选项卡中的控件库部分。该选项卡展示了 Microsoft Teams UI 控件库。

以下是控件库中可用的 React 库:

• ms teams-UI-styles-core-UI 组件的核心 CSS 样式。独立于任何 UI 框架。

• msteams-ui-icons-core -团队图标的核心集合。独立于任何 UI 框架。

• ms teams-ui-组件-React-React 绑定库。这取决于 msteams-ui-styles-core 和 React。

• msteams-ui-icons-react -团队图标集合的 react 绑定库。这取决于 msteams-ui-icons-core 和 React。

前往➤团队应用工作室(图 5-9 )。

图 5-9

源编辑器

它会开放 App Studio 导航到控件库选项卡，并从 App Studio 获取使用控件库进行开发的示例代码(图 5-10 )。

图 5-10

App Studio 控件库

• 文件➤保存所有 保存的修改

至此，您的个人选项卡已经准备好接受测试了！

在本地运行您的个人选项卡

打开命令提示符，导航到项目文件夹并执行以下命令；要运行您的选项卡，您可以使用 gulp serve 命令。

gulp serve

这将为您构建并启动一个本地 web 服务器来测试您的应用。每当您在项目中保存文件时，该命令也会重新生成应用。

您现在应该能够浏览http://localhost:3007/MyTab/index . html以确保您的选项卡正在呈现。见图 5-11 。

图 5-11

个人选项卡本地主机渲染

在团队中测试个人选项卡

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 5-12 )。

图 5-12

吞咽 ngrok 发球执行

Ngrok 已经创建了临时 URL b7fce570af23.ngrok.io，它将映射到我们本地运行的 web 服务器。

在 Microsoft 团队中安装个人选项卡

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传(图 5-13 )。

图 5-13

向 MS 团队添加应用

在出现的文件对话框中，选择项目中的 Microsoft Teams 包。这个应用包是一个 ZIP 文件，可以在项目中找到。/包文件夹(图 5-14 )。

图 5-14

上传应用

安装后，您将能够在应用列表中看到该应用(图 5-15 )。

图 5-15

安装的个人应用

点击该应用，MSTeam 将显示该应用的摘要(图 5-16 )。

图 5-16

添加个人选项卡

在团队中安装个人选项卡应用

图 5-17

个人标签输出

• 单击“添加”按钮，导航到“个人”选项卡进行测试。

• 此外，您可以将个人选项卡永久固定在最左侧的导航栏中。

• 或者选择...菜单并从列表中选择您的应用(图 5-17 )。

在本练习中，您已经为自定义 Microsoft Teams 应用创建了个人选项卡。

练习 2 -创建自定义的 Microsoft 团队频道或群组选项卡

在本练习中，您将使用 Yeoman 生成器(yo teams)为 Teams 应用创建一个新的可配置选项卡。本练习将指导您如何为频道或群组聊天创建自定义选项卡。

要创建新的可配置选项卡应用项目，请在您喜欢的位置创建一个新的项目目录。

1. 打开命令提示符并创建一个新文件夹“configurabletabCh5”

2. 导航到新创建的目录

3. 通过运行以下命令来运行 Yeoman generator for Microsoft Teams:

图 5-18

可配置选项卡的 yo 团队

1. 如果需要，修改解决方案名称。我已将其更改为“可配置选项卡”(图 5-18 )。

yo teams

约曼将发射并问你一系列问题。用以下数值回答问题(图 5-19 ):

图 5-19

回答约曼问卷

• 您的解决方案名称是什么？可配置选项卡

• 您想将文件放在哪里？使用当前文件夹

• 您的 Microsoft Teams 应用项目的标题？可配置表 5

• 你(公司)的名字？(最多 32 个字符)JPOWER4

• 您希望使用哪个清单版本？v1.6

• 如果您有 Microsoft Partner ID，请输入。(留空以跳过)

• 您希望在项目中添加哪些功能？一个标签

• 您将在其中托管此解决方案的 URL？https://configurabletab.azurewebsites.net

• 当你的应用/标签加载时，你想显示加载指示器吗？不

• 是否要包括测试框架和初始测试？不

• 您希望将 Azure Applications Insights 用于遥测吗？不

• 默认选项卡名称？(最多 16 个字符)我的团队选项卡

• 您想创建哪种选项卡？可配置的

• 您打算在您的选项卡上使用什么范围？组队，群聊(我选择了组队和群聊)

• 该选项卡是否需要 Azure AD 单点登录支持？不

• 是否希望此选项卡在 SharePoint Online 中可用？不

Note

这些问题的大多数答案在创建项目后都可以更改。例如，在创建或测试项目时，项目所在的 URL 并不重要

使用代码打开 Visual Studio 代码。在命令提示符下(图 5-20 )。

图 5-20

Visual studio 代码 OOB

可配置选项卡项目显示了三个文件:MyTeamTab、config 和 Remove react 组件。

• myteamtab . tsx–自定义选项卡内容页面的实现

• myteamtabconfig . tsx–我的团队选项卡配置页面的实现

• MyTeamTabRemove.tsx -我的团队选项卡移除页面的实现

步骤 1: 更新 Manifest.json 文件配置可配置页签:

• 导航到。/src/manifest/manifest.json 文件，并根据您的 tab 业务替换名称和描述部分。

"configurableTabs": [{
        "configurationUrl": "https://{{HOSTNAME}}/myTeamTab/config.html",
        "canUpdateConfiguration": true,
        "scopes": [
            "team",
            "groupchat"
        ]
    }],

**第二步:**更新 react 组件 MyTeamTab.tsx(响应用户的自定义选项卡内容页面):

• 在您的项目中，导航到/src/app/scripts/MyTeamTab/MyTeamTab . tsx 文件

• 找到导出接口 IMyTeamTabState，定义 useremail，TeamID，Teamname，ChannelID，ChannelName 类型变量。

• 转到 public async componentWillMount()方法，从选项卡上下文中获取用户电子邮件 Id、团队和渠道详细信息。

export interface IMyTeamTabState extends ITeamsBaseComponentState {
    entityId?: string;
    useremail?: string;
    TeamID?: string;
    TeamName?: string;
    ChannelID?: string;
    ChannelName?: string;
}

• 然后转到 render 方法来呈现用户信息并找到这些信息:

this.setState({
                    entityId: context.entityId,
                    useremail: context.upn,
                    TeamID: context.teamId,
                    TeamName: context.teamName,
ChannelID: context.channelId, ChannelName: context.channelName

                });

• 将下面给出的代码添加到上述语句的旁边

"<div><Text content={this.state.entityId} /></div>"

<div>User Email ID : <Text content={this.state.useremail} /></div>
        <div>Team ID : <Text content={this.state.TeamID} /></div>
        <div>Team Name : <Text content={this.state.TeamName} /></div>
        <div>Chanel ID : <Text content={this.state.ChannelID} /></div>
        <div>Channel Name : <Text content={this.state.ChannelName} /></div>

该组件将显示用户电子邮件 id，团队和渠道信息，以及样本按钮。这是用于选项卡的基于 TypeScript React 的类。找到 render()方法并添加一个用户业务逻辑行。

要添加更多 react fluent UI 控件**(@ fluent UI/react-north star**)，请参考 App Studio–控件库选项卡中的控件库部分。该选项卡展示了 Microsoft Teams UI 控件库。

• 文件➤保存所有 保存的修改

• 至此，您的可配置选项卡已经准备好进行测试了！

在本地运行您的可配置选项卡

打开命令提示符。导航到项目文件夹并执行以下命令；要运行您的选项卡，您可以使用 gulp serve 命令。

gulp serve

这将为您构建并启动一个本地 web 服务器来测试您的应用。每当您在项目中保存文件时，该命令也会重新生成应用。

你现在应该能够浏览到*http://localhost:3007/MyTeamTab*以确保你的标签正在呈现(图 5-21 )。

图 5-21

可配置选项卡本地主机执行

在团队中测试可配置选项卡

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP web 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 5-22 )。

图 5-22

Ngrok 服务执行

Ngrok 已经创建了临时 URL b7fce570af23.ngrok.io，它将映射到我们本地运行的 web 服务器。

在 Microsoft 团队中安装可配置选项卡

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传。见图 5-23

图 5-23

向 MS 团队添加应用

在出现的文件对话框中，选择项目中的 Microsoft Teams 包。这个应用包是一个 ZIP 文件，可以在项目中找到。/包文件夹(图 5-24 )。

图 5-24

上传应用

安装后，您将能够在应用列表中看到该应用(图 5-25 )。

图 5-25

安装的应用

点击该应用，MSTeam 将显示该应用的摘要(图 5-26 )。

图 5-26

将应用添加到团队

在团队中安装可配置选项卡

图 5-27

选择渠道团队

• 单击“添加到团队”按钮，导航到“配置”页面，在“频道”中添加该选项卡。

• 然后搜索并选择频道以设置选项卡(图 5-27 )。

图 5-28

输入选项卡名称

• 输入选项卡名称“我的团队选项卡”并保存(图 5-28 )。

它将在频道中添加选项卡，并通过选项卡显示所有信息，如下图 5-29 所示。

图 5-29

可配置的选项卡名称输出

在本练习中，您已经为自定义 Microsoft Teams 应用创建了一个可配置的选项卡。

结论

在本章中，您已经学习了选项卡的各种功能，以及如何使用 Yeoman generator (yo teams)创建个人和可配置的应用并将其添加到 Microsoft 团队中。它还介绍了如何在选项卡中使用静默身份验证、SSO 身份验证和 Azure AD 身份验证。

您还学习了如何使用 Yeoman generator for Microsoft Teams 创建选项卡。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和功能。

六、使用任务模块收集用户输入

任务模块是弹出的体验模式，因此您可以使用 JavaScript 内容或自定义 Microsoft Teams 应用的适配卡来填充 HTML。此外，您可以使用任务模块收集用户的输入。

在这一章中，你将学习任务模块的各种特性——它解释了如何为任务模块创建模态，并举例指导用户。任务模块是用户从 Microsoft 团队参与您的应用的一种强大而简单的方式。

任务模块概述

任务模块是从 tab 或 bot 团队的应用中收集输入或向用户显示信息的弹出窗口。任务模块加载在基于 iframe 的小部件中，并支持两种类型的呈现选项。第一个是用 JavaScript 脚本运行你的定制 HTML 页面，第二个是适配卡。Tabs 同时支持 HTML 页面和适配卡，但是 bot 只支持适配卡。然而，任务模块建立在 Microsoft Teams 选项卡之上，它们本质上是一个弹出窗口中的选项卡，用于收集用户输入或显示视频、表单或自适应卡。

可以通过三种方式调用任务模块:

• 频道或个人标签

  使用“Microsoft 团队”选项卡，您可以从选项卡上的按钮、链接或菜单中调用任务模块。

• 蝇蛆病

  从你的机器人发出的卡片上的按钮。当您不需要频道中的每个人都看到您在用机器人做什么时，这特别有用。

• 来自深层链接的团队之外

  您还可以创建 URL 来从任何地方调用任务模块。这里将详细介绍这一点。

图 6-1 显示了任务模块的样子。

图 6-1

任务模块视图

1. 你的应用的颜色图标。

2. 你的应用的简称。

3. 在“TaskInfo”对象的 title 属性中指定的任务模块的标题。

4. 适应性或 HTM 页面的标题。

5. 如果您使用“TaskInfo”对象的 URL 属性加载自己的网页，则橙色矩形是您的网页出现的位置。

6. 黄色矩形；如果您通过“TaskInfo”对象的 Card 属性显示自适应卡，则会为您添加填充。

7. 自适应卡按钮将在这里渲染。如果您使用自己的页面，您必须创建自己的按钮。

任务模块可以从标签、机器人或深层链接中调用，其中出现的内容可以是 HTML 或适配卡，因此在如何调用它们以及如何处理用户交互的结果方面有很大的灵活性。

使用选项卡中的任务模块收集用户输入

将任务模块添加到选项卡可以大大简化任何需要数据输入的工作流程。任务模块允许您使用带有 JavaScript 和自适应卡的 HTML 在团队感知的弹出窗口中收集他们的输入。

使用 JavaScript 和 HTML

• 使用 TaskInfo 对象调用 Teams 客户端 SDK 函数 tasks.startTask()。

• 对于使用 URL 属性的 html 和 JavaScript 任务信息:

• 使用 Teams 客户端 SDK 函数 tasks.startTask()和可选的 submitHandler(err，result)回调函数

const taskInfo = {
            url: this.appRoot() + `/taskModulesTab/getinfo.html`,
            title: "Custom Form",
            height: 300,
            width: 400
        };

• 在任务模块代码中，用户完成输入后，调用 Teams SDK 函数 tasks.submitTask()，将结果对象作为参数。如果在 tasks.startTask()中指定了 submitHandler 回调，Teams 将使用结果作为参数来调用它。

microsoftTeams.tasks.startTask(taskModuleInfo);

• 如果调用 tasks.startTask()时出现错误，则使用 err 字符串调用 submitHandler 函数。

const submitHandler = (err, result) => {
            this.setState(Object.assign({}, this.state, {
                name: `Name : ${result.name}`,
            }));
};

• 您还可以在调用 teams.startTask()时指定 completionBotId 在这种情况下，结果将发送给 bot。

microsoftTeams.tasks.startTask(taskInfo, submitHandler);

键盘和辅助功能指南

正如上一节所讨论的，任务模块允许您使用 HTML 或自适应卡在弹出绑定中收集用户输入；也就是说，任务模块呈现在 HTML 页面或适配卡中。在使用基于 HTML 的任务模块时，处理所有键盘事件是您的责任，但是自适应卡使用开箱即用的功能来处理键盘事件。

任务模块 HTML 文件位于项目文件夹下:

Ex: ...\taskModulesTab\src\app\web\taskModulesTab\index.html

要在 HTML 页面中呈现 tomnoddies 应用:

taskModulesTab.TaskModulesTab.render(document.getElementById('app'), {});

在 HTML 页面中，我们使用 JavaScript 来处理事件并将数据返回到用户选项卡应用。下面的代码初始化 Microsoft teams，处理 escape 键，并在 HTML 页面中验证输入表单。

   <script>
          microsoftTeams.initialize();

        //- Handle the Esc key
        document.onkeyup = function(event) {
            if ((event.key === 27) || (event.key === "Escape")) {
                microsoftTeams.tasks.submitTask(null);
//- this will return an err object to the completionHandler()
            }
       }

        function validateForm() {
            let customerInfo = {

                name: document.forms["customerForm"]["name"].value,
                email: document.forms["customerForm"]["email"].value,
                designation: document.forms["customerForm"]["designation"].value
            }

            microsoftTeams.tasks.submitTask(customerInfo, "");
            return true;
        }
   </script>

然后，MSTeam 将确保从任务模块标题到 HTML 的键盘导航正常工作，反之亦然。

使用适配卡

第二个选项是一个自适应卡，用于收集团队中任务模块的输入。为此，请遵循以下步骤。

• 使用 TaskInfo 对象和 TaskInfo.card 调用 Teams 客户端 SDK 函数 tasks.startTask()，task info . Card 包含要在任务模块弹出窗口中显示的适配卡的 JSON。

• 对于使用卡的自适应卡。

• 如果在 tasks.startTask()中指定了 submitHandler 回调，那么如果在调用 tasks.startTask()时出现错误，或者如果用户使用右上角的 X 关闭任务模块弹出窗口，Teams 将使用 err 字符串调用它。

const taskModuleInfo = {
            title: "Custom Form",
            card: adaptiveCard,
            width: 500,
            height: 500
        };

• 如果用户按下一个动作。Submit 按钮，那么它的数据对象将作为 result 的值返回。

microsoftTeams.tasks.startTask(taskInfo, submitHandler);

"actions": [{
        "type": "Action.Submit",
        "title": "Submit"
    }]

任务信息对象

taskInfo 对象包含告知 Microsoft 团队有关任务模块的属性。该对象包括以下属性:

• 标题(字符串):任务模块标题

• 高度&宽度(数字|字符串):任务模块弹出的模态高度和宽度尺寸或预定义的尺寸(小、中、大)。命名大小是显示任务模块的可用空间的预定义百分比。对于宽度，它们是 20%、50%和 60%，而高度值是 20%、50%和 60%。

   microsoftTeams.tasks.startTask(taskInfo, Callback);

   const taskInfo = {
               url: this.appRoot() + `/taskModulesTab/getinfo.html`,
               title: "Custom Form",
               height: 300,
               width: 400,
         failbackurl:   "",
         card: “adaptivecardjosnobj”
        };

url(string):URL 是任务模块 html 页面路径，作为任务模块内部的< iframe >加载，URL 域应该添加到清单包文件的 validDomains 数组部分

• failbackUrl (string):如果 Teams 客户端不支持任务模块特性，那么这个 Url 将在浏览器选项卡中打开。

• 卡:如果你不是用 HTML 页面做任务模块，那么添加卡对象或者适配卡 bot 卡附件，如果你是用 bot 的任务模块，那么 HTML 不会支持，你必须有用户卡。

• completionBotId (string):使用 bot 时，需要指定 bot APP ID 来发送用户与任务模块交互的结果。

任务模块中的深层链接

可以使用按钮和 Microsoft 团队中的其他类型的用户操作来调用任务模块。调用任务模块的另一种方式是使用深层链接。深层链接是包含特定值的 URL，Microsoft Teams 使用这些值来调用任务模块。

深层链接的格式如下:

• JavaScript 和 HTML 的深层链接语法

https://teams.microsoft.com/l/task/<APP_ID>?url=<TaskInfo.url>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>

• 自适应卡的深层链接语法

https://teams.microsoft.com/l/task/APP_ID?url=<TaskInfo.url>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>&completionBotId=BOT_APP_ID

https://teams.microsoft.com/l/task/APP_ID?card=<TaskInfo.card>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>&completionBotId=BOT_APP_ID

让我们来看看这些价值中的每一个:

• < APP_ID > : 这是自定义 MSTeam 应用的 ID。应用 ID，一个 GUID，可以在应用的 manifest.json 文件中找到。

• **< TASKINFO。*>:**URL 查询字符串中的附加属性映射到 taskInfo 对象上的特定属性。

深层链接可以在任何地方使用，包括在 MSTeam 渠道或外部应用中的对话。

使用任务模块的机器人

任务模块可以通过自适应卡和机器人框架卡上的机器人按钮触发，如英雄卡或缩略图卡或 Office 365 连接器。任务模块提供丰富的用户体验，多个对话步骤必须跟踪机器人状态，并允许用户中断或取消流程。机器人只支持自适应卡任务模块。

调用任务模块有两种方式:

• 一种新的调用消息任务/获取

  这是为 Bot 框架卡(动作)调用卡动作的新方法。从你的机器人中动态地获取任务模块模式弹出卡。

• 深层链接 URL

  深度链接 URL 支持 Bot 框架卡的打开 URL 卡操作(操作。OpenUrl)。使用深层链接 URL，任务模块 URL 避免了相对于任务/提取的服务器往返。

带有 bot ID 的深层链接语法:

https://teams.microsoft.com/l/task/APP_ID?card/url=<TaskInfo.card>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>&completionBotId=BOT_APP_ID

基于实现，我们需要修改 card/url 和 fallbackUrl。

通过任务/提取调用任务模块

当用户单击按钮时，它会调用 card action (Action。提交)并调用发送给机器人的消息。然后，HTTP 响应对象使用任务信息对象调用消息，并显示给任务模块。

提交任务模块的结果

当用户完成任务模块并单击提交按钮时，返回给机器人的结果就像它使用选项卡的方式一样，但与 HTML 和自适应卡有一些不同。

HTML/JavaScript 和适配卡

在 HTML 中，它使用 JavaScript 验证用户输入的内容，并调用提交任务函数。如果您想要关闭没有任何参数的任务模块，但是请记住，总是需要从选项卡中为任务模块调用传递参数。若要正确处理 submitHandler 函数，请传递一个对象或字符串。然后团队将调用 submitHandler: function，error 将为 null，结果将是您传递给 submitTask 函数的对象或字符串。

在适配卡中，当用户点击提交按钮(动作)时，它使用任务/提交消息发送给机器人。提交)。与 HTML 相比，自适应卡可以轻松处理来自任务模块的数据。

任务/提交的灵活性

回应任务/提交消息时，您有几种选择:

• 团队将在弹出的消息框中显示该值。

• 允许您在向导/多步骤体验中将自适应卡序列“链接”在一起。

  {
    "task": {
      "type": "continue",
      "value": <TaskInfo object>
    }
  }
  
  

{
  "task": {
    "type": "message",
    "value": "Message text"
  }
}

机器人框架卡动作与自适应卡动作。提交操作

我们有两个卡动作:机器人框架卡动作和自适应卡动作。提交操作以及使用模式时的一个小差异。下面的语法显示了不同之处。

首先是机器人框架卡动作:

{
  "type": "invoke",
  "title": "Buy",
  "value": {
    "type": "task/fetch",
    <...>
  }
}

现在是自适应卡动作。提交操作:

{
  "type": "Action.Submit",
  "id": "btnBuy",
  "title": "Buy",
  "data": {
    <...>,
    "msteams": {
      "type": "task/fetch"
    }
  }

使用适配卡和机器人框架卡上的按钮，可以从 MSTeam 机器人调用任务模块。在练习 5 中，您将学习如何在 MSTeam 中使用带有机器人的任务模块。

练习 1 -向任务模块发送数据

Microsoft Teams Developer Platform 帮助您将业务线(LOB)应用和服务无缝地扩展到 Microsoft 团队中。如果您开发了通用功能应用，它还允许您将自定义应用分发给您的组织或公共用户。

在开始练习之前，请验证您的环境。在本练习中，我将使用下面提到的工具，这些工具安装在我的环境中:

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

• MS 团队的约曼生成器- 2.14.0

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

在本练习中，您将学习 Microsoft Teams 中任务模块的基础知识，以及如何将输入发送到任务模块，即从选项卡获取用户的视频 ID，并将其发送到接受 YouTube 上视频 ID 的标准 HTML 页面。

当任务模块被调用时，它将使用 YouTube 嵌入式播放器显示视频。该任务模块将从查询字符串中获取视频 ID，但不会向选项卡返回任何信息。

在本练习中，您将使用 Microsoft Teams Yeoman 生成器、Visual Studio 代码和 App Studio 为任务模块创建一个新的 Microsoft Teams 个人选项卡。

创建 Microsoft 团队任务模块应用

在本节中，您将使用 Yeoman generator (yo teams)为 tab 创建一个任务模块应用。本练习将指导您如何从选项卡创建自定义任务模块。

要创建新的任务模块选项卡应用项目:

图 6-2

yo 团队发电机

• 在您喜欢的位置创建一个新的项目目录。

• 打开命令提示符。

• 创建一个新文件夹“taskModulesTab”

• 导航到新创建的目录。

• 通过运行以下命令运行 MSTeam 的 Yeoman 生成器: yo teams (参见图 6-2 )。

约曼将发射并问你一系列问题。用以下数值回答问题(图 6-3 ):

图 6-3

回答约曼问卷

• 您的解决方案名称是什么？任务-模块-选项卡

• 您想将文件放在哪里？使用当前文件夹

• 您的 Microsoft Teams 应用项目的标题？任务模块选项卡

• 你(公司)的名字？(最多 32 个字符)JPOWER4

• 您希望使用哪个清单版本？v1.6

• 如果您有 Microsoft Partner ID，请输入。(留空以跳过)

• 您希望在项目中添加哪些功能？一个标签

• 您将在其中托管此解决方案的 URL？https://taskmodulestab.azurewe

• bsites.net

• 当你的应用/标签加载时，你想显示加载指示器吗？不

• 是否要包括测试框架和初始测试？不

• 您希望将 Azure Applications Insights 用于遥测吗？不

• 默认选项卡名称？(最多 16 个字符)任务模块

• 您想创建哪种选项卡？可配置的

• 您打算在您的选项卡上使用什么范围？在团队中

• 该选项卡是否需要 Azure AD 单点登录支持？不

• 是否希望此选项卡在 SharePoint Online 中可用？不

Note

这些问题的大多数答案在创建项目后都可以更改。例如，在创建或测试项目时，项目所在的 URL 并不重要。

• 第一步是安装 fluent UI 库，为此，在命令行中从项目的根文件夹执行以下命令:

图 6-4

Visual studio 代码

• 使用代码打开 Visual Studio 代码。在命令提示符下(图 6-4 )。

npm i @fluentui/react

• 找到并打开包含项目中使用的 React 组件的文件。..\ src \ app \ scripts \ taskModulesTab \ taskModulesTab . tsx

• 将下面的 import 语句添加到 TaskModulesTab.tsx 文件中，以便从 fluent UI 中使用 Textfield 控件。

• 将组件的状态更新为新项目的属性。

• 在 ITaskModulesTabState 接口中添加一个新的属性 youTubeVideoId 来定义状态。

import { TextField, ITextFieldStyles } from "@fluentui/react";

• 找到 componentWillMount()方法以初始化 youTubeVideoId 属性。

  • youtubevideo:" esj-dvp 83 ks "

• 添加后，它看起来像下面给出的语句:

export interface ITaskModulesTabState extends ITeamsBaseComponentState {
    entityId?: string;
    youTubeVideoId?: string;
}

• 然后找到 render()方法，用下面代码的 return 语句替换 flex 标记。render()方法返回语句现在将显示如下。

       this.setState({
                    entityId: context.entityId,
                    youTubeVideoId: "eSJ-dVp83ks"
                });

• 为“Textfield”添加样式，找到公共 render()方法，并将下面的代码添加为 render 方法的第一行。

return (
            <Provider theme={this.state.theme}>
                <Flex column gap="gap.smaller">
                    <Header>Task Module Demo</Header>
                    <TextField label="Enter your youtube Video ID" value={this.state.youTubeVideoId} styles={narrowTextFieldStyles} onChange={(event, value) => { this.setState({ youTubeVideoId: String(value) }); }} />
                    <Button content="Show Video" primary onClick={this.onShowVideo}></Button>
                </Flex>
            </Provider>
        );

• 下一步是添加 onShowVideo 方法。将以下方法添加到 TaskModulesTab 类中。该方法将处理任务模块功能，以根据 YouTube 视频 ID 打开 YouTube 视频。

const narrowTextFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: { width: 250 } };

• 这段代码将使用任务模块的详细信息创建一个新的 taskModuleInfo 对象。然后，它将启动任务模块。这个任务模块不回复任何东西，只显示信息，所以我们不需要实现回调。

• 添加以下实用程序方法 approot()来获取主机名:

private onShowVideo = (event: React.MouseEvent<HTMLButtonElement>): void => {
        const taskModuleInfo = {
            title: "YouTube Player",
            url: this.appRoot() + `/taskModulesTab/player.html?vid=${this.state.youTubeVideoId}`,
            width: 1000,
            height: 700
        };
        microsoftTeams.tasks.startTask(taskModuleInfo);
    }

• 在下找到并创建一个文件“player.html”。\src\app\web\taskModulesTab

• 然后将下面的代码添加到 player.html

private appRoot(): string {
        if (typeof window === "undefined") {
            return "https://{{HOSTNAME}}";
        } else {
       return window.location.protocol + "//" + window.location.host;
        }
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <title>YouTube Player Task Module</title>
    <style>
        #embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 95%;
            height: 95%;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-style: none;
        }
    </style>

</head>

<body>
    <div id="embed-container"></div>
    <script>
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        };

        var element = document.createElement("iframe");
        element.src = "https://www.youtube.com/embed/" + getUrlParameter("vid");
        element.width = "1000";
        element.height = "700";
        element.frameborder = "0";
        element.allow = "autoplay; encrypted-media";
        element.allowfullscreen = "";

        document.getElementById("embed-container").appendChild(element);
    </script>
</body>

</html>

视频播放器任务模块将使用 YouTube 嵌入式播放器来显示指定的视频。加载 player.html 文件时，将在查询字符串中定义视频。在关闭player.html file:中的

测试视频播放器任务模块

从命令行导航到项目的根文件夹，并执行以下命令:

   gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，它可以创建一个安全的可旋转的 URL 到您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 6-5 )。

图 6-5

吞咽 ngrok 发球执行

Note

ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，请确保每次重新启动 web 服务器时删除并安装应用。

在 Microsoft 团队中安装任务模块选项卡

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传(图 6-6 )。

图 6-6

向 MS 团队添加应用

在出现的文件对话框中，选择项目中的 Microsoft Teams 包。这个应用包是一个 ZIP 文件，可以在项目中找到。/包文件夹(图 6-7 )。

图 6-7

上传应用

安装后，您将能够在应用列表中看到该应用(图 6-8 )。

图 6-8

安装的应用

去你的任何一个团队➤频道

然后点击+按钮，在您的频道中添加一个新标签(图 6-9 )。

图 6-9

添加选项卡

搜索找到“任务模块页签”app，选择如图 6-10 所示。

图 6-10

选择选项卡

它将打开一个新窗口并显示关于该应用的所有详细信息，然后单击添加按钮来配置您的选项卡(图 6-11 )。

图 6-11

在团队中添加选项卡

然后给出选项卡的名称，点击保存按钮(图 6-12 )。

图 6-12

配置您的选项卡

它将创建选项卡，并显示一个输入控件和按钮，以显示视频。见图 6-13

图 6-13

任务模块演示

点击显示视频按钮(图 6-14 )。

它将打开一个模态窗口并显示视频(图 6-14 )。

图 6-14

任务模块 youtube 视频输出

现在，用户可以通过更新文本框中的视频 ID 来更改播放器任务模块中加载的视频。

为此，在文本框中输入新的 YouTube 视频 id，然后再次测试(图 6-15 )。

图 6-15

新视频 ID

单击“显示视频”按钮。

它将打开一个模态窗口并显示新的视频(图 6-16 )。

图 6-16

任务模块新的 YouTube 视频输出

在本练习中，您已经学习了 Microsoft Teams 中任务模块的基本知识，以及如何将数据从自定义“团队”选项卡发送到任务模块。

练习 2 -使用任务模块收集用户输入

在本练习中，您将学习 Microsoft Teams 中任务模块的基础知识，以及如何从任务模块中收集用户输入并从选项卡中进行处理。这个任务模块是使用 React 实现的，与使用 Yeoman generator for Microsoft Teams 实现定制选项卡的方式相同。此任务模块使您能够从用户那里收集用户输入并提交它，当用户提交他们的输入时，它将使用回调来关闭并将用户输入提交回选项卡。

在本练习中，您将使用 Microsoft Teams 应用项目和上一练习中的 Yeoman 生成器，该生成器包含本章上一练习中的一个选项卡。您将更新项目以添加一个新的任务模块，该模块用于从用户处收集数据。

向项目中添加代码

找到并打开包含项目中使用的 React 组件的文件..\ src \ app \ scripts \ taskModulesTab \ taskModulesTab . tsx

要将组件的状态更新为新项目的属性，请在 ITaskModulesTabState 界面中添加新的属性名称、电子邮件和名称来定义状态:

export interface ITaskModulesTabState extends ITeamsBaseComponentState {
    entityId?: string;
    youTubeVideoId?: string;
    name?: string;
    email?: string;
    designation?: string;
}

然后找到 render()方法，并将下面的代码添加到 Showvideo 按钮标签旁边。

    <Button content="Get information" primary onClick={this.ongetEmployeeInfo}></Button>
         <Text>{this.state.name}</Text>
         <Text>{this.state.email}</Text>
         <Text>{this.state.designation}</Text>

然后添加一个私有方法 ongetEmployeeInfo 来处理任务模块，并将下面的方法添加到 TaskModulesTab 类中。

private ongetEmployeeInfo = (event: React.MouseEvent<HTMLButtonElement>): void => {
const taskInfo = {

            url: this.appRoot() + `/taskModulesTab/getinfo.html`,
            title: "Custom Form",
            height: 300,
            width: 400,
        };

    const submitHandler = (err, result) => {

            this.setState(Object.assign({}, this.state, {
                name: `Name : ${result.name}`,
                email: `Email ID : ${result.email}`,
                designation: `Designation : ${result.designation}`
            }));

        };

        microsoftTeams.tasks.startTask(taskInfo, submitHandler);
}

这段代码将使用任务模块的详细信息创建一个新的任务信息对象。然后，它将启动任务模块。这个任务模块会回复用户对选项卡的输入，因此它可以为回调实现一个提交处理程序。从提交处理程序回调处理程序是处理用户输入的结果。

在下找到并创建一个文件“getinfo.html”。\src\app\web\taskModulesTab。

然后将下面给出的代码添加到 getinfo.html 中:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 4px;
            padding-left: 4px;
            padding-right: 4px;
        }

        html,
        body,
        div.surface,
        div.panel {
            height: 100%;
            margin: 0;
        }

        div.panel {
            padding: 15px;
        }
    </style>
    <title>Microsoft Teams Task Module Tester - Custom Form</title>
    <script src="https://unpkg.com/@microsoft/teams-js@1.3.7/dist/MicrosoftTeams.min.js" integrity="sha384-glExfvkpce98dO2oN+diZ/Luv/5qrZJiOvWCeR8ng/ZxlhpvBgHKeVFRURrh+NEC" crossorigin="anonymous"></script>

</head>

<body class="theme-light">
    <script>
        microsoftTeams.initialize();

        //- Handle the Esc key
        document.onkeyup = function(event) {
            if ((event.key === 27) || (event.key === "Escape")) {
                microsoftTeams.tasks.submitTask(null); //- this will return an err object to the completionHandler()
            }
        }

        function validateForm() {
            let customerInfo = {
                name: document.forms["customerForm"]["name"].value,
                email: document.forms["customerForm"]["email"].value,
                designation: document.forms["customerForm"]["designation"].value
            }

            microsoftTeams.tasks.submitTask(customerInfo, "");
            return true;
        }
    </script>
    <div class="surface">
        <div class="panel">
            <div class="font-semibold font-title">Enter employee information:</div>
            <form method="POST" id="customerForm" action="/register" onSubmit="return validateForm()">
                <div>
                    <table>
                        <tr>
                            <td><label for="name">Enter the Name : </label></td>
                            <td><input class="form-control input-field" id="name" type="text" placeholder="Full Name" name="name" tabindex="1" autofocus></td>

                        </tr>
                        <tr>
                            <td><label for="email">Enter the Email ID : </label></td>
                            <td><input class="form-control input-field" id="email" type="email" placeholder="name@email.com" name="email" tabindex="2"></td>
                        </tr>
                        <tr>
                            <td><label for="designation">Enter the Designation: </label></td>
                            <td><input class="form-control input-field" id="designation" type="text " placeholder="designation" name="designation" tabindex="3" </td>
                        </tr>
                        <tr style="text-align: center;">
                            <td colspan="2"><button class="btn button-primary " type="submit " tabindex="5 ">Submit</button></td>
                        </tr>
                    </table>
            </form>
            </div>
        </div>
</body>

</html>

在上面给出的代码中，我添加了三个文本框——姓名、电子邮件和职务，并添加了一个提交按钮将数据发送回选项卡。你可以添加自己的风格，使应用看起来更漂亮。

测试收集输入任务模块

如果您没有停止 gulp ngrok-serve 执行，那么保存代码并转到团队并刷新选项卡。它将添加“获取信息”按钮(图 6-17 )。

图 6-17

刷新应用

如果您已经停止了 gulp ngrok-serve 的执行，那么按照练习 1 测试中使用的相同步骤重新部署应用。

图 6-18

用于收集输入的任务模块自定义表单

• 单击获取信息按钮。

• 它打开一个模态弹出窗口，使用任务模块收集信息。参见图 6-18 。

输入姓名、电子邮件 id 和职务，然后提交表单。它会将数据发送到选项卡并显示给用户；使用这些数据，您将能够处理基于您的 LOB 的任何功能。参见图 6-19 。

图 6-19

用于收集输入的任务模块自定义表单

在本练习中，您学习了 Microsoft Teams 中任务模块的基本知识，以及如何收集用户输入并将其发送回 custom Teams 选项卡，以便使用任务模块处理功能。

练习 3 -使用适配卡

在本练习中，您将学习如何在自定义 Microsoft Teams 应用的自定义任务模块中使用自适应卡。这个任务模块是使用 React 实现的，与使用 Yeoman generator for Microsoft Teams 实现定制选项卡的方式相同。此任务模块使您能够从用户处收集用户输入并提交它；当用户提交输入时，它将使用回调关闭并将用户输入提交回选项卡。在这里，我使用自适应卡实现了与练习 2 相同的功能。

在本练习中，您将使用带有 Yeoman 生成器的 Microsoft Teams app 项目，该生成器包含本章上一练习中的一个选项卡。您将更新项目以添加一个新的任务模块，该模块用于从用户处收集数据。

向项目中添加代码

找到并打开包含项目中使用的 React 组件的文件:..\ src \ app \ scripts \ taskModulesTab \ taskModulesTab . tsx

然后找到 render()方法，并将下面的代码添加到 Get information 按钮标签旁边。

<Button content="Get information (AdaptiveCard)" primary onClick={this.onGetAdaptiveCard}></Button>

然后在 onGetAdaptiveCard 上添加一个私有方法来处理任务模块。将以下方法添加到 TaskModulesTab 类中:

private onGetAdaptiveCard = (event: React.MouseEvent<HTMLButtonElement>): void => {
        // load adaptive card
        const adaptiveCard: any = require("./customform.json");
        const taskModuleInfo = {
            title: "Custom Form",
            card: adaptiveCard,
            width: 500,
            height: 500
        };
        const submitHandler = (err: string, result: any): void => {
            this.setState(Object.assign({}, this.state, {
                name: `Name : ${result.name}`,
                email: `Email ID : ${result.email}`,
                designation: `Designation : ${result.designation}`
            }));

        };
        microsoftTeams.tasks.startTask(taskModuleInfo, submitHandler);
    }

这段代码将使用任务模块的详细信息创建一个新的任务信息对象。然后，它将使用适配卡启动任务模块。这个任务模块确实回复用户对选项卡的输入，因此它实现了回调的提交处理程序。通过提交处理程序回调，处理来自适配卡的结果，以处理用户输入。

在下找到并创建一个文件“customform.json”。\ src \ app \ scripts \ taskModulesTab。

然后将下面的代码添加到 customform.json 中:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [{
            "type": "Container",
            "items": [{
                "type": "TextBlock",
                "text": "Custom Form",
                "weight": "bolder",
                "size": "extraLarge"
            }]
        },
        {
            "type": "Container",

            "items": [{
                    "type": "TextBlock",
                    "text": "Enter your name",
                    "weight": "bolder",
                    "size": "medium"
                },
                {
                    "type": "Input.Text",
                    "id": "name",
                    "value": ""
                },
                {
                    "type": "TextBlock",
                    "text": "Enter your Email",
                    "weight": "bolder",
                    "size": "medium"
                },
                {
                    "type": "Input.Text",
                    "id": "email",
                    "value": ""
                },
                {
                    "type": "TextBlock",
                    "text": "Enter your Designation",
                    "weight": "bolder",
                    "size": "medium"
                },
                {
                    "type": "Input.Text",
                    "id": "designation",
                    "value": ""
                }
            ]
        }
    ],
    "actions": [{
        "type": "Action.Submit",
        "title": "Submit"
    }]
}

在上面的 Adaptive Card 代码中，我添加了三个文本框——name、email 和 designation，并添加了一个 submit 动作来将数据发送回选项卡。

测试收集输入任务模块

如果您尚未停止 gulp ngrok-serve 执行，则保存代码并转到团队并刷新选项卡(图 6-20 )。

图 6-20

刷新应用以获得新的更改

如果您已经停止了 gulp ngrok-serve 的执行，那么按照练习 1 测试中使用的相同步骤重新部署应用。

点击“获取信息(AdaptiveCard)”按钮

它将打开一个模态弹出窗口，使用适配卡和任务模块收集信息(图 6-21 )。

图 6-21

任务模块适配卡

输入姓名、电子邮件 id 和职务，并提交适配卡。它会将它发送到选项卡并显示给用户；使用这些数据，您将能够处理任何功能。见图 6-22

图 6-22

任务模块自适应卡输出

在本练习中，您学习了 Microsoft Teams 中任务模块的基本知识，以及如何使用 Adaptive Card 收集用户输入，并将其发送回 custom Teams 选项卡，以便使用任务模块处理功能。

练习 4 -任务中的深层链接

可以通过选择 Microsoft Teams 体验中的按钮或使用深层链接来调用任务模块。深层链接允许您从团队外部或团队内部的对话中触发任务模块调用。

深层链接的格式如下:

teams.microsoft.com/l/task/%253cAPP_ID%253e%253Furl%253D%253cTaskInfo.url%253e%2526height%253D%253cTaskInfo.height%253e%2526width%253D%253cTaskInfo.width%253e%2526title%253D%253cTaskInfo.title

考虑一下您是否希望从一个对话中打开一个任务模块，该对话将显示下面的视频【Microsoft Teams development 入门。

正如您在练习 1 中所学，在播放器任务模块中显示视频的 URL 如下:

https://{{REPLACE_WITH_YOUR_NGROK_URL}}/ taskModulesTab/player.html?vid=eSJ-dVp83ks

启动视频播放器任务模块的深层链接如下(假设您的自定义 Microsoft Teams 应用的 ID 为 3fc 49350-e11d-11ea-ac20-5 FBC 213 e7a 43):

要查找应用 ID ->请转到。env 文件并复制 APPLICATION_ID

替换 ngrok-serve URL-https://``1f81e0623b36``.ngrok.io/

https://teams.microsoft.com/l/task/3fc49350-e11d-11ea-ac20-5fbc213e7a43?url=https://1f81e0623b36.ngrok.io/taskModulesTab/player.html?vid=eSJ-dVp83ks&height=700&width=1000&title=Youtube Player

在 Microsoft teams 中，转到一个频道，选择“对话”选项卡，然后在消息对话框中选择“格式”按钮。见图 6-23

图 6-23

对话格式按钮

输入要发布到频道的消息。选择一些文本并使用链接功能将深层链接添加到消息中(图 6-24 )。

图 6-24

带有深层链接的对话

现在，选择链接以查看任务模块的打开，而无需从自定义选项卡中触发它(图 6-25 )。

图 6-25

任务模块深层链接

您的团队/渠道中的任何人都可以单击该链接并从对话中访问任务模块。

在本练习中，您学习了如何使用深层链接从 Microsoft 团队的任何地方调用任务模块。

练习 5 -通过机器人使用任务模块

在本练习中，您将学习在 Microsoft Teams 应用中创建和添加任务模块，并从 Microsoft Teams 客户端与之交互。要为您的 Microsoft Team client 创建新的 Microsoft Teams bot 应用，请遵循以下步骤。

• 向微软 Azure 的机器人框架注册机器人

• Bot 渠道注册

• 为机器人启用 Microsoft Teams 频道

• 检索 bot 应用 ID 和密码

• 使用 Yeoman 生成器创建任务模块并通过机器人实现

• 用机器人的应用测试任务模块

创建应用包和向 Bot 框架注册 web 服务可以按任何顺序进行。因为这两个部分是如此的交织在一起，无论你以什么样的顺序做，你都需要返回来更新其他的部分。您的注册需要来自您部署的 web 服务的消息传递端点，并且您的 web 服务需要从您的注册创建的 Id 和密码。您的应用清单也需要该 Id 来将团队连接到您的 web 服务。

向微软 Azure 的机器人框架注册机器人

打开浏览器，导航到 Azure 门户( https://portal.azure.com/ )。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft.com登录。

点击创建资源，在搜索市场输入框中输入 bot ，在返回的资源列表中选择 Bot 频道注册。然后在下一页选择 Create 开始注册新的 bot 资源。

在 Bot 通道注册页面，点击发起创建 Bot 通道注册(图 6-26 )。

图 6-26

搜索机器人频道注册

在 Bot 通道注册刀片中，输入以下值，然后选择创建。见图 6-27 。

图 6-27

Bot 渠道注册

图 6-28

Bot 渠道登记表

• Bot 句柄:输入 bot 的全局唯一名称:

  • 前 ：任务模块机器人

• 订阅:选择之前创建资源组时选择的订阅

• 资源组:选择您之前创建的资源组- **例如:**团队

• 地点:选择你喜欢的蔚蓝地区

• 定价等级:选择首选的定价等级；F0 层是免费的

• 消息传递端点 : https://REPLACE_THIS.ngrok.io/api/messages

  bot 注册需要知道实现 bot 的 web 服务的端点。这将在每次启动之前练习中使用的 ngrok 实用程序时发生变化。

• 应用洞察:关闭

• 微软应用 ID 和密码:自动创建应用 ID 和密码(见图 6-28 )。

Azure 将开始提供新资源。这需要一两分钟的时间。完成后，导航到资源组中的 bot 资源(图 6-29 )。

图 6-29

Bot 已创建

为机器人启用 Microsoft Teams 频道

为了让 bot 与 Microsoft 团队进行交互，您必须启用团队通道。

图 6-30

选择团队频道

• 从 Azure 的 bot 资源中，选择左侧导航中的通道。

• 在连接通道面板上，选择MSTeam 通道，然后选择保存确认动作(图 6-30 )。

• 同意服务条款

一旦此过程完成，您应该会看到 Web Chat 和 Microsoft 团队都列在您启用的频道中(图 6-31 )。

图 6-31

连接到频道

检索 Bot 应用 Id 和密码

当 Azure 创建机器人时，它还为机器人注册了一个新的 Azure AD 应用。您需要生成这个新的 bot 应用作为一个秘密，并复制应用的凭据。

从左侧导航栏中选择设置。向下滚动到 Microsoft App ID 部分。

复制机器人的 ID，因为您稍后会需要它(图 6-32 )。

图 6-32

应用 ID 创建

为应用创建客户端密码

点击管理链接，导航至 Azure 广告应用。

为了让守护程序应用在没有用户参与的情况下运行，它将使用应用 ID 和证书或密码登录 Azure AD。在本练习中，您将使用一个秘密。

从左侧导航面板中选择证书&机密。

选择客户端密码部分下的新客户端密码按钮。

出现提示时，给出密码的描述，并选择提供的一个过期时间选项。例如:从不选择添加(图 6-33 )。

Note

复制新的客户端密码值。在您执行另一个操作或离开此刀片后，您将无法取回它。

“证书和机密”页面将显示新的机密。复制该值很重要，因为它只显示一次；如果您离开页面并返回，它将仅显示为一个屏蔽值。

图 6-33

应用客户端机密

The Certificate & Secrets page will display the new secret. It’s important you copy this

复制并存储秘密值的值，因为您以后会需要它。

使用约曼生成器创建 MSTeam 应用

在本节中，您将使用 Yeoman generator (yo teams)通过 bot Teams 应用创建一个新的任务模块

创建新的 web 部件项目:

图 6-34

哟团队

• 在您喜欢的位置创建一个新的项目目录

• 打开命令提示符

• 创建一个新文件夹" taskModuleBot "

• 导航到新创建的目录

• 通过运行以下命令为 MSTeam 运行 Yeoman Generator:yo Teams(图 6-34 )。

约曼将发射并问你一系列问题。用以下数值回答问题(如图 6-35 ):

图 6-35

回答约曼问卷

• 您的解决方案名称是什么？任务-模块-机器人

• 您想将文件放在哪里？使用当前文件夹

• 您的 Microsoft Teams 应用项目的标题？任务模块机器人

• 你(公司)的名字？(最多 32 个字符)JPOWER4

• 您希望使用哪个清单版本？v1.6

• 如果您有 Microsoft Partner ID，请输入。(留空以跳过)

• 您希望在项目中添加哪些功能？一个机器人

• 您将在其中托管此解决方案的 URL？https://taskmodulesbot.azurewebsites.net

• 当你的应用/标签加载时，你想显示加载指示器吗？不

• 是否要包括测试框架和初始测试？不

• 您希望将 Azure Applications Insights 用于遥测吗？不

• 你想用什么类型的机器人？一个新的框架

• 你的机器人叫什么名字？任务模块机器人

• 这个机器人的微软应用 ID 是什么？可以在 Bot 框架门户( https://dev.botframework.com )中找到。93e7cc02-ebb9-4db1-a

• 2cd-baab7c85498b

• 你想给你的机器人添加一个静态标签吗？不

• 你想支持文件上传到机器人？不

Note

这些问题的大多数答案在创建项目后都可以更改。例如，在创建或测试项目时，项目所在的 URL 并不重要。

使用代码打开 Visual Studio 代码。在命令提示符下(图 6-36 )。

图 6-36

Visual studio 代码 OOB

• 打开。env 文件➤打开，并添加从新的客户端密码值复制的 MICROSOFT_APP_PASSWORD

MICROSOFT_APP_PASSWORD= vmTMorc76SJt02_w6R-2yeD.YJ.F-g8dr_

更新机器人代码

流程是这样的:

• 转到。/src/app/taskModulesBot/taskModulesBot . ts 文件并添加以下代码。

• 首先，添加下面给出的标题:

• 然后包含 TaskModuleResponse，TaskModuleRequest，TaskModuleTaskInfo，对象引用现有的 botbuilder 包:

import * as Util from "util";
const TextEncoder = Util.TextEncoder;

• 转到 taskModulesBot 类，在公共构造函数(conversation state:conversation state)中找到处理程序 this.onMessage()

• 在 this.onMessage() 处理程序中，继续执行以下代码来处理一对一对话和通道对话。

• 找到下面给出的代码:

TeamsActivityHandler, TaskModuleResponse, TaskModuleRequest, TaskModuleTaskInfo
} from "botbuilder";

• 替换下面给出的 switch 语句代码:

switch (context.activity.type) {...}

switch (context.activity.type) {
    case ActivityTypes.Message:
      const card = CardFactory.heroCard("Learn Microsoft Power Platform", undefined, [
                    {
                    type: "invoke",
                    title: "Empowering Citizen Developers Using Power Apps",
    value: { type: "task/fetch", taskModule: "player", videoId: "eSJ-dVp83ks" }
                        }
                    ]);
                    await context.sendActivity({ attachments: [card] });
                default:
                    break;
            }

若要处理 TaskModule taskinfo，请在该类中添加 handleTeamsTaskModuleFetch 方法。每当用户点击按钮时，它将调用 player.html 按钮作为模态窗口来显示 YouTube 视频。

protected handleTeamsTaskModuleFetch(context: TurnContext, request: TaskModuleRequest): Promise<TaskModuleResponse> {
        let response: TaskModuleResponse;
        response = {
            task: {
                type: "continue",
                value: {
                    title: "YouTube Player",
                    url: `https://${process.env.HOSTNAME}/player.html?vid=${request.data.videoId}`,
                    width: 1000,
                    height: 700
                } as TaskModuleTaskInfo
            }
        } as TaskModuleResponse;

        return Promise.resolve(response);
    }

导航到。src/app/web/并创建一个新文件player.html。然后在 player.html 文件中添加下面给出的代码:

• 文件➤保存所有 保存的修改

• 至此，您的任务模块已经准备好接受测试了！

<!DOCTYPE html>

<html lang="en">

<head>
    <title>YouTube Player Task Module</title>
    <style>
        #embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 95%;
            height: 95%;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-style: none;
        }
    </style>
</head>

<body>
    <div id="embed-container"></div>
</body>
<script>
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };

    var element = document.createElement("iframe");
    element.src = "https://www.youtube.com/embed/" + getUrlParameter("vid");
    element.width = "1000";
    element.height = "700";
    element.frameborder = "0";
    element.allow = "autoplay; encrypted-media";
    element.allowfullscreen = "";

    document.getElementById("embed-container").appendChild(element);
</script>

</html>

测试 Bot 中的任务模块

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 6-37 )。

图 6-37

ngrok-服务执行

Ngrok 已经创建了临时 URL f9344937c450.ngrok.io，它将映射到我们本地运行的 web 服务器。

然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL f9344937c450.ngrok.io 更新消息传递端点(图 6-38 )。

图 6-38

更新消息传递端点

Note

ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，确保每次重启 web 服务器时都更新 URL 的消息端点。

在 MSTeam 中安装对话机器人

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传(图 6-39 )。

图 6-39

向 MS 团队添加应用

在出现的文件对话框中，选择项目中的 Microsoft Teams 包。这个应用包是一个 ZIP 文件，可以在项目中找到。/包文件夹(图 6-40 )。

图 6-40

上传应用

安装后，您将能够在应用列表中看到该应用(图 6-41 )。

图 6-41

安装的应用

一旦软件包上传，MSTeam 将显示应用的摘要(图 6-42 )。

图 6-42

添加聊天应用

将任务模块测试为个人机器人

下面是测试的方法:

图 6-43

Bot 对话响应

• 点按“添加”按钮以导航至与机器人聊天。

• 请注意，当应用加载时，bot 支持的命令会显示在编写框中。让我们测试一下机器人！

• 选择帮助命令，或在撰写框中手动键入任何内容，然后按 enter。我已经输入了你好。

• 几秒钟后，您应该会看到机器人用一个英雄卡来响应，上面有一个按钮:“使用 Power 应用增强公民开发者的能力”。

  见图 6-43 。

• 然后点击“使用 Power Apps 增强公民开发者的能力”按钮，它将打开一个模态窗口，并根据给定的视频 Id 加载 player.html 文件和 YouTube 视频。

在本练习中，您学习了如何使用 Bot 在 Microsoft 团队中调用任务模块。

结论

在本章中，您已经学习了带有选项卡和 bot 的任务模块的各种功能，以及如何将数据发送到任务模块和模式窗口，如何使用带有 JavaScript 和自适应卡的 HTML 从任务模块收集用户输入，并了解了可以通过选择 Microsoft Teams 体验中的按钮或使用深层链接来调用的任务模块。

您还学习了如何使用 Yeoman generator for Microsoft Teams 创建任务模块。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和特性。