时间戳

首页 > 解决方案 > 使用 WebChat Hooks API 将用户名和用户 ID 参数传递给 WebChat

javascript - 使用 WebChat Hooks API 将用户名和用户 ID 参数传递给 WebChat

问题描述

我曾经能够使用 Webchat 上的以下代码从 URI传递Usernameand参数：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 上使用 ReachJS 时，它不再起作用。如何使用 Webchat Hooks API 传递此参数？我尝试使用以下代码指定它，但不起作用。

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

标签： javascriptreactjsreact-hooksbotframeworkweb-chat

解决方案

这适用于我的 React 项目。您的实施有所不同，但这应该使您朝着正确的方向前进。您可以在列出的活动中看到用户name已更新为“史蒂夫”。就我而言，id没有更新，因为我正在使用令牌生成一个 id。当使用令牌通过 Direct Line 生成 id 时，它优先于通过 Web Chat 传递的任何 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'
}

希望有帮助！

推荐阅读