使用 javascript/reactjs 从 MS 团队获取我的用户名

Question

我正在尝试从上下文中获取我的 Teams userPrincipalname 并在获取中使用它 URL。不幸的是，它实际上并没有将我的 userPrincipalName 保存在 {userPrincipalName} 中，而是包含：[object Object]

正如我在 URL 中看到的，它正在尝试获取：http://localhost/openims/json.php?function=getDocuments&input=%22[object%20Object]%22

URLreturns以下：{"name":"[object Object]","age":26,"city":"London"}

我做错了什么？

代码：

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(){
    microsoftTeams.getContext((context, error) => {
      this.setState({
        context: context
      });
    });
  }

  componentDidMount() {
    const { userPrincipalName } = this.state.context;
    fetch('http://localhost/openims/json.php?function=getDocuments&input='+'"'+ {userPrincipalName} +'"')
      .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

我看到的问题是您需要确保：

microsoftTeams.getContext 需要一个回调，所以 promisify 它然后你在它上面使用 then（就像任何 promise）
获得 context 后，使用 context.userPrincipalName
最终的获取请求（到 /openims/json.php 端点）仅在上述所有情况发生后才会发生

应该类似于以下内容（尽管将您的组件重写为功能组件将允许您使用 React 挂钩并更好地处理所需的任何清理）。


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 });
        const queryParameters = new URLSearchParams({
          function: "getDocuments",
          input: `"${context.userPrincipalName}"`,
        });
        console.log(`userPrincipalName is '${context.userPrincipalName}'`);
        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 2

你能试试下面的工作代码吗？

import React from 'react';
import * as microsoftTeams from "@microsoft/teams-js";
class Tab extends React.Component {

  constructor(props){

    super(props)

    this.state = {

      context: {}

    }

  }



  //React lifecycle method that gets called once a component has finished mounting

  //Learn more: https://reactjs.org/docs/react-component.html#componentdidmount

  componentDidMount(){

    // Get the user context from Teams and set it in the state

    microsoftTeams.getContext((context, error) => {

      this.setState({

        context: context

      });

    });

    // Next steps: Error handling using the error object

  }



  render() {



      let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";



      return (

      <div>

        <h3>Hello World!</h3>

        <h1>Congratulations {userName}!</h1> <h3>This is the tab you made :-)</h3>

      </div>

      );

  }

}

export default Tab;

使用 javascript/reactjs 从 MS 团队获取我的用户名

Getting my userName from MS teams with javascript/reactjs

javascript

reactjs

microsoft-teams