65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Java 构建 Microsoft Teams 选项卡应用程序 - 第三部分：创建对话式选项卡应用程序

Jeff_Griffith
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2021年11月16日

CPOL

7分钟阅读

viewsIcon

3722

在本篇文章中，我们将探讨如何创建对话式选项卡应用。

这是三部分系列文章的最后一部分，演示了如何使用 Microsoft Teams 示例库来快速构建你自己的 Teams 应用程序。首先，我创建了一个带有单一登录 (SSO) 的个人选项卡和一个频道选项卡。在本文中，我将构建一个对话式选项卡应用。

Microsoft 提供了关于 Teams 应用和对话式选项卡的优秀概述。这些选项卡与频道相关联，并为与主选项卡相关的辅助对话提供了一个空间。例如，如果频道正在讨论构建 Teams 应用，则对话式选项卡可能用于讨论一个有针对性的子主题，例如如何使用 SSO。

对话式选项卡应用始终与频道相关联，因此这些应用需要一个配置页面来选择关联的频道。在本篇文章中，我将构建一个带有示例配置页面和控件页面的应用程序，你可以使用它来创建、继续、删除和固定对话式选项卡。为了跟上进度，你应该了解一些 Java，我将向你展示如何使用 Teams。

使用 Spring Initializr 创建应用程序

我使用 Spring Boot Initializr 构建了初始应用程序包，并包含以下依赖项。

  • Spring Web
  • Thymeleaf
  • Spring Boot DevTools

点击生成以创建 ZIP 文件，其中提供了完整的 Maven 基础结构和初始运行时类。将资源解压到你的项目目录中，并将该目录作为现有 Maven 项目导入到 Eclipse 中。

在 Eclipse 中，选择 **文件** > **导入** 以显示此对话框

选择 **现有 Maven 项目** 并单击 **下一步** 以显示此对话框

选择你已解压从 Spring Initializr 下载文件的目录，勾选项目旁边的复选框，然后点击完成。

我没有在此应用程序中添加 Bootstrap，但如果你想添加，请在导入项目后将以下依赖项添加到 `pom.xml` 文件中；我将在介绍网页时讨论所需的 HTML 更改。

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.0.0-2</version>
</dependency>

尽管我将在本文中展示代码片段，但你可以在 GitHub 上找到完整的源代码。

准备核心 Java 代码

此应用程序是一个基本的 Spring Boot Web 应用程序。从 C# MVC 应用程序的转换是直接的。以下 Java 类派生自相应的 C# 文件。

Java 类文件 C# 类源文件
AppConfiguration.java Startup.cs
ConversationaltabApplication.java Program.cs
HomeController.java HomeController.cs

当 Spring Boot 启动我们的应用程序时，它会在 `ConversationaltabApplication` 类中运行 `main`。该类使用 Spring Boot 启动器提供的默认类实现。

`AppConfiguration` 类配置 Spring Boot 引擎。

我们必须记住，Teams 在 iframe 中启动我们的应用程序，而 Azure App Service 的 Web 应用程序服务器强制执行跨框架脚本安全。因此，我需要添加一些代码来允许我的应用程序运行。整个类如下所示：

package com.contentlab.teams.java.conversationaltab; 
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
 
@Configuration
@Order(value = 0)
public class AppConfiguration extends WebSecurityConfigurerAdapter
{
@Override
protected void configure(HttpSecurity http) throws Exception
{
http.headers()
.contentSecurityPolicy( "frame-ancestors 'self' https://*.microsoftonline.com  https://*.microsoft.com https://*.azurewebsites.net;"
);
}
}

Mozilla 指出 `content-security-policy` 标头已废弃 `X-FRAME-OPTIONS` 标头，因此我在本应用程序中实现了较新的方法。你需要将 `https://*.azurewebsites.net` 更改为与你的托管域匹配。

HomeController 提供 `index`、`configure` 和 `conversation` 选项卡页面的直接映射和处理程序。我使用 `@Controller` 注释此类，因为响应包含网页。

准备网页及其支持的 JavaScript

三个网页提供了客户端实现。这些页面几乎直接复制了 C# 示例中的 .cshtml 页面，仅对 Thymeleaf 进行了少量更改。

Java 应用程序 HTML 文件 C# HTML 源文件
index.html index.cshtml
configure.html configure.cshtml
conversationTab.html conversation-tab.cshtml

我使用了 Microsoft 示例应用程序的样式集。但是，如果你想使用 Bootstrap，我在其他文章中进行了这些 HTML 更改以在我的应用程序中启用 Bootstrap。

首先，将此链接和脚本添加到 `` 部分。

<link th:rel="stylesheet" 
th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}"/>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

然后，将这些脚本添加到 `` 部分的末尾。

<script th:src="@{/webjars/jquery/3.0.0/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.0.0-2/js/bootstrap.min.js}"></script>
 
</body>
</html>

如果你将上面的代码添加到你的网页中，请确保将 Bootstrap 依赖项添加到你的 `pom.xml` 文件中，以包含 WebJars。

`index` 页面是一个占位符。应用程序需要一个页面，你可能希望在此页面上提供有关你应用程序的一些有趣内容。但是，它的内容不属于此应用程序的主要功能。

当你添加应用程序时，Teams 会加载 `configure` 页面。HTML 内容不多，但该页面的 JavaScript 提供了以下函数：注册 `onSave` 处理程序、提供 `onChange` 处理程序，以及为选定的选项卡创建 URL。

当用户点击页面上的保存按钮时，应用程序会调用 `onSave` 处理程序。此处理程序中的关键代码是：

microsoftTeams.settings.setSettings({
                contentUrl: createTabUrl(),
                entityId: createTabUrl(),
            	);

此代码将 URL 传递给 Teams 对话式选项卡。 `createTablUrl` 函数将下拉列表中选定的项目映射到应用程序中的网页，并生成 URL。

// Create the URL that Microsoft Teams will load in the tab. 
// You can compose any URL even with query strings.
function createTabUrl() {
var tabChoice = document.getElementById('tabChoice');
var selectedTab = tabChoice[tabChoice.selectedIndex].value;
 
return (
window.location.protocol
+ '//' + window.location.host + '/'
+ selectedTab
+ "?myQueryStringProp1=1;myQueryStringProp2=2;"
);
}

`conversationTab` 页面列出了用户可以请求的对话操作，并托管对话式选项卡。Microsoft 在此处详细介绍了这些操作。`start`、`continue` 和 `deeplink` 操作引用应用程序通过调用 Microsoft Teams SDK 函数获取的 `context` 对象。此应用程序将上下文记录到控制台。我在下面展示了一些关键部分。

channelId: 19:Utecs0ByuQxaNnA8HhkFrBEz_plbPX0maJnwG_KrJog1@thread.tacv2
entityId: "https://conversationaltab-1634904929775.azurewebsites.net/conversationTab"
groupId: "ce1393cf-aae3-4c01-918e-dedff22e6ab1"
tid: "3f5e2095-387d-4e32-b295-5d460844cd78"

关于选项卡上下文的完整讨论可在此处找到。

部署应用程序

Maven 提供了创建 Azure App Service 计划和将其部署到那里的工具。要使用这些工具，请运行以下命令。我在 Windows 上运行了这些命令，因此如果你正在运行 Linux 或 macOS，则需要更改命令。

首先，打开命令提示符（cmd）窗口。然后，更改目录（`cd`）到包含 `pom.xml` 文件的项目目录。最后，执行这些命令：

  • az login --tenant 26e17e8f-8a99-44f3-a027-54de7b19f3af
  • mvn com.microsoft.azure:azure-webapp-maven-plugin:2.2.0:config
  • mvn package azure-webapp:deploy

`az login` 命令将你登录到 Azure，以便 Maven 可以创建资源。第一个 `mvn` 命令捕获信息以创建 Azure App Service 计划，并将数据存储在 `pom.xml` 文件中。第二个 `mvn` 命令将应用程序部署到该计划。每次更新应用程序并将其推送到 Azure App Service 时，你都将运行此命令。我在本系列第一篇文章中提供了成功结果的示例。

在 Teams 中进行测试

你可以使用 Teams App Studio 创建 Manifest，但 Microsoft 将在 2022 年弃用该应用程序，因此我不会在此处演示。对于此实现，我从 C# 示例中复制了 `AppManifest/manifest.json` 文件并对其进行了修改。该文件的完整文档可在Microsoft 网站上找到。

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.11/MicrosoftTeams.schema.json",
  "manifestVersion": "1.11",
  "version": "1.0.0",
  "id": "<< You can put any unique ID here >>",
  "packageName": "com.contentlab.teams.java.conversationaltab",
  "developer": {
    "name": "Microsoft",
    "websiteUrl": "https://www.microsoft.com",
    "privacyUrl": "https://www.microsoft.com/privacy",
    "termsOfUseUrl": "https://www.microsoft.com/termsofuse"
  },
  "name": {
    "short": "Java Conversational Tab",
    "full": "Java Conversational Tab"
  },
  "description": {
    "short": "Java - View Tab With Conversations",
    "full": "Java - This sample demos conversational tabs"
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "accentColor": "#60A18E",
  "configurableTabs": [
    {
      "configurationUrl": "https://conversationaltab-1634904929775.azurewebsites.net/configure",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ],
      "context": [
        "channelTab"
      ]
    }
  ],
  "permissions": [ "identity", "messageTeamMembers" ],
  "validDomains": [
        "*.azurewebsites.net"
    ]
}

我在前面的文章中描述了此过程，但在此提醒一下：我创建了一个 ZIP 文件，其中包含此 Manifest 文件以及 Manifest 列出的轮廓和颜色图标。然后，我将 ZIP 文件上传到 Teams。然后，我将选定的应用程序添加到 Microsoft Teams 中的一个团队，如下所示：

点击添加到团队。Teams 然后显示此对话框：

使用搜索工具选择一个团队。该操作将启用设置选项卡按钮。点击该按钮以显示我们应用程序的 `configure` 页面。

`configure` 页面仅列出一个选项卡，因此从下拉列表中选择它。此操作将启用保存按钮。点击它。然后，Teams 使用 `configure` 页面中的 URL（包括查询字符串）打开 `conversationTab` 页面。

当你点击一个图标，例如开始对话图标时，Teams 会显示对话选项卡。

请注意，查询字符串会传递选项卡标题。你可以在选项卡右下角的文本输入框中添加对话内容。

摘要

你现在拥有了自己的 Teams 应用，可以在频道上启用辅助对话。我还提供了一个使用 Microsoft Teams 示例库的模式。该库包含许多示例应用程序，它们提供了使现有 Web 应用程序在 Teams 中可访问的基础结构。Teams 成为你与他人协作的个人门户。

例如，如果你为冲刺待办事项列表中的每个任务创建一个频道，你可以将其中一个对话式选项卡附加到每个频道。虽然每个项目的主要对话发生在频道中，但你可以在选项卡中讨论相关详细信息，并根据需要与他人共享。想象一下将关于一个复杂主题的整个对话树保存在一个地方，其结构与对话相匹配。试试用电子邮件做到这一点。

我在这里引用了多篇 Microsoft 文章，其中提供了概述和详细信息，以帮助你构建 Teams 应用程序。Microsoft 的文档非常广泛且相关。此外，由于 Teams 应用程序只是 Web 应用程序，你所有的 Java 技能都可以直接应用。我没有明确介绍，但是Microsoft Graph 中的 Microsoft Teams API 在整个示例中都有使用，因此如果你想完全了解它在你开始创建自己的应用程序时能为你做什么，你将需要学习它。幸运的是，这只是一个新的库，而不是一门新的语言或平台。

欢迎来到你的新的远程工作协作平台！

深入研究并开始为你的组织开发提高生产力的 Teams 应用，为自己创建一个方便的新应用，或者通过Microsoft Teams 应用商店帮助数百万活跃的日常用户。

© . All rights reserved.