使用UserID钩子API将用户名和WebChat参数传递给WebChat
提问于 2020-08-27 04:50:25
我以前可以在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之前，这是非常有效的。当我开始在网络聊天中使用ReachJS时，它就不再起作用了。如何使用Webchat钩子API传递此参数？我试着使用下面的代码来指定它，但是不起作用。
ReactDOM.render(
<Composer directLine={window.WebChat.createDirectLine({ token: })}>
<BasicWebChat />
<SendMessageOnConnect />
<user />
<usern />
</Composer>,
document.getElementById('webchat')
);
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-02 13:45:08
这在我的反应项目中有效。您的实现是不同的，但这将使您走上正确的方向。您可以在列出的活动中看到用户name被更新为'Steve‘。在我的例子中，id没有被更新，因为我正在生成一个带有令牌的id。当通过带有令牌的Direct生成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…</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'
}希望得到帮助！
Stack Overflow用户
发布于 2020-08-27 04:53:49
您可以尝试使用useParams()钩子代替如下：
let { userid, username } = useParams();或重命名如下：
let { userid: user, username: usern } = useParams();请进一步阅读这里的文件中的以下内容：
useParams返回一个键/值对的对象。使用它访问当前match.params的<Route>。
也可以将useLocation()钩子用作：
const { search } = useLocation();
const { userid, username } = search;从文件中阅读：
useLocation钩子返回表示当前URL的location对象。您可以把它看作是一个useState，它在URL更改时返回一个新位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63616374
复制相关文章
腾讯云开发者
