Passing QueryString to Microsoft bot web channel

问题

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

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 ?

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.

Thanks Siddharth

回答1:

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

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>

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.

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>

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

Hope of help!

来源：https://stackoverflow.com/questions/54089845/passing-querystring-to-microsoft-bot-web-channel

标签

botframework