Usare chat Web con l'estensione servizio app Direct Line

Articolo
10/24/2023

A partire dal 1° settembre 2023, è consigliabile usare il metodo tag del servizio di Azure per l'isolamento della rete. L'utilizzo di DL-A edizione Standard deve essere limitato a scenari altamente specifici. Prima di implementare questa soluzione in un ambiente di produzione, è consigliabile consultare il team di supporto per indicazioni.

SI APPLICA A: SDK v4

Questo articolo descrive come usare chat Web con l'estensione servizio app Direct Line. chat Web versione 4.9.1 o successiva è necessario per il supporto nativo dell'estensione servizio app Direct Line.

Integrare il client di WebChat

Nota

Le schede adattive inviate tramite l'estensione servizio app Direct Line non subiscono la stessa elaborazione di quelle inviate tramite altre versioni del canale Direct Line. A causa di questa rappresentazione JSON della scheda adattiva inviata a chat Web dall'estensione servizio app Direct Line non saranno aggiunti valori predefiniti dal canale se i campi vengono omessi dal bot quando viene creata la scheda.

In generale, l'approccio è identico a quello precedente, Ad eccezione del fatto che nella versione 4.9.1 o successiva di chat Web è disponibile il supporto predefinito per stabilire un WebSocket bidirezionale. In questo modo chat Web connettersi direttamente all'estensione servizio app Direct Line ospitata con il bot invece di connettersi a https://directline.botframework.com/. L'URL direct line per il bot sarà https://<your_app_service>.azurewebsites.net/.bot/, l'endpoint Direct Line nell'estensione del servizio app. Se si configura il proprio nome di dominio o il bot è ospitato in un cloud di Azure sovrano, sostituire nell'URL appropriato e aggiungere il /.bot/ percorso per accedere alle API REST dell'estensione Direct Line servizio app.

Scambiare il segreto con un token seguendo le istruzioni riportate nell'articolo Autenticazione, Invece di ottenere un token in https://directline.botframework.com/v3/directline/tokens/generate, si genererà il token direttamente dall'estensione servizio app Direct Line all'indirizzo https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Per un esempio che illustra come recuperare un token, vedere esempi di chat Web.

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

Suggerimento

Nell'implementazione del bot JavaScript assicurarsi che WebSocket sia abilitato nel file web.config , come illustrato di seguito.

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

Condividi tramite

Usare chat Web con l'estensione servizio app Direct Line

Integrare il client di WebChat

Risorse aggiuntive