Použití Webový chat s rozšířením Direct Line App Service

Článek
10/24/2023

Od 1. září 2023 důrazně doporučujeme použít metodu značky služby Azure pro izolaci sítě. Využití DL-ASE by mělo být omezené na vysoce specifické scénáře. Před implementací tohoto řešení v produkčním prostředí doporučujeme poradit se s týmem podpory, kde najdete pokyny.

PLATÍ PRO: SDK v4

Tento článek popisuje, jak používat Webový chat s rozšířením Direct Line App Service. pro nativní podporu rozšíření Direct Line App Service se vyžaduje Webový chat verze 4.9.1 nebo novější.

Integrace klienta Webový chat

Poznámka:

Adaptivní karty odeslané prostřednictvím rozšíření Direct Line App Service neprocházejí stejným zpracováním jako ty odeslané prostřednictvím jiných verzí kanálu Direct Line. Vzhledem k tomu, že reprezentace KÓDU JSON adaptivní karty odesílaná do Webový chat z rozšíření Direct Line App Service nebude obsahovat výchozí hodnoty přidané kanálem, pokud jsou pole při vytvoření karty vynechána robotem.

Obecně řečeno, přístup je stejný jako předtím. S výjimkou, že ve verzi 4.9.1 nebo novější Webový chat existuje integrovaná podpora pro vytvoření obousměrné webSocket. To umožňuje Webový chat přímé připojení k rozšíření Direct Line App Service hostované s vaším robotem místo připojení k https://directline.botframework.com/. Adresa URL direct line vašeho robota bude https://<your_app_service>.azurewebsites.net/.bot/koncový bod Direct Line v rozšíření služby App Service. Pokud nakonfigurujete vlastní název domény nebo je robot hostovaný v suverénním cloudu Azure, nahraďte příslušnou adresu URL a připojte /.bot/ cestu pro přístup k rozhraním REST API rozšíření Direct Line App Service.

Pomocí pokynů v článku Ověřování si můžete tajný klíč tokenu vyměnit. Místo získání tokenu vygenerujete https://directline.botframework.com/v3/directline/tokens/generatetoken přímo z rozšíření Direct Line App Service na adrese https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Příklad, který ukazuje, jak načíst token, viz Webový chat Ukázky.

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

Tip

V implementaci javascriptového robota se ujistěte, že jsou webSockets povolené v souboru web.config , jak je znázorněno níže.

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

Použití Webový chat s rozšířením Direct Line App Service

Integrace klienta Webový chat

Další materiály