搭配 Direct Line App Service 擴充功能使用網路聊天

發行項
10/24/2023

從 2023 年 9 月 1 日起，強烈建議採用 Azure 服務標籤方法來隔離網路。 DL-ASE 的使用率應僅限於高度特定的案例。在生產環境中實作此解決方案之前，建議您諮詢您的支援小組以取得指引。

適用于： SDK v4

本文說明如何搭配 Direct Line App Service 擴充功能使用網路聊天。原生 Direct Line App Service 延伸模組支援需要網路聊天 4.9.1 版或更新版本。

整合網路聊天用戶端

注意

透過 Direct Line App Service 擴充功能傳送的調適型卡片不會進行與透過其他 Direct Line 通道版本傳送的調適型卡片相同的處理。因此，從 Direct Line App Service 擴充功能傳送至網路聊天調適型卡片的 JSON 標記法，如果建立卡片時 Bot 省略欄位，通道就不會新增預設值。

一般來說，這種方法與之前相同。除了 4.9.1 版或更新版本的網路聊天內建支援來建立雙向 WebSocket 。這可讓網路聊天直接連線到裝載于 Bot 的 Direct Line App Service 擴充功能，而不是連線到 https://directline.botframework.com/ 。 Bot 的 Direct Line URL 將會是 https://<your_app_service>.azurewebsites.net/.bot/ App Service 延伸模組上的 Direct Line 端點。如果您設定自己的功能變數名稱，或 Bot 裝載在主權 Azure 雲端中，請以適當的 URL 取代，並附加 /.bot/ 路徑以存取 Direct Line App Service 延伸模組的 REST API。

依照驗證一文中的指示，交換權杖的秘密。您不會在取得權杖 https://directline.botframework.com/v3/directline/tokens/generate ，而是直接從位於的 Direct Line App Service 擴充功能 https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate 產生權杖。

如需示範如何擷取權杖的範例，請參閱網路聊天範例。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
    ></script>
    <style>
      html,
      body {
        background-color: #f7f7f7;
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        height: 100%;
        margin: auto;
        max-width: 480px;
        min-width: 360px;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script>
      (async function() {
        <!-- NOTE: You should replace the below fetch with a call to your own token service as described in step 2 above, to avoid exposing your channel secret in client side code. -->
        const res = await fetch('https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate', 
          {
            "method": "POST",
            "headers": {
              "Authorization": "Bearer " + "<Your Bot's Direct Line channel secret>"
            },
            "body": "{'user': {'id': 'my_test_id', 'name': 'my_test_name'}}"
          }
        );
        const { token } = await res.json();

        window.WebChat.renderWebChat(
          {
            directLine: await window.WebChat.createDirectLineAppServiceExtension({
              domain: 'https://<your_app_service>.azurewebsites.net/.bot/v3/directline',
              token
            })
          },
          document.getElementById('webchat')
        );

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
  </body>
</html>

提示

在 JavaScript Bot 實作中，確定 Web.config 檔案中 已啟用 WebSockets，如下所示。

<configuration>
    <system.webServer>
        <webSocket enabled="true"/>
        ...
    </system.webServer>
</configuration>

共用方式為

搭配 Direct Line App Service 擴充功能使用網路聊天

整合網路聊天用戶端

其他資源

共用方式為

搭配 Direct Line App Service 擴充功能使用網路聊天

整合 網路聊天 用戶端

其他資源

整合網路聊天用戶端