无法在 createDirectLine (botframework webchat) 中成功传递 Javascript 变量导致 403 错误

Question

每次网络聊天会话，我都会从与 https://webchat.botframework.com/api/tokens 通信的 restify 服务中检索令牌。我使用直线秘密来获取令牌。令牌已正确检索。当我手动使用令牌（通过在 html 中输入它）时，网络聊天呈现。当我在函数中传递 Javascript 变量时，我无法创建直线。一些指导表示赞赏。解决方法是在 html 中使用 secret 但我不想那样做

我尝试了多种语法来传递变量：window.WebChat.createDirectLine({ webChatToken }) or (webChatToken) or ({ webChatToken }) or (token: webChatToken) and ({ token: webChatToken })

唯一有效的方法是在 html 中手动输入令牌。

我使用 index.js 中已有的 restify 服务器（用于示例机器人）来侦听和处理令牌请求：

// Create HTTP server and Cors
let server = restify.createServer();
server.pre(cors.preflight);
server.use(cors.actual);
server.listen(process.env.port || process.env.PORT || 3978, function() {
});

// Listen for bot requests.
server.post('/api/messages', (req, res) => {
    adapter.processActivity(req, res, async (context) => {
        await bot.run(context);
    });
});

// Listen for token requests.
server.get('/api/token',
    async function(req, res) {
        const result = await fetch('https://webchat.botframework.com/api/tokens', {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${ process.env.directLineSecret }`
            }
        });
        const token = await result.json();
        console.log(token);
        res.send(token);
    });

以及 html 和 Javascript 代码中的网络聊天客户端。在此示例中，它正在与 restify 服务器的本地实例通信。

    <div id="webchat" role="main"></div>   
        <script>
            //get token
            const webChatToken = getToken();

            window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ webChatToken }),
            renderMarkdown: markdownIt.render.bind(markdownIt),
            store,
            // styling
            styleOptions: {
            },
            userID: 'N/A',
            username: 'Web Chat User',
            locale: 'nl-nl'
          }, document.getElementById('webchat'));

            async function getToken() {
            const res = await fetch('http://localhost:3978/api/token');
            const token = await res.json();
            return token;
          }
        </script>

我期待一个工作的网络聊天客户端。在 chrome 开发扩展中，我看到“POST https://directline.botframework.com/v3/directline/conversations 403（禁止）。直线对应响应api:

{ "error"：{ "code": "BadArgument", "message": "Invalid token or secret" } }

Answer 1

直线选项有一个 token 属性，而不是 webChatToken 属性。您需要在选项对象中将 token 值设置为 webChatToken。查看下面的代码片段和 Direct Line Documentetion，了解有关初始化 Web Chat 和 Direct Line 客户端的更多详细信息。

(async function () {
  const res = await fetch('http://localhost:3978/api/token', { method: 'GET' });
  const webChatToken = await res.json();

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

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

希望对您有所帮助！

无法在 createDirectLine (botframework webchat) 中成功传递 Javascript 变量导致 403 错误

Unable to succesfully pass Javascript variable in createDirectLine (botframework webchat) resulting in 403 error

node.js

web-chat

botframework