Teams连接器Save按钮失效，控制台报内部JavaScript错误

问题情况 #

我在构建Teams连接器的配置保存页面时，点击Save按钮毫无反应，还触发了Teams内部的JavaScript错误，浏览器控制台返回500状态码。已经把代码简化到仅执行SDK初始化和设置按钮有效状态，使用的是最新稳定版Teams JS SDK，manifest文件是从Connector Dashboard下载后删除无效内容、升级schema版本得到的，UUID与有效域名均匹配。

简化后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://res.cdn.office.net/teams-js/2.7.1/js/MicrosoftTeams.min.js" crossorigin="anonymous">
    </script>
  </head>
  <body>
    <p>Testing 6</p>

    <script>
      async function init() {
        await microsoftTeams.app.initialize();
        microsoftTeams.pages.config.setValidityState(true);
      }

      init();
    </script>
  </body>
</html>

控制台错误信息 #

2023-01-25T03:00:00.927Z Received error from connectors {
  "seq":1674609016862,
  "timestamp":1674613638241,
  "flightSettings":{
    "Name":"ConnectorFrontEndSettings",
    "AriaSDKToken":"d12...",
    "SPAEnabled":true,
    "ClassificationFilterEnabled":true,
    "ClientRoutingEnabled":true,
    "EnableYammerGroupOption":true,
    "EnableFadeMessage":false,
    "EnableDomainBasedOwaConnectorList":false,
    "EnableDomainBasedTeamsConnectorList":false,
    "DevPortalSPAEnabled":true,
    "ShowHomeNavigationButtonOnConfigurationPage":false,
    "DisableConnectToO365InlineDeleteFeedbackPage":true,
    "RemoveAnchorHeader":true
  },
  "status":500,
  "clientType":"SkypeSpaces",
  "connectorType":"92a...",
  "name":"handleMessageError"
}

修正后的Manifest文件 #

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.15/MicrosoftTeams.schema.json",
  "manifestVersion": "1.15",
  "id": "2ac21268...",
  "version": "1.0.0",
  "packageName": "com.Simple I/O (Development 3)",
  "developer": {
    "name": "Developer",
    "websiteUrl": "https://3821-68-69-235-13.ngrok.io",
    "privacyUrl": "https://3821-68-69-235-13.ngrok.io",
    "termsOfUseUrl": "https://3821-68-69-235-13.ngrok.io"
  },
  "description": {
    "full": "Simple I/O (Development 3)",
    "short": "Simple I/O (Development 3)"
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "connectors": [
    {
      "connectorId": "2ac21268...",
      "scopes": [
        "team"
      ],
      "configurationUrl": "https://3821-68-69-235-13.ngrok.io/teams/connector"
    }
  ],
  "name": {
    "full": "Simple I/O (Development 3)",
    "short": "Simple I/O (Development 3)"
  },
  "accentColor": "#FFFFFF",
  "validDomains": [
    "3821-68-69-235-13.ngrok.io"
  ]
}

排查方向和解决办法 #

• 确认Connector Dashboard中的连接器已完成注册，connectorId与manifest中的connectorId、id完全一致，UUID格式无错误（无多余或缺失字符）。
• 检查配置页面后端接口：点击Save时Teams会向configurationUrl发送POST请求，需确保该接口能正常返回200状态码，并包含configurationId等必要响应参数。
• 尝试降级SDK版本：虽然使用2.7.1稳定版，但部分场景下新版SDK与旧版Teams客户端存在兼容性问题，可切换至2.6.x版本测试。
• 验证ValidDomains配置：当前配置正确（仅填写域名，不带https://前缀），但需确认ngrok隧道稳定，无SSL证书异常。
• 检查权限范围：manifest中scopes设为team，需确保测试团队有权限添加该连接器，无租户级别的权限限制。
• 添加错误捕获排查初始化问题：修改JS代码如下，查看是否存在隐藏初始化错误：

async function init() {
  try {
    await microsoftTeams.app.initialize();
    microsoftTeams.pages.config.setValidityState(true);
  } catch (error) {
    console.error("初始化失败:", error);
  }
}
init();

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