使用 WebChat Hooks 将用户名和 UserID 参数传递给 WebChat API

Question

我曾经能够在 Webchat 上使用以下代码从 URI 传递 Username 和 UserID 参数：

    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    var user = urlParams.get('userid')
    var usern = urlParams.get('username')

然后我使用以下代码将其传递到网络聊天：

    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: }),
        store,
        userID: user,
        username: usern,
        styleOptions
    }, document.getElementById('webchat'));
    document.querySelector('#webchat > *').focus();

现在，在我为 Botframework 使用通常的 Webchat 之前，它可以完美运行。当我开始在 Webchat 上使用 ReachJS 时它不再工作。如何使用 Webchat Hooks API 传递此参数？我尝试使用以下代码指定它但不起作用。

ReactDOM.render(
      <Composer directLine={window.WebChat.createDirectLine({ token: })}>
        <BasicWebChat />
        <SendMessageOnConnect />
        <user />
        <usern />
      </Composer>,
      document.getElementById('webchat')
    );

Answer 1

您可以尝试使用 useParams() 钩子代替：

let { userid, username } = useParams();

或重命名为：

let { userid: user, username: usern } = useParams();

进一步阅读 documentation here，其中指出：

useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.

或者您也可以使用 useLocation() 挂钩：

const { search } = useLocation();
const { userid, username } = search;

阅读文档：

The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.

Answer 2

这适用于我的 React 项目。你的实现是不同的，但这应该让你朝着正确的方向前进。您可以在列出的 activity 中看到用户 name 已更新为 'Steve'。在我的例子中，id 没有更新，因为我正在用令牌生成一个 id。当使用令牌通过 Direct Line 生成 ID 时，它优先于通过网络聊天传递的任何 ID。

import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';

export default class WebChatView extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      user: '',
      usern: ''
    };
  }

  componentDidMount() {
    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    var user = urlParams.get('userid');
    var usern = urlParams.get('username');
    this.setState({ user: user, usern: usern })
    this.fetchToken();
  }
  
  async fetchToken() {
    const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
    const { token } = await res.json();

    this.setState(() => ({
      directLine: createDirectLine({ token: token })
    }));
  }

  render() {
    return (
      this.state.directLine ?
        <ReactWebChat
          directLine={this.state.directLine}
          userID={this.state.user}
          username={this.state.usern}
        />
        :
        <div>Connecting to bot&hellip;</div>
    )
  }
}

Activity 输出：

{
  type: 'message',
  id: '4wpfp......-f|0000002',
  timestamp: 2020-09-02T21:39:01.197Z,
  serviceUrl: 'https://directline.botframework.com/',
  channelId: 'directline',
  from: { id: 'dl_15990824712200.ruhpue7p1j', name: 'Steve', role: 'user' },
  conversation: { id: '4wpfp......-f' },
  recipient: { id: 'botberg@QaeuoeEamLg', name: 'Bot' },      
  textFormat: 'plain',
  locale: 'en-US',
  text: 'Hi',
  entities: [
    {
      type: 'ClientCapabilities',
      requiresBotState: true,
      supportsListening: true,
      supportsTts: true
    }
  ],
  channelData: {
    clientActivityID: '1599082740974mexnvax1jq',
    clientTimestamp: '2020-09-02T21:39:00.974Z'
  },
  rawTimestamp: '2020-09-02T21:39:01.1971653Z',
  callerId: 'urn:botframework:azure'
}

希望得到帮助！

使用 WebChat Hooks 将用户名和 UserID 参数传递给 WebChat API

Passing Username and UserID Parameter to WebChat using WebChat Hooks API

javascript

reactjs

web-chat

botframework

react-hooks