七、使用 Webhooks 将 Web 服务连接到 MSTeam
Webhooks 和连接器是将您的 web 服务连接到 MSTeam 内部的渠道和团队的简单方法。出站 webhooks 允许您的用户从一个通道向您的 web 服务发送文本消息。连接器允许用户订阅从您的 web 服务接收通知和消息。在 MSTeam 中有两种类型的连接器可用:传入 webhooks 和 Office 365 连接器。在这一章中，你将学习 webhooks 和连接器，以及如何在 MSTeam 渠道中实现它们。
Web 服务和 Webhooks 概述
Web 服务和 webhooks 都在执行相同的功能，但是执行过程不同(参见图 7-1 )。每当有人或其他应用调用 Webhooks 时，它就会执行一个特定的功能。它们允许接收入站数据或发送出站数据。Web 服务将数据从一个系统传送到另一个系统，因此接收应用可以存储或处理数据；您可以使用 web 服务或 webhooks 来自动化这个过程。
webhook 也称为 web 回调或 HTTP 推送 API。如图 7-1 所示，你可以看到 API 和 webhooks 之间的区别。Webhooks 只在需要的时候调用一次，但是 API 总是调用并验证状态。
图 7-1
API 和 webhooks 的区别
即将离任的 Webhooks 和 MSTeam
在第三章中，你学习了我们注册并实现的对话机器人。出站 webhooks 提供了一种简单的方法，允许用户向您的 web 服务发送消息，而不必经历通过 Microsoft Bot 框架创建 Bot 的整个过程。传出的 webhooks 将数据从团队发送到任何接受 JSON 有效负载的服务。一旦你注册了团队，外向的网络钩子就像一个机器人。它们将用于收听频道、@提及、发送通知服务，并且大部分用卡片来响应。
出站 webhooks 支持从一个通道向您的服务发送文本消息。您的 web 服务将有五秒钟的时间以文本或卡片的形式发送对消息的响应，而出站 webhooks 不适合大量的输入和响应。见表 7-1 。
表 7-1
外向 Webhook 主要功能
|特征
|
描述
|
| — | — |
| 范围配置 | 出站 webhooks 的范围是团队级别的，您需要为每个团队添加出站 webhooks。 |
| 反应式消息传递 | 用户必须使用@ reference for web hook 来接收反馈消息，并且仅在公共渠道中支持出站 webhooks。 |
| 标准 HTTP 消息交换 | 标准 HTTP 消息交换响应将出现在与原始请求相同的链中。此外，它支持丰富的文本、图像、卡片和表情符号。它不支持卡片操作。 |
| 团队 API 方法支持 | 团队中的外发 webhooks 只支持 http post web 服务，不支持团队 API。 |
在应用的服务器上创建一个 URL，以接受和处理带有 JSON 有效负载的 POST 请求
您的 web 服务从 Azure bot 服务消息传递模式接收消息，或者 bot 框架连接器使您的服务能够通过 HTTPS 协议处理来自 Azure bit service API 的 JSON 格式消息的交换。如前所述，外发 webhooks 的范围是团队级别的，就像 bot 用户需要@提及要在通道中调用的外发 webhooks 的名称。传出的 webhooks 将数据从团队发送到任何接受 JSON 有效负载的服务
创建一个方法来验证传出的 Webhook HMAC 令牌
总是验证请求中包含的 HTTP HMAC 签名，作为一个头，并来自您的身份验证协议，以确保您的服务正在接收来自您的团队客户端的调用。
-
MSTeam 使用标准的 SHA256 HMAC 加密技术。您需要将消息体转换成 UTF8 格式的字节数组，以便从消息的请求体生成 HMAC 令牌。
-
当您在团队中注册出站 webhook 时，您应该从团队提供的字节数组安全令牌中计算散列，并使用 UTF-8 编码将散列转换为字符串。
-
最后，将字符串值与 HTTL 请求生成的值进行比较。
以下示例代码供您验证和转换消息时参考:
const securityToken = process.env.SECURITY_TOKEN;
if (securityToken && securityToken.length > 0) {
// There is a configured security token
const auth = req.headers.authorization;
const msgBuf = Buffer.from((req as any).rawBody, "utf8");
const msgHash = "HMAC " + crypto.
createHmac("sha256", Buffer.from(securityToken as string, "base64")).
update(msgBuf).
digest("base64");
if (msgHash === auth) {
创建发送成功或失败响应的方法
标准 HTTP 消息交换响应将出现在与原始请求相同的链中。当用户调用查询时，您的代码将有五秒钟的时间来响应消息，在连接超时和终止之前，Microsoft 团队将处理对您的服务问题的同步 HTTP 请求。
即将到来的 Webhooks 和 MSTeam
传入的 webhooks 与连接器或特殊类型的连接器相同。传入 webhooks 是最简单的连接器类型。传入的 webhooks 提供了一种从外部应用共享频道内容的简单方法，主要用作跟踪和通知工具。您可以选择使用 https 端点从通道发送数据，该端点将接受格式化的 JSON 并接收通道的消息。传入的 webhooks 是一种将通道连接到您的服务的快速而简单的方法。最好的例子是在 DevOps 通道中创建一个传入的 webhook，供您的应用构建、配置、部署、监控和发送警报。传入的 webhooks 是您想要发布的消息，通常采用卡片格式。卡片是用户界面容器，包含与单个主题相关的内容和动作，是以一致的方式从传入的 webhooks 呈现消息数据的一种方式。见表 7-2 。
表 7-2
传入的 Webhook 关键功能
|特征
|
描述
|
| — | — |
| 范围配置 | 传入的 web hook 的作用域在通道级别，正如本章前面的会话中提到的，传出的 web hook 的作用域在团队级别。 |
| 安全资源定义 | 传入的 webhooks 消息被格式化为 JSON 有效载荷，它们将防止恶意代码的注入。 |
| 可操作的信息支持 | 可操作消息支持团队和传入网络挂钩通过卡片发送消息，并且仅支持可操作消息卡格式。 |
| 独立的 HTTPS 消息支持 | 传入的 webhook 发送 HTTPS 帖子请求可以使用卡片向团队发送消息。 |
| 降价支持 | HTML 标记将不支持可操作的消息卡，所以它们总是对所有测试字段使用基本的降价。 |
你有三个选择来分发你的网络钩子:
-
从您的频道设置一个传入的 webhook。
-
添加一个配置页面，并将传入的 webhook 包装在一个 O365 连接器中。
-
将传入的 webhook 打包并发布为连接器和 AppSource 提交的一部分。
连接器
连接器是将信息从第三方服务直接推送到您的 Microsoft 渠道。您可以从多个 Microsoft 365 渠道(如 Microsoft Teams、Yammer、Outlook 和 Microsoft 365 Groups)访问连接器发布的信息。连接器允许您为传入的 webhook 创建自定义配置。然后你可以把连接器分发给任何第三方和 app store。连接器总是使用卡，但是卡操作对 Office 365 连接器有限制。连接器在渠道级别配置，但在团队级别安装。
例如，找到一个天气连接器，允许用户输入位置和时间，并接收关于明天预测天气的天气报告。
在团队中，我们有 150 多个可用的连接器，它每天都在增长，您也可以将其发布到 Microsoft Store，供每个人使用。为此，您需要在 Office 365 开发人员门户中注册您的连接器。微软的审核流程分为三个阶段。
将连接器配置体验集成到团队客户端中
对于能够在不离开团队客户机的情况下完成连接器配置的用户，团队客户机将您的配置页面直接嵌入到 iframe 中。
从团队客户端配置连接器时，应遵循以下步骤:
-
转到团队客户端。
-
单击您的连接器开始配置过程。
-
它将加载所有连接器。
-
您可以通过 web 体验来完成配置。
-
用户按“保存”，这将在您的代码中触发回调。
-
您的代码将通过检索 webhook 设置来处理 save 事件。
此外，您可以重用配置或创建一个单独的版本，专门在团队中托管，为此您需要从代码中进行控制。Microsoft Teams JavaScript SDK 允许您的代码访问 API 来执行常见操作，如获取当前用户/渠道/团队上下文和启动身份验证流程。
-
通过调用 microsoftTeams.initialize()初始化 SDK
-
调用 Microsoft teams . settings . setvaliditystate(true)
- 当您想要启用保存按钮时。
-
注册一个 Microsoft teams . settings . registersonsavehandler()事件处理程序，当用户单击“保存”时会调用该处理程序。
-
调用 Microsoft teams . settings . setsettings()保存连接器设置，它将帮助用户更新现有的配置。
-
重新配置时，您需要调用 Microsoft teams . settings . get settings()来获取 webhook 属性，参数如下:
-
entityId -由您的代码在调用 setSettings()时设置。
-
configName -由您的代码在调用 setSettings()时设置。
-
contentUrl -配置页面的 Url。
-
webhookUrl -为此连接器创建的 webhookUrl。
-
appType -返回值。
-
userObjectId -这是与启动连接器设置的 Office 365 用户相对应的唯一 Id。
-
-
注册一个 Microsoft teams . settings . registernremovehandler()事件处理程序，当用户删除连接器时会调用该处理程序。
-
registerOnRemoveHandler()事件让您的服务执行任何清理操作。
包括清单中的连接器
当使用 yo team 的生成器创建连接器时，它会从门户自动生成 Teams 应用清单。打开清单并验证连接器部分。
"connectors": [
{
"connectorId": "{{CONNECTOR_ID}}",
"configurationUrl":
"https://{{HOSTNAME}}/myFirstTeamsConnector/config.html",
"scopes": [
"team"
]
}
]
练习 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 订阅
-
邮递员铬扩展
构建 Webhook
在本练习中，您将学习如何创建一个 web 服务，并将其注册为 Microsoft Teams 中的一个出站 webhook。
-
打开命令提示符，导航到要保存工作的目录。
-
创建一个新文件夹“OutgoingWebhooks”，并将目录更改到该文件夹中。
-
通过运行以下命令来运行 Yeoman generator for Microsoft Teams:
图 7-2
yo 团队发电机
yo teams (Figure 7-2).
约曼将发射并问你一系列问题。用以下数值回答问题(图 7-3 ):
图 7-3
回答约曼问卷
-
您的解决方案名称是什么？出站 webhooks
-
您想将文件放在哪里？使用当前文件夹
-
您的 Microsoft Teams 应用项目的标题？外向网络挂钩
-
你(公司)的名字？(最多 32 个字符)JPOWER4
-
您希望使用哪个清单版本？v1.6
-
如果您有 Microsoft Partner ID，请输入。(留空以跳过)
-
您希望在项目中添加哪些功能？外向的网钩
-
您将在其中托管此解决方案的 URL？
https://outgoingwebhooks.azurewebsites.net -
当你的应用/标签加载时，你想显示加载指示器吗？不
-
是否要包括测试框架和初始测试？不
-
您希望将 Azure Applications Insights 用于遥测吗？不
-
你的外网叫什么名字？我的出站 Webhook
我们的 web 服务还需要一个 NPM 包来简化数组中的数据查找。在命令提示符下从项目的根文件夹执行以下命令来安装库 Lodash :
-
MSTeam 的 Yeoman generator 为我们的输出 webhook 创建了一个存根 web 服务端点。
-
找到并打开文件。/src/app/myoutgoingewebhook/myoutgoingewebhook . ts .它在端点 /api/webhook 监听 HTTPS 请求。
-
在 MyOutgoingWebhook 类中找到 requestHandler()方法。该方法首先根据将 webhook 添加到团队时获得的安全令牌检查授权头中的 HMAC 值。
-
找到以下代码:
npm install lodash -S
-
这段代码只是将消息中输入的字符串回显给 MSTeam，这些字符串将被添加到触发 webhook 的消息的回复中。
-
更新此代码，使用 planets.json 数据和 Adaptive Card 添加一些真正的功能。
message.text = `Echo ${incoming.text}`;
在中创建一个新文件‘planets . JSON’。/src/app/myoutgoingewebhook文件夹，并在其中添加以下 JSON。该文件将包含一系列行星细节:
[{
"id": "1",
"name": "Mercury",
"summary": "Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets in the Solar System. It is named after the Roman deity Mercury, the messenger of the gods.",
"solarOrbitYears": 0.24,
"solarOrbitAvgDistanceKm": 57909050,
"numSatellites": 0,
"wikiLink": "https://en.wikipedia.org/wiki/Mercury_(planet)",
"imageLink": "https://upload.wikimedia.org/wikipedia/commons/d/d9/Mercury_in_color_-_Prockter07-edit1.jpg",
"imageAlt": "NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington [Public domain]"
},
{
"id": "2",
"name": "Venus",
"summary": "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after the Moon, Venus can cast shadows and, rarely, is visible to the naked eye in broad daylight. Venus lies within Earth's orbit, and so never appears to venture far from the Sun, setting in the west just after dusk and rising in the east a bit before dawn.",
"solarOrbitYears": 0.62,
"solarOrbitAvgDistanceKm": 108208000,
"numSatellites": 0,
"wikiLink": "https://en.wikipedia.org/wiki/Venus",
"imageLink": "https://upload.wikimedia.org/wikipedia/commons/e/e5/Venus-real_color.jpg",
"imageAlt": ""Image processing by R. Nunes", link to http://www.astrosurf.com/nunes [Public domain]"
]
接下来，在中创建一个新文件 planetDisplayCard.json 。/src/app/myoutgoingewebhook文件夹，并在其中添加以下 JSON。该文件将包含适配卡的模板，web 服务将响应:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [{
"id": "cardHeader",
"type": "Container",
"items": [{
"id": "planetName",
"type": "TextBlock",
"weight": "bolder",
"size": "medium"
}]
},
{
"type": "Container",
"id": "cardBody",
"items": [{
"id": "planetSummary",
"type": "TextBlock",
"wrap": true
},
{
"id": "planetDetails",
"type": "ColumnSet",
"columns": [{
"type": "Column",
"width": "100",
"items": [{
"id": "planetImage",
"size": "stretch",
"type": "Image"
}]
},
{
"type": "Column",
"width": "250",
"items": [{
"type": "FactSet",
"facts": [{
"id": "orderFromSun",
"title": "Order from the sun:"
},
{
"id": "planetNumSatellites",
"title": "Known satellites:"
},
{
"id": "solarOrbitYears",
"title": "Solar orbit (*Earth years*):"
},
{
"id": "solarOrbitAvgDistanceKm",
"title": "Average distance from the sun (*km*):"
}
]
}]
}
]
},
{
"id": "imageAttribution",
"type": "TextBlock",
"size": "medium",
"isSubtle": true,
"wrap": true
}
]
}
],
"actions": [{
"type": "Action.OpenUrl",
"title": "Learn more on Wikipedia"
}]
}
将以下导入语句添加到**。/src/app/myoutgoingewebhook/myoutgoingewebhook . t**s 文件，就在现有的 import 语句之后:
import { find, sortBy } from "lodash";
将下面的方法添加到 MyOutgoingWebhook 类中。 getPlanetDetailCard ()方法将使用提供的 planet 对象加载并填充自适应卡模板的细节:
private static getPlanetDetailCard(selectedPlanet: any): builder.Attachment {
// load display card
const adaptiveCardSource: any = require("./planetDisplayCard.json");
// update planet fields in display card
adaptiveCardSource.actions[0].url = selectedPlanet.wikiLink;
find(adaptiveCardSource.body, { "id": "cardHeader" }).items[0].text = selectedPlanet.name;
const cardBody: any = find(adaptiveCardSource.body, { "id": "cardBody" });
find(cardBody.items, { "id": "planetSummary" }).text = selectedPlanet.summary;
find(cardBody.items, { "id": "imageAttribution" }).text = "*Image attribution: " + selectedPlanet.imageAlt + "*";
const cardDetails: any = find(cardBody.items, { "id": "planetDetails" });
cardDetails.columns[0].items[0].url = selectedPlanet.imageLink;
find(cardDetails.columns[1].items[0].facts, { "id": "orderFromSun" }).value = selectedPlanet.id;
find(cardDetails.columns[1].items[0].facts, { "id": "planetNumSatellites" }).value = selectedPlanet.numSatellites;
find(cardDetails.columns[1].items[0].facts, { "id": "solarOrbitYears" }).value = selectedPlanet.solarOrbitYears;
find(cardDetails.columns[1].items[0].facts, { "id": "solarOrbitAvgDistanceKm" }).value = Number(selectedPlanet.solarOrbitAvgDistanceKm).toLocaleString();
// return the adaptive card
return builder.CardFactory.adaptiveCard(adaptiveCardSource);
}
接下来，将下面的方法添加到myoutgoingewebhook类中。**processauthenticedrequest()方法获取传入的文本，并使用它在 planets.json 文件中查找行星。如果找到一个，它调用getplanetailcard()**方法来获得一个适配卡，并将其作为一个活动返回，该活动将被发送回 MSTeam。如果找不到行星，它只会在请求回复中回显文本:
private static processAuthenticatedRequest(incomingText: string): Partial<builder.Activity> {
const message: Partial<builder.Activity> = {
type: builder.ActivityTypes.Message
};
// load planets
const planets: any = require("./planets.json");
// get the selected planet
const selectedPlanet: any = planets.filter((planet) => (planet.name as string).trim().toLowerCase() === incomingText.trim().toLowerCase());
if (!selectedPlanet || !selectedPlanet.length) {
message.text = `Echo ${incomingText}`;
} else {
const adaptiveCard = MyOutgoingWebhook.getPlanetDetailCard(selectedPlanet[0]);
message.type = "result";
message.attachmentLayout = "list";
message.attachments = [adaptiveCard];
}
return message;
}
将下面的 scrubMessage ()方法添加到 MyOutgoingWebhook 类中。用户必须@提及一个传出的 webhook，以便向它发送消息。该方法将删除> < /at >处的<文本和任何空格，以提取行星名称:
private static scrubMessage(incomingText: string): string {
const cleanMessage = incomingText
.slice(incomingText.lastIndexOf(">") + 1, incomingText.length)
.replace(" ", "");
return cleanMessage;
}
然后，更新 requestHandler ()方法:
-
找到下面的代码，将消息声明从一个常量更改为 let ，因为您将更改这个值。
-
找到并替换以下代码:
let message: Partial<builder.Activity> = {
type: builder.ActivityTypes.Message
};
message.text = `Echo ${incoming.text}`;
使用以下代码:
const scrubbedText = MyOutgoingWebhook.scrubMessage(incoming.text);
message = MyOutgoingWebhook.processAuthenticatedRequest(scrubbedText);
测试传出的 Webhook
以下是测试方法:
图 7-4
管理团队
-
将传出的 webhook 添加到 Microsoft Teams 中的团队。在浏览器中，导航到
https://teams.microsoft.com，使用工作和学校帐户的凭据登录。 -
登录后，选择要添加网络挂钩的团队。
-
点击并选择管理团队(图 7-4 )。
图 7-5
创建一个出站 webhook
- 选择应用，然后点击底部的“创建外发网页挂钩”(图 7-5 )。
图 7-6
创建一个出站 webhook 表单
- 在创建外发 webhook 对话框中，输入以下值并选择创建(图 7-6 ):
-
名称:星球详情
-
回调 URL :
https://{{REPLACE_NGROK_SUBDOMAIN}}.ngrok.io/api/webhook -
描述:星球详情外网挂钩
-
上传图像以识别
-
创建外发 webhook 后，MSTeam 将显示一个安全令牌(图 7-7 )。
图 7-7
传出 webhook 安全令牌
-
复制这个值，并在。/.项目中的 env 文件。
-
从命令行导航到项目的根文件夹，并执行以下命令:
gulp ngrok-serve
在控制台中，找到 ngrok 创建的动态 URL(图 7-8 )。
图 7-8
吞咽 ngrok 发球执行
图 7-9
传出的 webhook 应用
-
前往➤团队精选应用。
-
选择行星细节网页挂钩(图 7-9 )。
图 7-10
编辑传出 webhook 应用配置
- 单击以打开和更新 ngrok 动态 URL 并保存它。参见图 7-10 。
图 7-11
传出 webhook 应用测试
-
也就是说，用您动态创建的 Ngrok URL ( b73772b97945 )的值替换**{ { REPLACE _ NGROK _ SUBDOMAIN } }**
-
现在你可以测试 webhook 了。转到团队内的频道对话选项卡，输入消息 @Planet Details 。请注意，当您键入消息时，MSTeam 会检测网络挂钩的名称(图 7-11 )。
图 7-12
传出 webhook 应用添加参数
- 输入 Mercury 并点击发送图标(图 7-12 )。
图 7-13
Bot 通知
- 提交消息后几秒钟，您将看到对您的消息的回复，其中包含定制的适配卡，其中包含有关该星球的详细信息，并发送通知。参见图 7-13 。
然后图 7-14 显示了使用卡输出的 webhook 消息输出。
图 7-14
传出 webhook 输出
您已经成功测试了您的出站 webhook！
在本练习中，您学习了如何创建一个外发 webhook 并在 Microsoft 团队中注册它。无需 bot 注册，您就可以获得自定义 bot 对对话的回复。
练习 2 -创建传入的网络挂钩
在本练习中，您将学习如何在 Microsoft Teams 频道中注册一个传入的 webhook 并向其发布消息。
注册新的传入 Webhook
将传出的 webhook 添加到 Microsoft Teams 中的团队。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。
图 7-15
管理团队
-
登录后，选择要添加到传入网络挂钩的团队。
-
点击并选择管理团队(图 7-15 )。
图 7-16
更多应用
- 选择应用并点击右上方的“更多应用”(图 7-16 )。
图 7-17
MS 团队应用列表
-
在应用页面上，搜索传入的 webhook 应用。
-
点击“传入 web hook”app 并打开(图 7-17 )。
图 7-18
加入团队
- 选择添加到团队按钮(图 7-18 )。
图 7-19
为传入 webhook 设置连接器
- 输入要添加 webhook 的频道名称，选择“设置连接器”(图 7-19 )。
在传入 Webhook 配置屏幕上:
图 7-20
配置传入 webhook
-
输入名称“JPOWER4 Services”
-
上传图片。
-
选择创建按钮(您可能需要在对话框中向下滚动，因为创建按钮在默认情况下是不可见的，如图 7-20 的屏幕截图所示)。
图 7-21
复制传入的 webhook URL
- 创建传入的 webhook 后，对话框将添加一个新的输入框，其中包含您要发布到的端点。复制该值(图 7-21 )。
图 7-22
传入的 webhook 已添加到频道
-
复制的 URL 如下所示:
-
它将在通道中向其他通道成员添加一个关于传入 webhook 配置的对话(图 7-22 )。
测试传入的 Webhook
让我们来测试一下:
图 7-24
邮递员请求正文内容
-
在配置了传入的 webhook 之后，下一步是向它提交一个 post 以在通道中显示一条消息。通过向提供的 webhook 端点提交一个 HTTPS 请求来实现这一点。
-
使用免费工具邮递员
https://www.postman.com/，创建一个新的请求到点端点(图 7-23 ):-
将请求设置为发布
-
将端点设置为您在前一节末尾复制的 webhook 端点
-
set the Content-Type header to application/json on the Headers tab
图 7-23
邮递员配置
-
然后将下面的 JSON 添加到 Body 选项卡，并选择 raw 选项。
-
注:此 JSON 包含 Office 365 连接器卡。
-
传入 webhook 仅支持 Office 365 连接器卡。
-
向传入的 webhooks 发送消息时，不支持适配卡。见图 7-24
-
图 7-25
传入的 webhook 输出
-
单击通过选择“发送”按钮将卡片发送给 Microsoft 团队。
-
它将处理请求并向通道发送消息卡。
-
转到 Microsoft Teams，并导航回安装了传入 webhook 的频道中的 Conversations 选项卡。您可以在您的消息卡(Office 365 连接器卡)中看到下面给出的消息。参见图 7-25 。
{
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"summary": "JPOWER4",
"sections": [{
"activityTitle": "About JPOWER4",
"activityImage": "http://www.jpower4.cimg/favicon.png",
"facts": [
{
"name": "Description",
"value": "We Launched by the middle of the year 2019 with a team of five to provide a world class cloud based services to the customers with a very economical prices.Yes, we are a cloud based application services company incubated by few IT techies who had a dream to lead a company that provides end to end cloud based solutions to the customers."
},
{
"name": "SharePoint Framework",
"value": "The SharePoint Framework is a Web Part for Office 365 & SharePoint that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling of development."
},
{
"name": "Microsoft Teams",
"value": "Microsoft Teams is a collaboration workspace in Office 365 that integrates with apps and services people use to get work done together. We develop custom applications for Microsoft Teams and help the customer to upgrade from Skype for Business."
},
{
"name": "Power Apps",
"value": "Build apps in hours, not months, that easily connect to data, use excel like expressions to add logic, and run on the web, iOS, and Android devices"
},
{
"name": "Power Automate",
"value": "Include powerful workflow automation directly in your apps with a no-code approach that connects to hundreds of popular apps and services."
},
{
"name": "Power BI",
"value": "Make sense of your data through interactive, real-time dashboards and unlock the insights needed to drive your business forward."
}
]
}],
"potentialAction": [{
"@context": "http://schema.org",
"@type": "ViewAction",
"name": "Know more about JPOWER4",
"target": ["http://www.jpower4.com/"]
}]
}
在本练习中，您学习了如何在 Microsoft Teams 频道中注册一个传入的 webhook，并向其发布一条带有 Office 365 Connector 卡的消息。
结论
在这一章中，你已经学习了 webhooks 的各种特性。出站 webhooks 允许您的用户从一个通道向您的 web 服务发送文本消息。连接器和传入 webhooks 允许用户订阅从您的 web 服务接收通知和消息。我们了解了 Office 365 连接器卡，可以通过从 postman 扩展发送它们来调用，就像我们能够从自己的应用中使用它一样。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和特性。
八、使用 Microsoft Graph 扩展您的解决方案
在这一章中，我将介绍团队生命周期管理的自动化、消息、webhooks 和特定于资源的许可同意。Microsoft Graph 是用于处理数据的统一 API 端点，因此 SharePoint、团队、交换和规划各种不同的 Microsoft 产品都有一个图形端点，所有这些都在一个公共 API 端点下公开。团队允许你建立各种不同的应用，如标签，机器人，连接器等。
图形 API 概述
Microsoft Graph 是访问微软应用中所有数据的统一 REST API，Microsoft Teams 是 Office 365 中团队合作的中心，允许您通过聊天消息、在线会议和电话进行交流。它允许您与所有这些 Office 365 应用协作。
API 使您能够访问 Microsoft 云服务资源。注册应用并获得用户或服务的身份验证令牌后，您可以向 Microsoft Graph API 发出请求。它公开 REST APIs 和客户端库来访问以下 Microsoft 365 服务上的数据:
图 8-1
Microsoft Graph–一个端点
-
Office 365 服务:Delve、Excel、Microsoft Bookings、Microsoft Teams、OneDrive、OneNote、Outlook/Exchange、Planner、SharePoint
-
企业移动和安全服务:高级威胁分析、高级威胁保护、Azure Active Directory、Identity Manager 和 Intune
-
Windows 10 服务:活动、设备、通知(图 8-1 )。
团队图形 API
Microsoft Graph 提供了用于访问数据的 API，您可以从选项卡、机器人、网站和服务中调用 Graph API，这些工具没有用户界面，甚至在您的命令行工具中没有 Graph API。
Microsoft Teams Graph API 允许您创建新团队并向这些团队添加频道，向团队添加成员，以及向您创建的频道添加选项卡。一旦团队完成了它的生命周期，你就有了一个功能齐全的团队。然后，您可以使用该功能的图形 API 来存档或删除团队。此外，人们用第一个图形 API 构建了不同的东西；例如，他们批量调配团队——在年初，每个部门可能有 100 个团队。
第二件事是你可以创建临时团队。例如，如果你是一家航空公司，你想每天飞行一个航班，并为每个航班配备一个团队，你可以在午夜钟声敲响时这样做。第三件事是人们创造了许多管理工具；他们只是管理他们的团队，所以团队的 PowerShell 命令就是建立在这个基础上的。现代的管理门户也是建立在 Graph API 之上的，因此开发人员可以开始使用 teams Graph API 来管理所有的团队管理活动。
你现在有一堆 API 来做这件事(表 8-1 )，并且你可以访问团队资源。您可以读取、写入、添加、移除、更新、删除以及枚举成员所拥有的团队。您拥有用于操作成员资格、向成员资格列表添加和删除人员、向所有者列表添加和删除人员以及枚举那些所有者和成员的 APIs 并获得关于他们的附加信息，例如他们的全名、电子邮件地址、用户照片等。
表 8-1
目前可供 MSTeam 使用的 API
|资源
|
方法
|
| — | — |
| 组 | 列出您的团队、列出所有团队、创建、阅读、更新，删除、克隆、存档、取消存档 |
| 组 | 添加成员，删除成员，添加所有者，删除所有者，获取文件，获取笔记本，获取计划，获取日历 |
| 引导 | 列出、创建、读取、更新、删除 |
| teamstar | 列出、创建、读取、更新、删除 |
| 团队快照 | 列出、发布、更新、删除 |
| 团队安装 | 列出、安装、升级、删除 |
| 聊天消息 | 发送 |
| 呼叫 | 回答、拒绝、重定向、静音、取消静音、更改屏幕共享角色、列出参与者、邀请参与者 |
| 安排 | 创建或替换、获取、共享 |
| 计划组 | 创建、列出、获取、替换、删除 |
| 变化 | 创建、列出、获取、替换、删除 |
| 休假 | 创建、列出、获取、替换、删除 |
| 超时原因 | 创建、列出、获取、替换、删除 |
团队设置是另一个你可以访问的东西——读取和写入团队设置。有了通道，我们完全有能力添加、读取、更新、删除通道，以及枚举团队中的通道。您可以向这些频道发布频道消息。
用于生命周期管理的图形 API
使用 Graph APIs 可以做的最强大的事情之一是自动化团队的生命周期。因此，您可以创建一个团队，然后向该团队添加成员和所有者，向该团队添加一些频道，配置团队设置，向该团队发布欢迎消息，然后让您的用户加入该团队，当他们完成后，当您尝试向该团队提出的业务问题得到解决时，您可以继续删除该团队(图 8-2 )。
图 8-2
图表可以自动化团队生命周期[REF–MSDN]
团队和小组
微软 365 群组解决了群组协作的各种需求，并拥有 19 个微软 365 应用端点，包括 MSTeam。所有 Microsoft group 功能都适用于 Microsoft 团队。与组相关联的每个团队都在特定团队的上下文中进行交流。群组成员通过群组对话进行交流，群组对话是在 Outlook 中的群组环境中进行的电子邮件对话。为了区分与团队相关联的组，任何具有团队的组都有一个包含“团队”的’**resourceprovisionoptions ‘**属性不要从’**resource provisioning options '**属性中更改“团队”，否则当您列出所有团队时，结果将会不正确。
以下是团队和组在 API 级别上的差异:
-
持续聊天仅适用于 Microsoft 团队。该功能由频道和“聊天消息”资源分层表示。
-
群对话仅对 Microsoft 365 群可用。此功能由对话、“conversationThread”和帖子资源分层表示。
-
“列出加入的团队”方法仅适用于 Microsoft 团队。
-
呼叫和在线会议 API 仅适用于 Microsoft 团队。
您可以创建团队:
-
从头开始，使用你自己的团队
-
来自现有的 O365 组
-
通过克隆现有团队
-
从模板
下面是语法:
POST https://graph.microsoft.com/v1.0/teams
Content-Type: application/json
{
"template@odata.bind": "https://graph.microsoft.com/beta/teamsTemplates('standard')",
"displayName": "My Sample Team",
"description": "My Sample Team’s Description",
"owners@odata.bind": [
"https://graph.microsoft.com/beta/users('userId')"
]
}
团队模板
使用预配置的模板快速组建新团队，这些模板包括频道、所有者设置和预装应用等内容。
现成的模板:
-
标准
-
教育(班级、员工或 PLC)
-
零售店(基础或经理协作)
-
医疗保健(病房或医院)
使用图形 API 设置您的团队
您可以在创建团队或以后更新团队时对其进行配置。
配置如下内容:
-
显示名称和描述
-
来宾和成员权限
-
能见度
-
消息权限
-
创建频道
-
添加成员和角色
下面是语法:
PATCH https://graph.microsoft.com/v1.0/teams/{id}
Content-type: application/json
Content-length: 211
{
"memberSettings": {
"allowCreateUpdateChannels": true
},
"messagingSettings": {
"allowUserEditMessages": true,
"allowUserDeleteMessages": true
},
"funSettings": {
"allowGiphy": true,
"giphyContentRating": "strict"
},
"discoverySettings": {
"showInTeamsSearchAndSuggestions": true
}
}
使用图形 API 添加应用和标签
预安装应用，添加选项卡，并配置您的选项卡以便为您的团队安装应用:
-
您的应用必须位于您的组织应用目录或公共应用商店中。
-
要为您的团队添加选项卡:
-
必须先安装应用。
-
您可以预先配置它们，或者让它们在用户第一次与选项卡交互时进行配置。
-
预配置选项卡可能很有挑战性，请确保使用文档(
https://docs.microsoft.com/en-us/graph/teams-configuring-builtin-tabs)。
-
下面是语法:
POST https://graph.microsoft.com/v1.0/teams/{team-id}/channels/{channel-id}/tabs
{
"displayName": "Document%20Library1",
"teamsApp@odata.bind": "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/com.microsoft.teamspace.tab.files.sharepoint",
"configuration": {
"entityId": "",
"contentUrl": "https://microsoft.sharepoint.com/teams/WWWtest/Shared%20Documents",
"removeUrl": null,
"websiteUrl": null
}
}
POST https://graph.microsoft.com/v1.0/teams/{id}/installedApps
Content-type: application/json
{
"teamsApp@odata.bind":"https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/12345678-9abc-def0-123456789a"
}
存档您的团队
当时机成熟时，使用 Graph 以敏捷的方式归档您的团队，如果有必要，取消团队的归档。
常见归档操作:
-
检索和存档重要频道中的消息(测试版)
-
将团队存档
-
将 SharePoint Online 工作组网站设置为只读(或删除该组)
-
存档或移动存储的文件
下面是语法 :
GET https://graph.microsoft.com/v1.0/teams/{id}/channels
GET https://graph.microsoft.com/beta/teams/{id}/channels/{id}/messages/delta
GET https://graph.microsoft.com/beta/teams/{id}/channels/{id}/messages/{id}/replies
POST https://graph.microsoft.com/v1.0/teams/{id}/archive
{
"shouldSetSpoSiteReadOnlyForMembers": true
}
图形和机器人:一起更好
带有机器人的团队应用可以主动向聊天或频道发送消息。它只能向对话发送消息。如果它有一对一聊天的正确信息，该机器人需要安装在用户所在的群聊或频道中，或者作为该用户的个人应用安装。当用户意识到他们时，机器人必须存储对他们引用。
借助 Graph，您可以为任何用户安装该应用，无论该应用之前安装在何处，您都可以主动发送消息。这在您需要可靠地传递大部分组织信息的情况下特别有用。
机器人只能读取消息，它们被@提到:
-
使用消息传递 API 来获取 bot 的附加信息
-
获取回复链中的根消息
-
检索邮件的所有回复
-
从聊天线程中获取以前的消息
微软图形工具包
Microsoft Graph Toolkit 是一组可重用的、框架无关的 web 组件，以及用于访问和使用 Microsoft Graph 的助手。这些组件开箱即用，功能齐全，具有内置的提供程序，可验证 Microsoft Graph 并从中获取数据。Microsoft Graph Toolkit 使在应用中使用 Microsoft Graph 变得很容易。
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>
微软图形工具包里有什么？
成分
Microsoft Graph Toolkit 包括一组 web 组件，用于由 Microsoft Graph APIs 支持的最常见的构建体验。
|成分
|
描述
|
| — | — |
| 注册 | 一个按钮和一个弹出控件，用于使用 Microsoft Identity platform 对用户进行身份验证，并在登录时显示用户的个人资料信息。 |
| 人 | 按照片、姓名和/或电子邮件地址显示一个人或联系人。 |
| 人 | 按照片或姓名首字母显示一组人或联系人。 |
| 议程 | 显示用户或组日历中的事件。 |
| 任务 | 显示并允许添加、删除、完成或编辑 Microsoft Planner 或 Microsoft 待办事项中的任务。 |
| 人物挑选器 | 提供搜索人员和呈现结果列表的能力。 |
| 个人卡 | 人员组件上使用的弹出按钮，用于显示有关用户的更多配置文件信息。 |
| 获取 | 直接在 HTML 中对任何 Microsoft Graph API 进行 GET 查询。 |
| 频道选择器 | 提供搜索 Microsoft 团队频道的功能，以便从呈现的结果列表中选择一个频道。 |
提供者
这些组件在与提供程序一起使用时效果最佳。提供者启用身份验证，并提供获取访问令牌的实现，以便调用 Microsoft Graph APIs。
|提供者
|
描述
|
| — | — |
| -你好 | 使用 MSAL.js 登录用户并获取令牌以用于 Microsoft Graph。 |
| 平台 | 验证并提供对 SharePoint web 部件内部组件的 Microsoft Graph 访问。 |
| 组 | 验证并提供对 Microsoft Teams 选项卡内组件的 Microsoft Graph 访问。 |
| 代理 | 通过将所有呼叫通过后端路由到 Microsoft Graph，允许使用后端身份验证。 |
| 习俗 | 创建自定义提供程序，以便使用应用的现有身份验证代码对 Microsoft Graph 进行身份验证和访问。 |
为什么要使用微软图形工具包？
Microsoft Graph Toolkit 使您能够快速轻松地将 Microsoft Graph 支持的常见体验集成到您自己的应用中。
缩短开发时间
连接到 Microsoft Graph APIs 并在看起来和感觉上都像 Microsoft 365 体验的 UI 中呈现数据的工作已经为您完成，不需要任何定制。
无处不在
所有组件都基于 web 标准，可以与任何现代浏览器和 web 框架(React、Angular、Vue 等)无缝协作。).
漂亮但灵活
这些组件被设计成外观和感觉都像微软 365 体验，但也可以使用 CSS 自定义属性和模板进行自定义。
Microsoft Graph Toolkit 中的样式组件
使用 CSS 自定义属性修改组件样式。每个组件都记录了一组 CSS 自定义属性，您可以使用这些属性来更改某些元素的外观。例如:
mgt-person {
--avatar-size: 34px;
}
除非提供 CSS 自定义属性，否则不能设置组件内部元素的样式。组件子元素托管在一个阴影 dom https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM 中。
Microsoft Graph 工具包中的模板
使用自定义模板修改组件的内容。所有 web 组件都支持基于
数据类型
每个组件可以有多个可以模板化的部分。
例如，在 mgt-agenda 组件中，您可以模板化单个事件、单个部分标题、加载视图、无数据视图等等。若要指示模板，请在模板上使用数据类型属性。
<mgt-agenda>
<template data-type="event"> </template>
</mgt-agenda>
如果没有指定数据类型，整个组件将被模板替换。出于同样的目的，您也可以使用 data type=“default”。
绑定数据
许多模板允许绑定作为数据上下文传递给模板的数据。例如，mgt-agenda 组件中的事件模板传递一个可以在模板中直接使用的{event}对象。为了扩展一个表达式，例如 event，主语使用双花括号。
<template data-type="event">
<div>{{event.subject}}</div>
</template>
这种格式也可以用在属性中:
<template data-type="event">
<a href="{{ event.onlineMeetingUrl }}" />
</template>
更改绑定语法
默认情况下，要展开表达式，可以使用双花括号({{expression}})。但是，对于已经使用了双花括号语法的环境，您可以更改此语法。例如，以下示例使用双方括号([[表达式]])。
import { TemplateHelper } from '@microsoft/mgt';
TemplateHelper.setBindingSyntax('[[', ']]');
数据上下文帮助程序属性
以下属性也可用于模板中的数据上下文对象。
|财产
|
描述
|
| — | — |
| $索引 | 使用数据循环时呈现的项的数字索引。 |
| $parent | 如果模板在另一个模板中呈现，此属性允许您访问父数据上下文。 |
以下示例显示了如何在 data-for 循环中使用$index 属性。
<mgt-person>
<mgt-person-card>
<template data-type="additional-details">
<span data-for="language in languages">
{{ language.displayName }}<span data-if="$index < languages.length - 1">, </span>
</span>
</template>
</mgt-person-card>
</mgt-person>
条件渲染
您可能只希望在基于数据上下文的条件为真或假时呈现元素。data-if 和 data-else 属性可以计算表达式，并且仅当它们为 true 或 false 时才进行呈现。
<mgt-person person-query="john doe">
<template>
<div data-if="person.image">
<img src="{{ person.image }}" />
</div>
<div data-else>
{{ person.displayName }}
</div>
</template>
</mgt-person>
环
有些情况下，数据上下文对象包含一个循环，您需要对数据进行循环。对于这种情况，请使用 data-for 属性。
<template data-type="event">
<ul>
<li data-for='attendee in event.attendees'>
{{ attendee.displayName }}
</li>
</ul>
</template>
模板上下文
在需要转换绑定中的数据、绑定到事件或者只是在模板的绑定中使用外部数据的情况下，模板支持绑定到外部数据上下文。有两种方法可以添加额外的模板上下文。
直接在组件上
每个组件都定义了 templateContext 属性，您可以使用该属性将附加数据传递给组件中的任何模板。
document.querySelector('mgt-agenda').templateContext = {
someObject: {},
formatDate: (date: Date) => { /* format date and return */ },
someEventHandler: (e) => { /* handleEvent */ }
}
templateContext 对象中的属性现在可用于模板中的绑定表达式。
全局适用于所有组件
TemplateHelper 类公开 globalContext 对象以添加应该对所有组件全局可用的数据或函数。
import { TemplateHelper } from '@microsoft/mgt';
TemplateHelper.globalContext.someObject = {};
TemplateHelper.globalContext.formatDate = (date: Date) => { /* format date and return */ };
TemplateHelper.globalContext.someEventHandler = (e) => { /* handleEvent */ }
转换器
在许多情况下，您可能希望在将数据显示在模板中之前对其进行转换。例如，您可能希望在呈现日期之前正确设置日期格式。在这些情况下，您可能需要使用模板转换器。
要使用模板转换器，首先需要定义一个执行转换的函数。例如，您可以定义一个函数来将事件对象转换为格式化的时间范围。
document.querySelector('mgt-agenda').templateContext = {
getTimeRange: (event) => {
// TODO: format a string from the event object as you wish
// timeRange = ...
return timeRange;
}
}
要在模板中使用转换器，就像在代码中使用函数一样使用它。
<template data-type="event">
<div>{{ getTimeRange(event) }}</div>
</template>
事件或属性绑定
data-props 属性允许您直接在模板中添加事件侦听器或设置属性值。
<template>
<button data-props="{{@click: myEvent, myProp: value}}"></button>
</template>
data-props 为您可能想要设置的每个属性或事件处理程序接受逗号分隔的字符串。若要添加事件处理程序，请在事件名称前加上@前缀。事件处理程序需要在元素的 templateContext 中可用。
document.querySelector('mgt-agenda').templateContext = {
someEventHandler: (e, context, root) => { /* handleEvent */ }
}
<template>
<button data-props="{{@click: someEventHandler}}"></button>
</template>
模板的事件参数、数据上下文和根元素作为参数传递给事件处理程序。
模板呈现事件
在某些情况下，您可能希望获得对呈现元素的引用。如果您想要自己处理内容的呈现，或者想要修改呈现的元素，这可能会很有用。
在这种情况下，您可以使用 templateRendered 事件，该事件在模板呈现后触发。
let agenda = document.querySelector('mgt-agenda');
agenda.addEventListener('templateRendered', (e) => { });
事件细节将包含对正在呈现的元素、数据上下文对象和模板类型的引用。
agenda.addEventListener('templateRendered', (e) => {
let templateType = e.detail.templateType;
let dataContext = e.detail.context;
let element = e.detail.element;
if (templateType === 'event') {
element.querySelector('.some-button').addEventListener('click', () => {});
}
});
微软图形工具包游乐场
要找到一个用于与 Microsoft Graph Toolkit 交互的工具，请尝试这个游戏场的组件: https://mgt.dev 。见图 8-3 。
图 8-3
图形工具包游乐场
Microsoft 图形浏览器
微软图形浏览器是一个探索图形 API 的工具，你可以在图 8-4 中看到我捕捉到的微软图形浏览器的截图。如您所见，该控制台为您提供了一个选项，您可以键入 API 或您正在查找的特定实体类型或对象的地址，然后您还需要使用有权查询该特定 API 的特定帐户登录，接下来它还会向您显示一些示例查询，您可以使用这些查询来了解 explorer。您可以通过 https://developer.microsoft.com/graph/graph-explorer 访问图形浏览器
以下示例显示了一个请求，该请求返回关于我的租户中的 joinedteams 的信息。
图 8-4
图形 API 浏览器
发送请求后会显示状态代码和消息，并且响应会显示在“响应预览”选项卡中。
邮递员
Postman 是一个 API 开发的协作平台，您可以使用它来构建和测试 Microsoft Graph API 请求。可以从 https://www.getpostman.com 下载邮差。要在 Postman 中与 Microsoft Graph 交互，可以使用 Microsoft Graph 集合。想了解更多关于邮差的信息，参考这里: https://learning.postman.com/
用于 Visual Studio 代码的 MSTeam 工具包
Microsoft Teams Toolkit 扩展使您能够直接从 Visual Studio 代码创建、调试和部署 Teams 应用。
先决条件:
-
Visual Studio 代码 v1.44 或更高版本
-
NodeJS 6 或更新版本
访问 MSTeam 工具包:- https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension 。见图 8-5 。
图 8-5
MSTeam 工具包
练习–使用 Microsoft Graph Toolkit 的 Microsoft 团队选项卡
在本练习中，您将学习 Microsoft 团队中的 Microsoft Graph 基础知识，以及如何使用 Microsoft Graph API 工具包、Microsoft Graph Explorer 和 AAD 权限实现。本练习使用 Microsoft Teams Toolkit for Visual Studio 代码进行开发。
在开始练习之前，请验证您的环境。在本练习中，我将使用下面提到的工具，这些工具安装在我的环境中:
-
Visual Studio 代码
-
MSTeam 工具包
-
恩格罗克账户
使用 Microsoft Graph API 工具包构建团队选项卡的步骤:
-
安装 Microsoft Teams Toolkit extension for Visual Studio 代码
-
建立 Microsoft 团队选项卡
- 实施微软图形工具包
-
登录组件:使用 Microsoft Identity platform 验证用户身份的登录按钮
-
团队提供者:MSTeam 标签，方便认证
-
人员组件:显示用户
-
- 实施微软图形工具包
-
为隧道设置 ngrok
-
在 Azure Active Directory 中注册你的应用
-
执行应用
-
在 MSTeam 中测试你的应用
启用 Microsoft Teams Toolkit Extension for Visual Studio 代码
在 Visual Studio 代码中，从左侧栏的“扩展”选项卡安装 Microsoft Teams Toolkit。参见图 8-6 。
图 8-6
Microsoft 团队工具包安装
建立 Microsoft 团队选项卡
步骤如下(图 8-7 ):
图 8-7
Microsoft 团队工具包登录
-
打开 Visual Studio 代码
-
在 Visual Studio 代码中选择左侧栏上的 Microsoft Teams 图标，然后登录
-
使用您的租户帐户登录
图 8-8
创建新应用
- 导航至“创建新团队应用”并点击输入新应用名称(图 8-8 )
图 8-9
选择新标签应用
-
按“回车”选择应用路径
-
选择选项卡创建 MSTeam 选项卡(图 8-9
图 8-10
选择个人应用
-
单击下一步按钮
-
选择个人选项卡(图 8-10
图 8-11
Microsoft 团队选项卡应用已创建
- 点击完成按钮创建团队应用(图 8-11
实施微软图形工具包
让我们来实现它:
-
在 src 文件夹下添加一个新文件，命名为 auth.js
-
然后在其中添加下面的代码:
-
在公共文件夹下添加一个新文件，文件名为auth.html
-
然后添加以下代码
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import { Provider, themes } from '@fluentui/react-northstar'
ReactDOM.render(
<Provider theme={themes.teams}>
<App />
</Provider>, document.getElementById('auth')
);
- 将下面的代码添加到**index.html、**内<体>标签中:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Auth Tab</title>
<meta name="viewport" content='width=device-width, initial-scale=1'>
<link rel="stylesheet" type='text/css' media="screen" href='main.css'>
<script src='main.js'></script>
</head>
<body>
<div id="auth"></div>
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<script>
mgt.TeamsProvider.handleAuth();
</script>
</body>
</html>
<div id="root"></div>
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<mgt-teams-provider client-id=" YOUR-CLIENT-ID" auth-popup-url="YOUR-NGROK-URL/auth.html"></mgt-teams-provider>
<mgt-login></mgt-login>
<mgt-person id="with-presence" person-query="me" person-card="hover" view="twoLines" show-presence></mgt-person>
为隧道设置 Ngrok
请遵循以下步骤:
图 8-12
配置 ngrok 身份验证令牌
-
前往 ngrok(
https://ngrok.com/)网站，使用您的租户 id 登录 -
下载 ngrok.exe 并完成设置和安装指南
-
从 ngrok 站点复制 Authtoken
-
将 Authtoken 保存在默认配置文件C:\ Users [用户名]\。恩罗克 >(图 8-12 )
图 8-13
Ngrok 创造了隧道
- 运行下面的脚本(图 8-13 )为
https://localhost:3000创建一个 ngrok 隧道
ngrok http -host-header="localhost:3000" 3000
图 8-14
在中更新 URL。环境文件
- 转到您的项目**。发布> Development.env** ，用 ngrok URL 替换 baseUrl0(图 8-14 )，
https://51d71653c83c.ngrok.io
图 8-15
更新索引文件中的 URL
-
转到你的项目public>index.html，用mgt-teams-provider>auth-popup-URL中的 ngrok URL
https://51d71653c83c.ngrok.io替换你的-NGROK-URL(图 8-15 )。 -
导航终端➤新终端
-
运行解决方案(图 8-16 )。默认团队选项卡将运行
https://localhost:3000
图 8-16
编译了应用
npm install
npm start
在 Azure Active Directory 中注册你的应用
现在我们注册应用:
图 8-17
应用注册
-
转到 Azure 门户，然后转到 Azure Active Directory ➤应用注册，并选择新建注册
-
Azure 动态门户网址-
https://aad.portal.azure.com/ -
注册
-
单击 Azure Active Directory
-
选择应用注册
-
然后点击新注册(图 8-17 )
图 8-18
注册申请
- 填写注册应用的详细信息:
-
名称:teamstabapp
-
支持的帐户类型:任何组织目录中的帐户(任何 Azure AD 目录-多租户)和个人 Microsoft 帐户(例如 Skype、Xbox)
-
网站的重定向 URL:
https://REPLACE_NGROKDOMAIN.ngrok.io/auth.html -
点击“注册”按钮注册一个应用(图 8-18
-
图 8-19
证明
- 进入认证选项卡和，通过选择访问令牌和 ID 令牌启用隐式授权(图 8-19 )
图 8-20
请求 API 权限
-
单击保存
-
进入 API 权限选项卡(图 8-20 ，选择添加权限➤微软图形➤委托权限，添加权限
-
日历。阅读
-
日历。读写
-
目录。AccessAsUser.All
-
目录。全部阅读
-
目录。ReadWrite.All
-
用户。阅读
-
用户。全部阅读
-
用户。ReadWrite.All
-
邮件。阅读
-
图 8-21
授予管理员许可
- 然后，选择授予管理员许可(图 8-21 )
图 8-22
应用客户端 ID
- 转到概览选项卡，复制应用(客户端)ID (图 8-22 )
图 8-23
更新索引文件中的客户端 ID
- 然后转到您的项目 public > index.html，在 mgt-teams-provider > auth-popup-URL 中将您的-CLIENT-ID 替换为 Application (client) ID(图 8-23 )。
在 MSTeam 中测试你的应用
是时候检验它了:
图 8-24
打开 App Studio
-
去MSTeam (
https://teams.microsoft.com) -
前往… ➤开 App 工作室(图 8-24 )
图 8-25
导入现有应用
- 选择清单编辑器并选择导入现有应用(图 8-25
图 8-26
导入 Development.zip 文件
- 选择项目文件夹➤下的 Development.zip。发布(图 8-26
图 8-27
安装应用进行测试
- 向下滚动选择测试分发，然后点击安装(图 8-27 )
图 8-28
添加应用进行测试
- 点击添加按钮安装应用(图 8-28
图 8-29
登录应用
- 点击使用 AAD 注册的应用登录进行认证(图 8-29
图 8-31
使用图形 API 工具包获取用户信息
图 8-30
同意 AAD
-
同意您创建的 AAD 注册应用(图 8-30
-
成功认证后，您的个人资料信息电子邮件和姓名应出现在您的选项卡中(图 8-31
在本练习中，您学习了如何在 Microsoft Teams for a tab 应用中使用 Microsoft Teams Toolkit for Visual Studio 代码和 Microsoft Graph API toolkit。
结论
在本章中，您已经学习了 Microsoft Teams Toolkit、Microsoft Graph API Toolkit 和 Graph API 的各种功能，并举例说明了我们可以在自己的定制应用中使用的功能。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和功能。
九、使用解决方案加速器构建团队应用
本章涵盖了使用解决方案加速器构建团队应用、使用 power 应用构建团队应用、power automate 与团队的集成、应用模板和团队移动平台可扩展性。今天，使用低代码方法来构建应用，而不是在 Visual Studio 等 IDE 中编写代码，您实际上可以将您的应用绘制成一幅图片，我们负责在后端生成您需要的代码，以使您的应用实际工作。最好的部分是不用写代码就能构建应用，并轻松地将它们添加为标签或将应用集成到团队中。
解决方案加速器概述
每个客户都希望应用开发和部署能够运行得更快，按照自己的节奏升级，同时保持对解决方案设计的完全控制，并定制已部署的服务来满足他们的需求。Microsoft Teams 是 Microsoft 365 中团队合作的中心，使人们能够一起工作，并将所有应用集成在一起，而无需重新开发。这就是为什么解决方案加速器是重用现有应用的最佳解决方案。如今，客户的工作方式发生了变化；所有人都在远程工作，需要在几分钟内快速访问信息。
电源平台概述
微软的 Power 平台为用户提供了创建加速业务发展的解决方案所需的工具。Microsoft Power Platform 是一个产品系列，在一个无缝集成的平台上提供创新的业务解决方案。Power Platform 提供了一个图形用户界面，该界面采用拖放组件和模型驱动逻辑(与传统的计算机编程相反)，使日常用户能够快速创建几乎不需要编码的应用(也称为低代码界面)。同时，它还为专业开发人员提供了一套强大的工具来创建高级定制应用。
Power Platform 支持的业务应用和流程自动化可以迅速成为组织应用生态系统的一部分。因此，企业管理员必须了解什么是 Power Platform，以及其公民开发人员如何利用其功能来连接到作为托管企业环境一部分的服务和数据。
图 9-1
动力平台
动力平台系列包含四个关键产品(参见图 9-1 ):
-
商业智能
-
电源应用
-
电力自动化
-
强大的虚拟代理
电源应用
Microsoft PowerApps 是一种将商业专业知识转化为定制应用的强大新方法。使用 PowerApps，您可以快速轻松地创建应用，而无需编写任何代码。PowerApps 有一个直观的设计界面，在您为团队或业务创建应用时全程指导您，您的应用可以与您已经拥有的数据集成，或者使用我们的业务线应用。Power Apps 是一套基于云的应用、服务、连接器和数据平台，为组织提供快速应用开发环境，以构建满足其业务需求的定制应用。通过使用 Power 应用，用户可以快速构建自定义业务应用，这些应用连接到存储在底层内置数据平台(称为公共数据服务)或各种在线和内部数据源(如 SharePoint、Excel、Office 365、Dynamics 365、SQL Server 等)中的业务数据。
电力自动化
Power Automate 是一项帮助用户为其应用和服务创建自动化工作流的服务，然后可以与 MSTeam 集成在一起工作。
Power BI(商业智能)
Power BI 是一款可视化工具，可帮助您创建令人惊叹的报告和仪表盘，帮助您深入了解您的业务并做出更好的业务决策。此外，您还可以将 Power BI 报告作为选项卡或应用集成到 MSTeam 中，以便协同工作并做出明智的决策。
超级虚拟代理
Power Virtual Agents 使我们能够轻松创建聊天机器人:也就是说，通过简单易用的图形界面轻松构建强大的转换机器人，并将对话机器人集成到您的 Microsoft Teams 渠道中。
PowerApps 集成
每个 PowerApps 都是团队应用
我们有三个选项可以让您的 PowerApps 成为团队应用:
-
选项 1:添加为频道选项卡
-
选项 2:在团队中嵌入应用
-
选项 3:上传到租户应用目录，并使用设置策略配置为个人应用
利益
PowerApps 在已经开展关键工作和协作的团队中可用，因此 IT 管理员可以通过将 PowerApps 发布到团队中的租户应用目录来以可扩展的方式分发 PowerApps，一线员工可以在团队移动中访问 power apps。
虽然我们还有很长的路要走，但是已经有很多很好的例子可以说明客户是如何利用团队中加载的 PowerApps 来运营他们的业务的——让我们在这里分享一些例子。
教育:塔科马公立学校
塔科马学区的助理校长——没有任何技术经验！–为教师构建了强大的应用来跟踪学生的阅读理解，并提供更有帮助的建议。图 9-2 引用了这一客户体验。
图 9-2
塔科马公立学校
电信:澳大利亚电信
澳大利亚电信提供商 Telstra 开发了一些工具，使其现场技术人员能够更有效地工作，例如访问知识文档、向领导层提交问题以及更好地记录损坏索赔。图 9-3 引用了这一点进行实施
图 9-3
Telstra 通信
非营利:美国红十字会
美国红十字会已经将他们的供应链数字化，允许更好地管理和跟踪重要资源。图 9-4 引用了这一点进行实施。
图 9-4
美国红十字会
练习 1–将 PowerApps 应用添加为渠道应用
以下是将 PowerApps 应用添加为频道选项卡所涉及的步骤:
图 9-5
SharePoint 列表
- 使用 SharePoint 创建数据源
-
创建包含名称、照片和描述的 SharePoint 列表“UserInfo ”(图 9-5 )
-
然后添加几条记录
-
图 9-12
在团队选项卡中添加了 PowerApps
-
Create a Canvas app in Power Apps (
https://powerapps.microsoft.com) (Figure 9-6):- 保存并发布应用
图 9-8
设计画布应用
-
添加标题
-
添加垂直图库并选择数据源作为 SharePoint 列表“UserInfo”
-
然后添加显示表单并选择数据源作为 SharePoint 列表’ UserInfo ’
-
添加画廊 1。在显示表单中选择项目属性(图 9-8
图 9-7
画布应用从空白
-
输入应用名称
-
选择数位板格式
-
点击创建按钮创建一个应用(图 9-7
图 9-6
创建高级应用
-
签到
-
单击创建➤从空白中选择画布应用
-
Add the Power Apps to Teams as tab (Figure 9-9)
- 单击〖保存〗按钮，将 Power Apps 作为标签添加(图 9-12 )
图 9-11
从现有应用中选择
-
单击添加按钮将高级应用添加到您的频道
-
选择“团队整合”应用(图 9-11
图 9-10
添加选项卡
- 搜索电源并选择 PowerApps(图 9-10 )
图 9-9
在频道中添加标签
-
前往团队(
https://teams.microsoft.com) -
选择团队，转到您的团队并选择渠道
-
点按频道中的+
在本练习中，您学习了如何将 Integrate Power Apps 用作 tab 应用的 Microsoft 团队中的团队。
练习 2–power apps 应用在团队中嵌入应用
您可以通过将您创建的应用直接嵌入到 Microsoft 团队来共享该应用。完成后，用户可以选择+将你的应用添加到你所在团队的任何团队频道或对话中。该应用在您团队的选项卡下显示为磁贴。此外，管理员可以上传应用，以便它在所有选项卡部分下显示您租户中的所有团队。
下载应用
我们开始吧。
图 9-13
PowerApps 应用列表
- 登录
https://powerapps.microsoft.com，然后在菜单中选择应用(图 9-13 )。
图 9-14
选择 PowerApps 应用
- 选择更多操作(…)的应用，然后选择添加到团队(图 9-14 )。
图 9-15
下载应用
- 在添加到团队面板中，选择下载。然后，Power Apps 将使用你已经在应用中设置的应用描述和徽标来生成你的团队清单文件(图 9-15 )。
将应用添加为个人应用
现在我们需要添加它。
图 9-16
上传自定义应用
-
要将应用添加为个人应用或任何频道或对话的标签，请选择左侧导航栏中的应用，然后选择上传自定义应用(图 9-16 )。
-
上传下载的 zip 文件
-
选择添加将应用添加为个人应用，或选择添加到团队将应用添加为现有频道或对话中的标签。
在本练习中，您学习了如何在 Microsoft Teams for a tab 应用中将 Power Apps 应用用作团队应用(即，将应用嵌入团队)。
电力自动化集成
Power Automate 是一项服务，可以帮助用户在他们喜爱的应用和服务之间创建自动化的工作流，以同步文件、结束通知、收集数据等。工作流，简称为 Power Automate 中的流程，由触发事件、条件和操作组成。
当触发事件发生时，流程开始。触发器可以包括创建记录、发生预定的活动，甚至是 Power Automate 移动应用的按钮点击。触发流程后，工作流逻辑会检查流程中定义的条件，对于任何为真的条件，都会执行与该条件相关联的操作。
这创建了使用 Power Automate 自动执行重复性工作任务的流程——并直接从您的 Microsoft 团队数据中触发。
练习 3–增强与团队的自动化集成
按照以下步骤在 Microsoft 团队中安装 Power Automate 应用。
图 9-17
选择团队应用
-
登录 Microsoft 团队。
-
点击团队导航栏左下方的应用图标(图 9-17 )。
图 9-18
搜索流程
-
搜索流程(图 9-18 )。
-
选择流程 app。
图 9-19
添加流量应用
-
选择并点击添加➤添加到团队按钮进行安装(图 9-19 )。
-
Power Automate 现已安装。
图 9-20
设置流量应用
- 选择团队和渠道(图 9-20 )。
图 9-21
将流量应用设置为选项卡
-
点击设置选项卡或设置机器人(图 9-21 )。
-
我选择了设置选项卡。
-
现在您可以从团队中创建一个流程。
此外，您可以设置为 bot 并从对话中访问。
图 9-22
将流添加为 bot
- 转到团队菜单中的(…)(图 9-22 )
图 9-23
将流应用设置为机器人
-
选择列表流
-
它显示我的所有流程(图 9-23
团队应用的应用模板
应用模板是面向 Microsoft 团队的生产就绪型应用，由社区成员开发并由 Microsoft 发布。这款应用的模板是开源的，可以在 GitHub 中获得。所有应用模板都包含详细的部署说明和截图。此外，微软测试并发布了这些应用，因此您可以将它们直接部署到您的组织租户，或者根据您的业务范围修改源代码。这些应用模板对于团队的大多数日常活动非常有用。无论你是开发人员还是 IT 专业人士，你都可以部署和使用这款应用，无需微软或社区成员的任何帮助。
什么是 App 模板？
今天，我们有 30 多个由微软提供的应用模板，这些模板是可在您的租户中部署的生产就绪型应用。所有这些应用都解决了大多数现实世界中的一般性问题。无需为您的应用额外付费。它们附带了功能文档、部署文档和完整的源代码。任何时候，你都可以根据你的 LOB 修改源代码(图 9-24 )。
图 9-24
应用模板定制能力
主要优势
即插即用体验
应用模板附带了带有详细文档的部署脚本，但不要求开发人员使用它来部署应用。
生产就绪代码
所有应用模板都遵循最佳实践、安全性、合规性和标准治理。此外，微软在发布之前测试了社区提交的应用模板。
可定制可扩展
他们提供完整的代码给你，也就是开源。代码和部署脚本都可以根据您的业务线进行定制和扩展。
详细的文档和支持
应用模板包含在端到端文档中，其中包含屏幕截图和解决方案架构、部署脚本以及配置步骤。如果您发现任何问题，可以在 GitHub 上提出。微软和社区成员可以提供帮助。
应用模板
截至 2020 年 9 月，我们有 30 多个可用的应用模板，并且根据社区提交的内容每天都在增加。此外，该社区在同一个应用模板中添加了新功能，因此，如果这些功能适合您的组织，您可以轻松升级它。
生产就绪 app 模板转到 https://aka.ms/teamsapptemplates 。它包含所有可用应用模板的概述，以及 GitHub repos 的链接(图 9-25 )。
图 9-25
应用模板列表
如何部署 App 模板？
部署应用模板非常容易，不需要任何开发人员。你只需要遵循文档。首先设置先决条件和配置，然后就可以进行一键部署了。要了解更多关于应用部署的信息，请阅读文档说明和架构图(图 9-26 )。
图 9-26
部署应用模板
常见问题？
-
这些应用安全吗？
应用模板符合安全和基础设施方面的建议最佳实践，所有社区提交的更改都经过审核，以确保持续符合要求。
-
将这些应用部署到我的租户需要什么？
所有应用模板都附有详细的部署说明，只需几分钟即可完成设置。您不需要开发人员部署和使用这些现成的应用模板。
-
大家可以部署这些 app 模板吗？
通常，组织有自己的审核流程来将应用上传到内部目录。拥有这些权限的任何人都可以部署这些应用。
-
这些应用需要付费吗？
这些应用模板可以免费使用，因为它们是开源的。他们可能会产生 Azure 消费费用，但有免费试用。
许可证
这个应用模板是根据麻省理工学院许可条款提供的。除了这些条款之外，使用本应用模板意味着您同意以下内容:
-
您有责任遵守内部或外部隐私和安全法规。
-
您应对所有与数据相关的事件负责。
-
Microsoft 不授予您使用任何 Microsoft 名称、徽标或商标的权利。
-
使用此模板并不保证团队应用商店接受您的应用。
团队移动平台可扩展性
团队平台从一开始就被设计成允许外部服务的特性看起来像是团队的本地特性，包括微软服务和来自第三方的服务。2019 年，微软发布了组织拥有自己的私有应用目录来发布 LOB 应用的能力。正如您稍后将听到的更多内容，我们有丰富的基于 Teams 平台的行业垂直解决方案可供选择(图 9-27 )。
图 9-27
移动平台[参考–MSDN]
Teams platform 由一组不同的功能组成，这些功能根据用户的交互方式分类到一个 2 x 2 的网格中:在个人或组上下文中，或者在对话界面或外部服务拥有的专用画布中。
连接器只是一种在外部系统发生某种情况时将卡片发布到对话中的方法。
破冰船机器人
破冰者机器人允许一个群体中的用户与其他成员联系和联网。在团队 app 模板中有: https://docs.microsoft.com/en-us/microsoftteams/platform/samples/app-templates#icebreaker 。它还利用了其他功能，如“会议日程的深层链接”或“聊天的深层链接”。参见图 9-28 。
图 9-28
破冰船应用移动视图[REF–MSDN]
赞美信息扩展
赞美信息扩展应用用于向人们发送赞美，它在移动平台上可用。通过认可人们的努力，你可以让他们更快乐、更有效率。团队移动平台完全支持该应用(图 9-29 )。
图 9-29
赞美信息扩展[REF–MSDN]
结论
在本章中，您已经通过示例了解了 Microsoft Teams 与应用模板、移动应用和 Power 平台集成的各种功能，现在我们可以在自己的应用中使用它们。在接下来的章节中，你将开始了解 MSTeam 应用的不同选项和功能。
扫一扫
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
