Dela via

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

Från och med den 1 september 2023 rekommenderar vi starkt att du använder metoden Azure Service Tag 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

I den här artikeln beskrivs hur du använder webbchatt med Direct Line App Service-tillägget. Webbchattversion 4.9.1 eller senare krävs för inbyggt stöd för Direct Line App Service-tillägg.

Integrera webbchattklient

Anmärkning

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 lagts 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 det i version 4.9.1 eller senare av webbchatten finns inbyggt stöd för att upprätta en dubbelriktad WebSocket. Detta gör att Webbchatt kan 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/. Direktlinjens URL för din robot blir https://<your_app_service>.azurewebsites.net/.bot/, slutpunkten för Direktlinje på appens tjänstutvidgning. Om du konfigurerar ditt eget domännamn, eller om din bot är värd i ett suveränt Azure-moln, ska du använda den lämpliga URL:en och lägga till sökvägen /.bot/ för att få åtkomst till REST-API:erna för Direct Line App Service-tillägget.

  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 Webbchattexempel.

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

    Tips/Råd

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

    <configuration>
    <system.webServer>
        <webSocket enabled="true"/>
        ...
    </system.webServer>
</configuration>
  • Last updated on