Gebruik Webchat met de Direct Line App Service-extensie

Artikel
10/24/2023

Vanaf 1 september 2023 is het raadzaam om de Azure Service Tag-methode te gebruiken voor netwerkisolatie. Het gebruik van DL-ASE moet worden beperkt tot zeer specifieke scenario's. Voordat u deze oplossing in een productieomgeving implementeert, raden we u aan uw ondersteuningsteam te raadplegen voor hulp.

VAN TOEPASSING OP: SDK v4

In dit artikel wordt beschreven hoe u Webchat gebruikt met de Direct Line App Service-extensie. Webchat versie 4.9.1 of hoger is vereist voor systeemeigen ondersteuning voor de Direct Line App Service-extensie.

Webchat-client integreren

Notitie

Adaptieve kaarten die via de Direct Line App Service-extensie worden verzonden, ondergaan niet dezelfde verwerking als kaarten die via andere versies van het Direct Line-kanaal worden verzonden. Als gevolg hiervan heeft de JSON-weergave van de adaptieve kaart die wordt verzonden naar Webchat van de App Service-extensie voor Direct Line niet standaardwaarden toegevoegd door het kanaal als de velden worden weggelaten door de bot wanneer de kaart wordt gemaakt.

Over het algemeen is de benadering hetzelfde als voorheen. Met uitzondering van dat in versie 4.9.1 of hoger van Webchat er ingebouwde ondersteuning is voor het tot stand brengen van een webSocket in twee richtingen. Hierdoor kan Webchat rechtstreeks verbinding maken met de Direct Line App Service-extensie die wordt gehost met uw bot in plaats van verbinding te maken met https://directline.botframework.com/. De DIRECT Line-URL voor uw bot ishttps://<your_app_service>.azurewebsites.net/.bot/, het Direct Line-eindpunt in de app-service-extensie. Als u uw eigen domeinnaam configureert of uw bot wordt gehost in een onafhankelijke Azure-cloud, vervangt u de juiste URL en voegt u het /.bot/ pad toe voor toegang tot de REST API's van de Direct Line App Service-extensie.

Exchange the secret for a token by following the instructions in the Authentication article. In plaats van een token op https://directline.botframework.com/v3/directline/tokens/generatete halen, genereert u het token rechtstreeks vanuit uw Direct Line App Service-extensie op https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Zie Webchat Voorbeelden voor een voorbeeld dat laat zien hoe u een token ophaalt.

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

Fooi

Zorg ervoor dat WebSockets zijn ingeschakeld in het bestand web.config in de implementatie van de JavaScript-bot, zoals hieronder wordt weergegeven.

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

Delen via

Gebruik Webchat met de Direct Line App Service-extensie

Webchat-client integreren

Aanvullende resources