Använda Webbchatt med Direct Line App Service-tillägget

  • Artikel

Från och med den 1 september 2023 rekommenderar vi starkt att du använder Azure Service Tag-metoden för nätverksisolering. Användningen av DL-ASE bör begränsas till mycket specifika scenarier. Innan du implementerar den här lösningen i en produktionsmiljö rekommenderar vi att du ber supportteamet om vägledning.

GÄLLER FÖR: SDK v4

Den här artikeln beskriver hur du använder Webbchatt med Direct Line App Service-tillägget. Webbchatt version 4.9.1 eller senare krävs för inbyggt Direct Line App Service-tilläggsstöd.

Integrera Webbchatt-klienten

Kommentar

Adaptiva kort som skickas via Direct Line App Service-tillägget genomgår inte samma bearbetning som de som skickas via andra versioner av Direct Line-kanalen. På grund av detta har JSON-representationen av det adaptiva kortet som skickas till Webbchatt från Direct Line App Service-tillägget inte standardvärden som läggs till av kanalen om fälten utelämnas av roboten när kortet skapas.

Generellt sett är metoden densamma som tidigare. Med undantag för att i version 4.9.1 eller senare av Webbchatt finns det inbyggt stöd för att upprätta en dubbelriktad WebSocket. På så sätt kan Webbchatt ansluta direkt till Direct Line App Service-tillägget som finns med roboten i stället för att ansluta till https://directline.botframework.com/. Direktrads-URL:en för din robot blir https://<your_app_service>.azurewebsites.net/.bot/, direct line-slutpunkten i apptjänsttillägget. Om du konfigurerar ditt eget domännamn, eller om roboten finns i ett nationellt Azure-moln, ersätter du i lämplig URL och lägger till /.bot/ sökvägen för att få åtkomst till Direct Line App Service-tilläggets REST-API:er.

  1. Byt hemligheten mot en token genom att följa anvisningarna i artikeln Autentisering . I stället för att hämta en token på https://directline.botframework.com/v3/directline/tokens/generategenererar du token direkt från Direct Line App Service-tillägget på https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

  2. Ett exempel som visar hur du hämtar en token finns i Webbchatt Exempel.

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

    Dricks

    I JavaScript-robotimplementeringen kontrollerar du att WebSockets är aktiverade i filen web.config enligt nedan.

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