带有 URL 的 Microsoft Teams 任务模块不适用于外部 URL答案

【问题标题】：Microsoft Teams task module with URL not working for external url带有 URL 的 Microsoft Teams 任务模块不适用于外部 URL
【发布时间】：2021-10-03 22:19:50
【问题描述】：

trigger 将显示网页的任务模块。我所能得到的只是一个带有标题的空任务模块，而指定的高度和宽度没有显示 URL。

我想从 api 重定向 url。但是 api 给出了一个 url 但没有重定向

           let requestUrl = await getRedirectUrlForSubmitAction(tokenResponse) ===> api call to get the url
                const response: MessagingExtensionActionResponse = <MessagingExtensionActionResponse>{
                    task: {
                        type: "continue",
                        value: {
                            title: "Send recognition",
                            url: `${request.data.value}`, //url from api call
                            height: "large"
                        }
                    }
                };
 return Promise.resolve(response);

请检查以下代码以了解外部 url 重定向

<html>

<head>
    <title>Redirecting</title>
    <script src='https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js'></script>
</head>

<body>
    <div id='app'>
        <header style="display: flex; justify-content: center;align-items: center; font-size: 1rem;">
            <h1>Redirecting <em>....</em></h1>
        </header>
    </div>
    <script type="text/javascript">
        function login() {
            microsoftTeams.initialize();
            if (window.location.href.includes("redirectUrl.action")) {
                let token = localStorage.getItem("appToken");
                let urlStr = window.location.href.split('?url=')[1]
                fetch(`${urlStr}`, {
                    method: 'GET',
                    headers: new Headers({
                        "content-type": "application/json",
                        "originated": "teams",
                        "post-type": "ajax",
                        "outlookauth": `${token}`
                    }),
                })
                    .then(res => res.json())
                    .then(
                        (result) => {
                            console.log("result", result);
                            location.href = result.url
                   
                            //return result.url
                        },
                        (error) => {
                            console.log("Error", error);
                        }
                    )
            } else {
                //balance
                const host = window.location.href.split('&host=')[1].split('&')[0]
                const appcode = window.location.href.split('&appCode=')[1]
                const token = localStorage.getItem("appToken");
                const urlType = window.location.href.split('?url=')[1]
                const urlStr = `https://${host}/${appcode}/mobileapp/teams/teamsShopRedirectUrl.action?${urlType}`
                fetch(`${urlStr}`, {
                    method: 'GET',
                    headers: new Headers({
                        "content-type": "application/json",
                        "originated": "teams",
                        "post-type": "ajax",
                        "outlookauth": `${token}`
                    }),
                })
                    .then(res => res.json())
                    .then(
                        (result) => {
                            window.location.href = result.url
                        },
                        (error) => {
                            console.log("Error", error);
                        }
                    )
            }
        }
        window.onload = login();
    </script>
</body>

</html>

清单文件

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.8",
  "id": "{{APPLICATION_ID}}",
  "version": "{{VERSION}}",
  "packageName": "{{PACKAGE_NAME}}",
  "developer": {
    "name": "name",
    "websiteUrl": "https://{{HOSTNAME}}/now",
    "privacyUrl": "https://{{HOSTNAME}}/now/privacy.html",
    "termsOfUseUrl": "https://{{HOSTNAME}}/now/tou.html"
  },
  "name": {
    "short": "Now",
    "full": "Now"
  },
  "description": {
    "short": "for Teams",
    "full": "."
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#FFFFFF",
  "configurableTabs": [],
  "staticTabs": [],
  "bots": [
    {
      "botId": "{{MICROSOFT_APP_ID}}",
      "needsChannelSelector": true,
      "isNotificationOnly": false,
      "scopes": [
        "team",
        "personal",
        "groupchat"
      ],
      "commandLists": [
        {
          "scopes": [
            "team",
            "personal"
          ],
          "commands": [
            {
              "title": "test1",
              "description": "test1"
            },
            {
              "title": "test2",
              "description": "test2 "
            }
          ]
        }
      ],
      "supportsFiles": true,
      "supportsCalling": true,
      "supportsVideo": true
    }
  ],
  "connectors": [],
  "composeExtensions": [
    {
      "botId": "{{MICROSOFT_APP_ID}}",
      "canUpdateConfiguration": true,
      "messageHandlers": [
        {
          "type": "link",
          "value": {
            "domains": [
              "{{HOSTNAME}}",
              "avidanpprd.performnet.com",
              "youtube.com"
            ]
          }
        }
      ],
      "commands": [
        {
          "id": "MessageExtension",
          "title": "title",
          "description": "Add a clever description here",
          "initialRun": true,
          "type": "action",
          "context": [
            "compose"
          ],
          "fetchTask": true
        }
      ]
    }
  ],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "{{HOSTNAME}}",
    "avidanpprd.performnet.com",
    "youtube.com"
  ],
  "showLoadingIndicator": true,
  "isFullScreen": false
}

【问题讨论】：

添加通配符 (*) 域，例如：*.performnet.com 或 *.avidanpprd.performnet.com

标签： node.js botframework chatbot microsoft-teams adaptive-cards

【解决方案1】：

这可能是多种因素的结合：

您需要确保您显示的网站在您的 Teams 应用清单中列为“安全”域。我认为您需要清单根级别的 messageHandlers > value > domain 部分和 validDomains 部分中的某些内容。
但是，根据您尝试嵌入的内容，它可能无法正常工作，因为外部站点必须具有一些基本的 Teams 集成。见this heading，上面写着：

要在 Teams 中显示您的页面，您必须包含 Microsoft Teams JavaScript 客户端 SDK，并在页面加载后包含对 microsoftTeams.initialize() 的调用。

因此，如果这是您无法控制的外部网站，您可能需要在任务模块中拥有自己的页面，该页面只是在外部网站中的 iframe。

【讨论】：

请检查此链接https://i.stack.imgur.com/ZiikV.png，即使添加了validDomains以及messageHandlers，同样的问题仍然存在。
您是否检查了我上面的第 (2) 点？远程网页是否有 Teams js 库？
请检查上面的代码我已经在这里添加了html文件
您的第二个脚本标签看起来不正确。它也不应该有 src="..."
我想你可以在浏览器中浏览页面好吗？并且没有错误？

【解决方案2】：

如果 URL 不支持 iframe 嵌入，则可能会出现此问题。

为了帮助您，您可以参考 sample 并尝试在 iframe 中绑定 URL，如下所示。

<iframe width="700" height="700" src="https://www.example.com/embed/QPSaLnaU" allow="autoplay; encrypted-media"></iframe>

【讨论】：

【解决方案3】：

我最近一直在做类似的事情。

我有一个消息扩展程序（使用自适应卡片构建），并且在单击其中一个按钮时，我想触发 Upload Document 功能。不幸的是，自适应卡不提供。

因此，我构建了一个单独的 angular 网页，它将充当上传应用程序。

注意：网页的域名应该正确添加到manifest文件的validDomains下。

    "validDomains": [
        "*.example.com",
    ],

点击消息扩展（NodeJS）中的按钮：

...

return {
   task: {
     type: 'continue',
     value: {
       height: 400,
       width: 400,
       title: 'Task module WebView',
       url: `https://show.example.com`
     }
   }
};

【讨论】：