Usare Web Chat con l'estensione del servizio app Direct Line

2025-05-10

A partire dal 1° settembre 2023, è fortemente consigliato utilizzare il metodo Azure Service Tag per l'isolamento della rete. L'utilizzo di DL-ASE deve essere limitato a scenari estremamente 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 Web Chat con l'estensione del servizio app Direct Line. Web Chat versione 4.9.1 o successiva sono necessari per il supporto nativo dell'estensione di Direct Line App Service.

Integrare il client Web Chat

Annotazioni

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

In generale, l'approccio è lo stesso di prima. Ad eccezione del fatto che nella versione 4.9.1 o successiva di Web Chat è disponibile il supporto predefinito per stabilire un WebSocket bidirezionale. Ciò consente a Web Chat di connettersi direttamente all'estensione del servizio app Direct Line ospitata con il bot invece di connettersi a https://directline.botframework.com/. L'URL Direct Line per il tuo bot sarà https://<your_app_service>.azurewebsites.net/.bot/, l'endpoint Direct Line nell'estensione del servizio app. Se configuri il tuo nome di dominio o il tuo bot è ospitato in un cloud di Azure sovranazionale, sostituisci con l'URL appropriato e aggiungi il percorso /.bot/ per accedere alle API REST dell'estensione del servizio app Direct Line.

Scambiare il segreto per 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 del servizio app Direct Line all'indirizzo https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Per un esempio che mostra 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 Web Chat con l'estensione del servizio app Direct Line

Integrare il client Web Chat

Risorse aggiuntive