将QueryString传递到Microsoft Bot Web频道

问题描述：

我们已经使用ms bot框架创建了一个bot，并希望将一些数据传递给bot，而该用户不会输入.就像我在想，是否可以将查询字符串传递到下面的网络频道.

We have created a bot using ms bot framework and wanted to pass some data to bot which user will not input. Like I was thinking if we can pass query string to below web channel.

https://webchat.botframework.com/embed/myformbot ?s = XXXXXX& mycustomfield = text

然后从bot api代码中，我可以以某种方式读取此querystring参数...理想情况下，我知道我们无法控制上述webchat链接，我们仅授予对bot api的访问权限.但这是否可能或通过其他方式将用户未输入的数据传递给bot?

And from bot api code, I can somehow read this querystring parameter...Ideally I know we don't have control over above webchat link, we are only giving access to bot api. But is this possible or any other way to pass data to bot which is not entered by user ?

我们计划在iframe中将网络频道网址显示到其他网站，并希望传递当前浏览的网址，以识别用户从何处开始对话.

We are planning to display web channel url to different sites in iframe and wanted to pass currently browsed url to identify from where user has started conversation.

谢谢悉达思(Siddharth)

Thanks Siddharth

答

使用 BotFramework即可轻松完成-WebChat 库.仅需执行几个步骤即可进行设置.

This is easily done using the BotFramework-WebChat library. There are just a few steps to perform to get yourself setup.

首先，为您的机器人的网络聊天实例添加一个ID为ID的div，以使其锚定.在此示例中，id为网聊".

First, include a div with an id for the webchat instance of your bot to anchor to. In this example, the id is "webchat".

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Bot Chat</title>
    <style>
      #webchat,
      #webchat>* {
        border: 1px solid #333;
        float: left;
        min-height: 600px;
        height: 600px;
        position: relative;
        width: 460px;
      }
    </style>
  </head>

  <body>
    <div class="example">
      <h2>Back Channel Bot</h2>
      <div id="webchat"></div>

接下来，您将希望在html页面中包含以下脚本.请记住，您应该不将您的机密存储在浏览器或客户端应用中.为了简单起见，将其包含在此处.

Next, you will want to include the following scripts in your html page. Please keep in mind that you should NOT store your secret in the browser or client app. It is included here for simplicity.

这就是正在发生的事情.您使用Direct Line机密(通过Azure机器人中的通道设置)来生成令牌.令牌用于实例化机器人网络聊天控件.在此示例中，用户的位置作为活动对象保存在商店的有效负载中.它会在任何POST_ACTIVITY事件(即用户与机器人互动)上发送到机器人.

Here's what is happening. You use the Direct Line secret (from the channel settings in your Azure bot) to generate a token. The token is used to instantiate the bot webchat control. In this example, the user's location is saved in the store's payload as the activity object. This is sent to the bot on any POST_ACTIVITY event (i.e. the user interacts with the bot).

    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
    <script src='https://cdn.botframework.com/botframework-webchat/master/webchat.js'></script>
    <script src='https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js'></script>
    <script>
      (async function () {
        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
        // You should never put the Direct Line secret in the browser or client app.
        const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + secret
          },
          json: true
        });
        const { token } = await res.json();

let location = window.location.href;

        let store = window.WebChat.createStore(
          {},
          ({ dispatch }) => next => action => {
            if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
              // simple-update-in is used to update the "action"
              action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'location'], () => location);
            }
            return next(action);
          }
        );

        window.WebChat.renderWebChat({
          directLine: window.WebChat.createDirectLine({ token }),
          store,
          styleOptions: {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
          }
        }, document.getElementById('webchat'));

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));;
    </script>
  </body>
</html>

在bot端，bot正在侦听传入的消息.活动对象将包含您发送的数据，并且看起来像这样:

On the bot side, the bot is listening for the incoming message. The activity object will contain the data you sent and will look something like this:

channelData: { clientActivityID: '15469824216440.emdrovn0f5h', location: 'http://localhost:3000/' }

希望有帮助！

将QueryString传递到Microsoft Bot Web频道

相关推荐