Bot framework webchat throws 502 Bad Gateway

Question

I'm trying to pass additional channel data through to my C# back end via the web chat html template supplied by Microsoft, and I'm having no luck.

I've read so many blog posts around this, but I have no idea how these guys got it to work, as I'm always getting a 502 Bad Gateway with every post.

My bot App initialization in the HTML looks like this:

    // removed my token for brevity

    var connection = new BotChat.DirectLine({
        token: "{secret}",
        webSocket: true
    });

    function getBotConnectionDetail(botconnection) {
        var botConnectionDetail = {};
        var keys = Object.keys(botconnection);
        for (var i = 0; i < keys.length; i++) {
            botConnectionDetail[keys[i]] = botconnection[keys[i]];
        };
        botConnectionDetail['postActivity'] = function (activity) {
            activity.channelData = {
                Username: 'John Doe'
            };
            return botconnection.postActivity(activity);
        };
        return botConnectionDetail;
    }

    BotChat.App({
        botConnection: getBotConnectionDetail(connection),
        user: { id: "Yo" },
        bot: { id: "Yo" },
        resize: "window"
    },
    document.getElementById("bot"));

this example is loosely based on the following blogs and github tickets I've tried, below.

Either this is a new bug introduced on the DirectlineJS component, or this never worked. Any help would be greatly appreciated.

Sending channelData to webchat with each message

https://github.com/Microsoft/BotBuilder/issues/15

https://github.com/Microsoft/BotBuilder/issues/201

https://github.com/Microsoft/BotFramework-WebChat/issues/142

Update

HTML:

<!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>
    <title>Siza</title>
    <link href="webview/webview.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="bot"></div>
<script src="webview/botchat.js"></script>
<script>
    var connection = new BotChat.DirectLine({
        secret: "{secret}",
        webSocket: true
    });

    function getBotConnectionDetail(botconnection) {
        var botConnectionDetail = {};
        var keys = Object.keys(botconnection);
        for (var i = 0; i < keys.length; i++) {
            botConnectionDetail[keys[i]] = botconnection[keys[i]];
        };
        botConnectionDetail['postActivity'] = function (activity) {
            activity.channelData = {
                Username: 'John Doe'
            };
            return botconnection.postActivity(activity);
        };
        return botConnectionDetail;
    }

    BotChat.App({
        botConnection: getBotConnectionDetail(connection),
            user: { id: "Yo" },
            bot: { id: "Yo" },
            resize: "window"
        },
        document.getElementById("bot"));
</script>
</body>
</html>

1st strange thing in your code: `token: "{secret}"` : are you providing a token or a secret here? If you are giving a secret, the variable should be `secret`, not `token` — Nicolas R, Jul 05 '18 at 15:01
@NicolasR I am, apologies, just removed my token for brevity. — JadedEric, Jul 05 '18 at 15:02
Sure, you have to remove it. But is it a "secret" value or a "token" value that you were providing? — Nicolas R, Jul 05 '18 at 15:03
it's the secret, i retrieve via the Azure portal... but now you got me guessing myself on this... — JadedEric, Jul 05 '18 at 15:04
so if this is a secret, change `token:` to `secret:`. Both options are possible (https://github.com/Microsoft/BotFramework-WebChat#secrets-versus-tokens) — Nicolas R, Jul 05 '18 at 15:05
same thing, i have tried adding the t= and s= in the query string as some have noted in the github tickets, and nothing, 502 Bad Gateway — JadedEric, Jul 05 '18 at 15:06
Can you add your full html page so that I can give it a try with one of my bot's secret? — Nicolas R, Jul 05 '18 at 15:21

score 2 · Answer 1 · answered Jul 05 '18 at 16:45

I think I got it. I had the same problem when trying to test, then I when to my network view in my navigator Developer Tools.

The request throwing the 502 had a content with the following, that helped me to understand:

So in fact it's a problem of being Unauthorized somewhere... so with a quick Googling, I found this post: Unauthorized Bot Service from Web Chat

And it was there: I don't have the MicrosoftAppId and MicrosoftAppPassword set in my App Service in Azure. I edited them (see the other answer), and it was ok.

Bot framework webchat throws 502 Bad Gateway

1 Answers1