Microsoft Teams中Hero Card按钮点击后跳转打开Angular应用的实现咨询

你可以根据实际需求选择「内嵌到Teams任务模块打开」或者「外部浏览器直接打开」两种方案，具体实现如下：

方案一：Angular应用内嵌到Teams任务模块打开（推荐） #

1. 后端处理task/fetch回调请求 #

用户点击Open Attachment按钮后，Teams会向你的消息扩展后端发送invoke类型的回调请求，你需要返回符合Teams规范的响应，指定要加载的Angular应用地址，返回结构示例：

{
  "task": {
    "type": "continue",
    "value": {
      "title": "文档查看",
      "url": "https://你的Angular应用访问地址?messageId=12345",
      "height": 800,
      "width": 1200
    }
  }
}

你可以在url后拼接自定义参数，方便Angular应用加载对应文档。

2. 更新Teams应用清单配置 #

你需要将Angular应用的域名添加到Teams应用manifest.json的validDomains数组中，否则Teams会阻止页面加载：

{
  "validDomains": [
    "你的Angular应用域名，例如doc-app.example.com"
  ]
}

修改完成后重新上传更新Teams应用即可生效。

3. Angular应用适配Teams环境 #

你的Angular应用需要接入Teams JS SDK才能正常在任务模块中运行：

• 首先安装SDK依赖：
  npm install @microsoft/teams-js
• 在应用入口组件中初始化SDK：

import * as microsoftTeams from "@microsoft/teams-js";

ngOnInit() {
  // 初始化Teams SDK
  microsoftTeams.initialize();
  // 按需调整任务模块展示尺寸
  microsoftTeams.tasks.setDimension({height: 800, width: 1200});

  // 从url参数中获取业务参数，加载对应文档
  const queryParams = new URLSearchParams(window.location.search);
  const messageId = queryParams.get('messageId');
}

如果需要主动关闭任务模块，调用microsoftTeams.tasks.submitTask()方法即可。

方案二：直接在外部浏览器打开Angular应用 #

如果不需要内嵌到Teams中，可以直接修改按钮配置，无需处理后端回调：

heroCard.content.buttons = [{
  type: 'openUrl',
  title: 'Open Attachment',
  value: 'https://你的Angular应用访问地址?messageId=12345'
}];

用户点击按钮后会直接唤起系统默认浏览器打开你的Angular应用。

内容的提问来源于stack exchange，提问作者GMAC