Passing query string parameters to directline channel Bot Framework

Question

I have created a bot using Bot builder SDK 4.x. I can access the bot using the emulator and the message end point- http://localhost:3978/api/messages. I am also passing some query string parameters to the messaging endpoint like this- http://localhost:3978/api/messages?botid=HRbot which I can access within the Startup of my bot.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseDefaultFiles()
        .UseStaticFiles()
        .Use(async (context, next) =>
        {
            _config["BotId"] = context.Request.Query["botid"];
            await next.Invoke();
        })
        .UseBotFramework();
}

After deploying the bot to Azure I want my client to use the message endpoint and pass their own query string parameters. Since, the bot needs to be embeded within the webpage I can either use Web chat channel and script or use Direct line channel . Both of them uses a secret key and no end points. So, I don't see any option to pass a query string parameter to the message endpoint.

I saw we can pass some token as some parameters to the Direct line channel using the web chat JavaScript SDK, like as shown below.

BotChat.App({
        bot: bot,
        locale: params['locale'],
        resize: 'detect',
        // sendTyping: true,    // defaults to false. set to true to send 'typing' activities to bot (and other users) when user is typing
        speechOptions: speechOptions,
        user: user,
        directLine: {
          domain: params['domain'],
          secret: params['s'],
          token: params['t'],
          webSocket: params['webSocket'] && params['webSocket'] === 'true' // defaults to true
        }
      }, document.getElementById('chatBot'));

I am not sure how I can use my bot service message API for every clients who wants to consume the API using a different query string parameter.

Any help with this? Please let me know if I can clarify more.

Answer 1

I was having problems with both of options given by Fei Han and they weren't working for me. After researching for a while, what worked for me was combination of the back-end solution given by him and for the client side I had to use the example given here - https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/15.d.backchannel-send-welcome-event .

So at the end, I had those two pieces of code:

C#:

else if (turnContext.Activity.Type == ActivityTypes.Event)
{
      await turnContext.SendActivityAsync($"Received event");
      await turnContext.SendActivityAsync($"{turnContext.Activity.Name} - {turnContext.Activity.Value?.ToString()}");
}

and client-side:

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>

    token = "your-token-here";

    (async function () {
        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                dispatch({
                    type: 'WEB_CHAT/SEND_EVENT',
                    payload: {
                    name: 'start-chat',
                        value: {
                            "example_id": "12345",
                            "example_array": ["123", "456"]
                        }
                      }
            });
        }
        return next(action);
    });

    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token }),
        store
    }, document.getElementById('webchat'));

    document.querySelector('#webchat > *').focus();
      }) ().catch(err => console.error(err));

</script>

Answer 2

how I can use my bot service message API for every clients who wants to consume the API using a different query string parameter.

Embeddable web chat control does not make request(s) to bot application endpoint directly, it is using the DirectLine API.

To passing additional information to bot application from Web Chat client, you can specify the additional parameter in user: { id: user_id, param: '{value_here}' } property while you initiate BotChat.

var userinfo = { id: 'You', userparam: 'val11' };

BotChat.App({
    botConnection: botConnection,
    user: userinfo,
    bot: { id: 'xxxbot' },
    resize: 'detect'
}, document.getElementById("bot"));

And then you can get the value that you passed via Activity.From.Properties in your bot application.

if (context.Activity.Type == ActivityTypes.Message)
{
    var uparam = context.Activity.From.Properties["userparam"].ToString();

    // Your code logic here   


    // Echo back to the user whatever they typed.
    await context.SendActivity($"Turn {state.TurnCount}: You sent '{context.Activity.Text}; Parameter you passed is {uparam}'");
}

Test result:

Update:

I want the params to be available before the user sends any data.

You can use the backchannel mechanism to send an event activity and specify from property for passing the additional parameter, like below:

botConnection.postActivity({
    type: 'event',
    from: userinfo,
}).subscribe(function (id) { console.log('you send an event activity'); });

And in bot application:

else if (context.Activity.Type == ActivityTypes.Event)
{
    var uparam = context.Activity.From.Properties["userparam"].ToString();
    await context.SendActivity($"Parameter that you sent is '{uparam}'");
}

Test result: