Question

我目前正在为 MS Teams 制作一个自定义团队应用程序，它从我的本地主机获取一些数据（只是字符串）。但是，虽然我的应用程序在团队的浏览器版本中运行良好，但它在团队应用程序中不起作用。我的自定义标签中甚至没有显示任何内容：

但是，在visual studio代码调试窗口的浏览器版本中：

有谁知道为什么它只能在 Visual Studio 代码调试窗口中工作？以及如何让它在浏览器版本和 Teams 应用程序中都能正常工作？

我的应用程序代码：

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  componentDidMount() {
    new Promise((resolve) => {
      microsoftTeams.getContext(resolve);
    })
      .then((context) => {
        this.setState({ context });
        //var inputs {}
        const queryParameters = new URLSearchParams({ function: "getDocuments", input: '"'+ context.userPrincipalName + '"',});
        console.log(`userPrincipalName is '${context.userPrincipalName}'`);
        console.log(`teamName is '${context.teamName}'`);
        console.log(`http://localhost/openims/json.php?${queryParameters}`);
        return fetch(`http://localhost/openims/json.php?${queryParameters}`);
      })
      .then((res) => res.json())
      .then((result) => this.setState({ ...result }))
      .catch((error) => this.setState({ error }))
      .finally(() => this.setState({ isLoaded: true }));
  }
  
  render() {  
    const { error, isLoaded, name, age, city } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (     
        <ul>
          <li>
            {name} {age} {city}
          </li>
        </ul>       
      );
    }
  }

}
export default Tab;

Answer 1

您提到您在 localhost 上工作，但 Teams 不会显示来自本地地址的任何内容，即使它在 https 上受到保护。这是出于安全原因。可以在本地运行站点，但您需要使用 Internet 隧道服务，以便在开发过程中使用完全合格的 https Internet 地址公开本地地址。执行此操作的最常用方法（您会经常在文档、示例等中看到它）是使用 Ngrok 工具，该工具提供免费版本。在 https://ngrok.com/

上查看更多信息

自定义团队应用程序选项卡仅在浏览器中工作

1 个答案: