Bot 框架 webchat 抛出 502 Bad Gateway答案

【问题标题】：Bot framework webchat throws 502 Bad GatewayBot 框架 webchat 抛出 502 Bad Gateway
【发布时间】：2018-07-06 00:45:26
【问题描述】：

我正在尝试通过 Microsoft 提供的网络聊天 html 模板将其他频道数据传递到我的 C# 后端，但我没有运气。

我已经阅读了很多关于此的博客文章，但我不知道这些人是如何让它发挥作用的，因为我每篇文章都会收到 502 Bad Gateway。

我在 HTML 中的 bot App 初始化如下所示：

    // 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"));

此示例大致基于我尝试过的以下博客和 github 票证。

这可能是 DirectlineJS 组件中引入的一个新错误，或者这从未奏效。任何帮助将不胜感激。

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

更新

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>

【问题讨论】：

你的代码中的第一个奇怪的东西：token: "{secret}"：你在这里提供令牌还是秘密？如果您要提供秘密，则变量应为secret，而不是token
@NicolasR 我很抱歉，为了简洁起见，我刚刚删除了我的令牌。
当然，你必须删除它。但它是您提供的“秘密”值还是“令牌”值？
这是秘密，我通过 Azure 门户检索......但现在你让我猜到了......
所以如果这是一个秘密，请将token: 更改为secret:。这两个选项都是可能的 (github.com/Microsoft/BotFramework-WebChat#secrets-versus-tokens)

标签： botframework direct-line-botframework

【解决方案1】：

我想我明白了。我在尝试测试时遇到了同样的问题，然后我在导航器开发人员工具中进入网络视图时遇到了同样的问题。

抛出 502 的请求包含以下内容，这有助于我理解：

所以实际上这是在某处未经授权的问题......所以通过快速谷歌搜索，我找到了这篇文章：Unauthorized Bot Service from Web Chat

它就在那里：我没有在 Azure 的应用服务中设置 MicrosoftAppId 和 MicrosoftAppPassword。我编辑了它们（见另一个答案），没关系。

【讨论】：