Verwenden von Webchat mit der App Service-Erweiterung für Direct Line

Artikel
12/29/2023

Ab dem 1. September 2023 wird dringend empfohlen, die Azure Service Tag-Methode für dieNetzwerkisolation zu verwenden. Die Verwendung von DL-ASE sollte auf hochspezifische Szenarien beschränkt sein. Vor der Implementierung dieser Lösung in einer Produktionsumgebung empfehlen wir Ihnen, Ihr Supportteam um Anleitungen zu bitten.

GILT FÜR: SDK v4

In diesem Artikel erfahren Sie, wie Sie Webchat mit der App Service-Erweiterung für Direct Line verwenden. Die Webchat-Version 4.9.1 oder höher wird für die native Unterstützung der App Service-Erweiterung für Direct Line benötigt.

Integrieren des Web Chat-Clients

Hinweis

Für adaptive Karten, die über die App Service-Erweiterung für Direct Line gesendet werden, wird nicht die gleiche Verarbeitung wie für andere Karten genutzt, die mit anderen Versionen des Direct Line-Kanals gesendet werden. Daher verfügt die JSON-Darstellung der adaptiven Karte, die über die App Service-Erweiterung für Direct Line an den Web Chat gesendet wird, nicht über vom Kanal hinzugefügte Standardwerte, falls die Felder vom Bot beim Erstellen der Karte weggelassen werden.

Der Ansatz ist grundsätzlich der gleiche wie zuvor. Mit der Ausnahme, dass in Version 4.9.1 oder höher von Webchat integrierte Unterstützung für das Einrichten eines bidirektionalen WebSocket vorhanden ist. Auf diese Weise kann Webchat eine direkte Verbindung mit der Direct Line App Service-Erweiterung herstellen, die mit Ihrem Bot gehostet wird, anstatt eine Verbindung mit dem Bot zu https://directline.botframework.com/ herzustellen. Die Direct Line-URL für Ihren Bot lautet https://<your_app_service>.azurewebsites.net/.bot/, wobei die Erweiterung der Direct Line-Endpunkt für Ihre App Service-Erweiterung ist. Wenn Sie Ihren eigenen Domänennamen konfigurieren oder Ihr Bot in einer souveränen Azure-Cloud gehostet wird, ersetzen Sie in der entsprechenden URL, und fügen Sie den /.bot/ Pfad hinzu, um auf die REST-APIs der Direct Line App Service-Erweiterung zuzugreifen.

Gehen Sie wie im Artikel zur Authentifizierung beschrieben vor, um das Geheimnis durch ein Token zu ersetzen. Beziehen Sie dabei aber kein Token von https://directline.botframework.com/v3/directline/tokens/generate, sondern generieren Sie das Token direkt über die App Service-Erweiterung für Direct Line unter https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Ein Beispiel zum Abrufen eines Tokens finden Sie unter Webchat Beispiele.

<!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>

Tipp

Stellen Sie in der JavaScript-Bot-Implementierung sicher, dass WebSockets in der Datei web.config aktiviert sind, wie unten dargestellt.

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

Verwenden von Webchat mit der App Service-Erweiterung für Direct Line

Integrieren des Web Chat-Clients

Zusätzliche Ressourcen