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

将机器人连接到网上聊天

适用于： SDK v4

使用 Azure 创建机器人时，会自动配置网上聊天通道。网上聊天通道包括网上聊天控件，使用户能够在网页中直接与机器人交互。

网上聊天频道包含在网页中嵌入 Web Chat 控件所需的所有内容。为此，你将获取机器人的密钥，然后在网页中嵌入控件。

先决条件

一个 Azure 帐户。如果还没有帐户，请在开始之前创建免费帐户。
已发布到 Azure 的现有机器人。

网上聊天安全注意事项

在 Web Chat 中使用 Azure AI 机器人服务身份验证时，必须牢记一些重要的安全注意事项。有关详细信息，请参阅安全注意事项。

在网页中嵌入 Web Chat 控件

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

网上聊天控件组件

重要

使用 Direct Line（通过增强的身份验证）来缓解使用网上聊天控件连接到机器人时的安全风险。有关详细信息，请参阅 Direct Line 增强身份验证。

获取机器人秘密密钥

转到 Azure 门户并打开机器人。
在 “设置”下，选择 “频道”。然后选择 “网上聊天”。
“ 网上聊天 ”页将打开。从“网站”列表中选择默认网站。
复制第一个密钥和 嵌入代码。

开发嵌入选项

方案一 - 用您的机密交换一个令牌，然后生成嵌入式内容

这是一个不错的选择，如果：

可以执行服务器到服务器请求，将 Web 聊天机密交换为临时令牌
你希望让其他开发人员难以将机器人嵌入其网站

使用此选项不会完全阻止其他开发人员将机器人嵌入其网站，但这样做确实使他们难以这样做。

若要交换机密以获取令牌并生成嵌入：

向令牌交换 URL 发出 GET 请求，并通过 Authorization 标头传递 Web 聊天机密。标题 Authorization 使用 BotConnector 协议并包含您的秘密。
- 对于全局机器人，令牌交换 URL 为 https://webchat.botframework.com/api/tokens。
- 对于区域机器人，根据所选区域输入以下 URL：
区域令牌交换 URL

欧洲 https://europe.webchat.botframework.com/api/tokens

印度 https://india.webchat.botframework.com/api/tokens
对您的 GET 请求的响应将包含令牌（用引号括起来），该令牌可用于呈现 Web Chat 控件并进而启动对话。令牌仅对一个会话有效;若要启动另一个对话，需要生成一个新令牌。
在之前从 Web Chat 通道复制的 Embedded 代码 中，将 s= 参数更改为 t= 并将 "YOUR_SECRET_HERE" 替换为您的令牌。

区域	令牌交换 URL
欧洲	https://europe.webchat.botframework.com/api/tokens
印度	https://india.webchat.botframework.com/api/tokens

注释

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

示例请求

对于全局机器人：

requestGET https://webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE

对于区域机器人：

requestGET 
    ## Europe region
    https://europe.webchat.botframework.com/api/tokens
    ## India region
    https://india.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"

示例 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 聊天控件嵌入网站

如果要允许其他开发人员轻松地将机器人嵌入其网站，请使用此选项。

警告

使用此选项，Web Chat 通道密钥将在客户端网页中公开。此选项仅用于开发目的，而不是在生产环境中使用。

如需在网页中嵌入机器人，请在嵌入代码中指定密钥。

从 Azure 门户中的网上聊天通道复制 嵌入式代码 （如上面的 “获取机器人密钥 ”中所述）。
在该 嵌入式代码中，将“YOUR_SECRET_HERE”替换为从同一页复制的密钥值。

生产环境嵌入选项

隐藏机密，交换机密以获取令牌，并生成嵌入

此选项不会在客户端网页中公开 Web Chat 通道密钥。

客户端需要提供令牌来与机器人通信。若要了解机密和令牌之间的差异以及了解与使用机密相关的风险，请参阅 Direct Line 身份验证。

以下客户端网页演示如何将令牌用于网上聊天。如果您有区域性的或 Azure Gov 的机器人，请将公共 URL 调整为政府 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>

有关如何生成令牌的示例，请参阅：

其他信息

Last updated on 2025-10-30

通过