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

问题描述

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

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

，然后使用下面的代码将其传递到Webchat：

    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')
    );

解决方法

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

let { userid,username } = useParams();

或重命名为以下内​​容：

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

在documentation here中进一步说明：

useParams返回URL参数的键/值对的对象。用它来访问当前match.params中的<Route>。

或者您也可以将useLocation()钩用作：

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

阅读文档：

useLocation钩子返回代表当前URL的位置对象。您可以将其视为useState来考虑，只要URL更改，它就会返回一个新位置。

,

这在我的React项目中有效。您的实现方式有所不同，但这应该使您朝着正确的方向发展。您可以在列出的活动中看到用户name已更新为“ Steve”。就我而言，id不会更新，因为我正在使用令牌生成一个ID。通过Direct Line使用令牌生成ID时，它优先于通过Web聊天传递的任何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>
    )
  }
}

活动输出：

{
  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'
}

希望有帮助！