將 Bot 連線至「網路聊天」

適用于: SDK v4

當您使用架構 Bot 服務 建立 bot 時,系統會自動為您設定網路聊天頻道。 網路聊天頻道包含 網路聊天控制項,讓使用者能夠直接在網頁中與 bot 互動。

網路聊天範例

Bot Framework 入口網站中的網路聊天頻道包含在網頁中內嵌網路聊天控制項所需的所有專案。 如需使用網路聊天控制項,您只需要取得 Bot 的祕密金鑰,並在網頁中內嵌控制項即可。

網路聊天安全性考慮

當您搭配使用 Azure Bot Service 驗證與網路聊天時,必須留意某些重要的安全性考量。 請參閱 安全性考慮

在網頁中內嵌網路聊天控制項

下圖顯示在網頁中內嵌網路聊天控制項時所牽涉到的元件。

bot 內嵌元件

重要

如上圖所示,您必須使用 Direct Line (搭配增強型驗證) ,以在使用網路聊天控制項連線到 bot 時降低安全性風險。 如需詳細資訊,請參閱 Direct Line 增強式驗證

取得您的 Bot 祕密金鑰

  1. Azure 入口網站中開啟您的 Bot,然後按一下 [通道] 刀鋒視窗。

  2. 針對 網路聊天 頻道,按一下 [編輯] 。

    網路聊天頻道

  3. 在 [祕密金鑰] 底下,按一下第一個金鑰的 [顯示] 。

    祕密金鑰

  4. 複製 [祕密金鑰] 和 [內嵌程式碼] 。

  5. 按一下 [完成] 。

開發內嵌選項

選項 1-交換權杖的秘密,並產生內嵌

如果您可以執行伺服器對伺服器要求,將您的網路聊天祕密與暫存權杖交換,且想要讓其他開發人員難以在他們的網站中內嵌您的 Bot,請使用此選項。 雖然使用此選項無法完全防止其他開發人員在其網站中內嵌您的 Bot,但確實會增加難度。

若要將您的祕密與權杖交換並產生內嵌:

  1. 請發出 GET 要求給 https://webchat.botframework.com/api/tokens,並透過 Authorization 標頭傳遞您的網路聊天祕密。 Authorization 標頭會使用 BotConnector 配置並包含您的祕密,如下列範例要求中所示。

  2. GET 要求的回應會包含權杖 (以引號括住),可透過轉譯 iframe 內的 網路聊天控制項用來開始對話。 權杖僅對一個對話有效;若要開始另一個對話,您必須產生新的權杖。

  3. 在您從 Bot Framework 入口網站中的網路聊天頻道複製的 iframe 內嵌程式碼 內 (如上方 取得您的 bot 祕密金鑰中所述),將 s= 參數變更為 t=,並以您的權杖來取代 "YOUR_SECRET_HERE"。

注意

權杖在到期前會自動更新。

範例要求
requestGET https://webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE

注意

請注意,針對 Azure Government,權杖交換 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 Government 的範例 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 - 在您的網站中使用祕密來內嵌網路聊天控制項

如果您想要讓其他開發人員輕鬆地在其網站中內嵌您的 Bot,請使用此選項。

警告

使用這個選項時,會在用戶端網頁中公開網路聊天頻道秘密金鑰。 此選項僅適用于開發用途,不適用於生產環境。

若要藉由指定標記內的秘密,在網頁中內嵌您的 bot iframe ,請執行以下所述的步驟。

  1. 請從 Bot Framework 入口網站內的網路聊天頻道,複製 iframe 內嵌程式碼 (如上方 取得您的 bot 祕密金鑰中所述)。

  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 Government 的範例 iframe 看起來會不同。

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

網路聊天用戶端

生產內嵌選項

將您的秘密保持隱藏、交換權杖的秘密,並產生內嵌

此選項不會在用戶端網頁中公開網路聊天頻道秘密金鑰,因為它在生產環境中是必要的。

用戶端必須提供權杖來與 bot 交談。 若要瞭解秘密和權杖之間的差異,以及瞭解使用秘密相關的風險,請造訪 Direct Line authentication

下列用戶端網頁顯示如何搭配網路聊天使用權杖。 如果您使用 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>

如需有關如何產生權杖的範例,請參閱:

其他資源