你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn

将机器人连接到网上聊天

适用于: SDK v4

使用 框架机器人服务 创建机器人时,Web 聊天会自动配置该通道。 此Web 聊天通道包括 Web 聊天 控件,它使用户能够直接在网页中与机器人交互。

网上聊天示例

Web 聊天门户中的 Bot Framework 通道包含将 Web 聊天 控件嵌入网页所需的一切内容。 要使用网上聊天控件,只需获取机器人的密钥并将控件嵌入网页即可。

Web 聊天安全注意事项

将 Azure 机器人服务身份验证与 Web Chat 配合使用时,必须牢记一些重要的安全注意事项。 请参阅安全 注意事项

在Web 聊天嵌入控件

下图显示了在网页中嵌入 Web 聊天 控件时涉及的组件。

机器人嵌入组件

重要

如上图所示,需要将 Direct Line (与增强的身份验证) ,以缓解在使用安全控制连接到机器人时Web 聊天安全风险。 有关详细信息,请参阅Direct Line身份验证。

获取机器人密钥

  1. Azure 门户中打开机器人,然后单击“通道”边栏选项卡 。

  2. 单击“网上聊天”通道的“编辑” 。

    网上聊天通道

  3. 在“密钥”下,单击第一个密钥下的“显示” 。

    密钥

  4. 复制“密钥”和“嵌入代码” 。

  5. 单击“完成” 。

开发嵌入选项

选项 1 - Exchange令牌的机密,并生成嵌入

如果可以执行服务器到服务器的请求来将网上聊天密码换成临时令牌,且希望其他开发人员无法轻易将你的机器人嵌入他们的网站,请使用此方法。 虽然使用此方法并不能完全阻止其他开发人员将你的机器人嵌入其网站,但这样确实能加大他们进行此操作的难度。

将密码换成令牌并生成嵌入:

  1. https://webchat.botframework.com/api/tokens 发出 GET 请求,并通过 Authorization 标头传递网上聊天密码 。 Authorization 标头使用 BotConnector 方案并包含密码,如以下示例请求中所示。

  2. 对 GET 请求的响应将包含令牌(用引号括起),该令牌可用于通过在 iframe 内中呈现网上聊天控件来启动聊天 。 令牌仅对一个聊天有效;要启动另一个聊天,必须生成一个新令牌。

  3. 在从 Bot Framework 门户的网上聊天通道复制的 iframe 嵌入代码中(如上面的获取机器人密钥中所述),将 s= 参数更改为 t=,然后将“YOUR_SECRET_HERE”替换为你的令牌 。

备注

令牌将在过期之前自动续订。

示例请求
requestGET https://webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE

备注

请注意,对于Azure 政府,令牌交换 URL 不同。

requestGET https://webchat.botframework.azure.us/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
示例响应
"IIbSpLnn8sA.dBB.MQBhAFMAZwBXAHoANgBQAGcAZABKAEcAMwB2ADQASABjAFMAegBuAHYANwA.bbguxyOv0gE.cccJjH-TFDs.ruXQyivVZIcgvosGaFs_4jRj1AyPnDt1wk1HMBb5Fuw"
iframe 示例(使用令牌)
<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?t=YOUR_TOKEN_HERE"></iframe>

备注

请注意,对于Azure 政府,示例 iframe 看起来不同。

<iframe src="https://webchat.botframework.azure.us/embed/YOUR_BOT_ID?t=YOUR_TOKEN_HERE"></iframe>
html 代码示例
<!DOCTYPE html>
<html>
<body>
  <iframe id="chat" style="width: 400px; height: 400px;" src=''></iframe>
</body>
<script>

    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
    xhr.setRequestHeader('Authorization', 'BotConnector ' + 'YOUR SECRET HERE');
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
      if (xhr.readyState == 4  && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        document.getElementById("chat").src="https://webchat.botframework.com/embed/<botname>?t="+response
      }
    }

  </script>
</html>

方法 2:使用密码将网上聊天控件嵌入网站中

如果希望其他开发人员能轻松将你的机器人嵌入其网站,请使用此方法。

警告

使用此选项时,Web 聊天密钥在客户端网页中公开。 此选项仅用于开发目的,不在生产环境中使用。

若要通过指定 标记中的机密将机器人嵌入网页 iframe ,请执行下面所述的步骤。

  1. 从 Bot Framework 门户中的网上聊天通道复制 iframe 嵌入代码(如上面的获取机器人密钥中所述) 。

  2. 在“嵌入代码”中,将“YOUR_SECRET_HERE”替换为从同一页面复制的“密钥值” 。

iframe 示例(使用密码)
<iframe style="height:480px; width:402px" src="https://webchat.botframework.com/embed/YOUR_BOT_ID?s=YOUR_SECRET_HERE"></iframe>

备注

请注意,对于Azure 政府,示例 iframe 看起来不同。

<iframe style="height:480px; width:402px" src="https://webchat.botframework.azure.us/embed/YOUR_BOT_ID?s=YOUR_SECRET_HERE"></iframe>

Web 聊天客户端

生产嵌入选项

隐藏机密,将机密交换为令牌,并生成嵌入内容

此选项不会在客户端Web 聊天公开通道密钥,因为生产环境中需要此选项。

客户端必须提供令牌来与机器人对话。 若要了解机密和令牌之间的差异并了解与使用机密相关的风险,请访问Direct Line 身份验证

以下客户端网页演示如何将令牌用于Web 聊天。 如果使用 Azure Gov,请调整从公共到政府的 URL。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  </head>
  <body>
    <h2>Web Chat bot client using Direct Line</h2>

    <div id="webchat" role="main"></div>

    <script>

     // "styleSet" is a set of CSS rules which are generated from "styleOptions"
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',

         botAvatarImage: '<your bot avatar URL>',
         botAvatarInitials: 'BF',
         userAvatarImage: '<your user avatar URL>',
         userAvatarInitials: 'WC',
         rootHeight: '100%',
         rootWidth: '30%'
      });

      // After generated, you can modify the CSS rules
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };

      const res = await fetch('https:<YOUR_TOKEN_SERVER/API>', { method: 'POST' });
      const { token } = await res.json();

      window.WebChat.renderWebChat(
        {
          directLine: window.WebChat.createDirectLine({ token }),
          userID: 'WebChat_UserId',
          locale: 'en-US',
          username: 'Web Chat User',
          locale: 'en-US',
          // Passing 'styleSet' when rendering Web Chat
          styleSet
        },
        document.getElementById('webchat')
      );
    </script>
  </body>
</html>

有关如何生成令牌的示例,请参阅:

其他资源