Uso de Chat en web con la extensión de App Service de Direct Line

Artículo
01/03/2024

A partir del 1 de septiembre de 2023, se recomienda encarecidamente emplear el método de etiqueta de servicio de Azure para el aislamiento de red. El uso de DL-ASE debe limitarse a escenarios muy específicos. Antes de implementar esta solución en un entorno de producción, se recomienda consultar al equipo de soporte técnico para obtener instrucciones.

SE APLICA A: SDK v4

En este artículo se describe cómo usar Chat en web con la extensión de App Service de Direct Line. La versión 4.9.1 o posteriores de Chat en web es necesaria por motivos de compatibilidad con la extensión nativa de App Service para Direct Line.

Integración del cliente de Web Chat

Nota:

Las tarjetas adaptables enviadas mediante la extensión de App Service para Direct Line no se someten al mismo procesamiento que las enviadas mediante otras versiones del canal de Direct Line. Por este motivo, la manifestación JSON de la tarjeta adaptable enviada a Chat en web desde la extensión de App Service para Direct Line no tendrá los valores predeterminados agregados por el canal si el bot omite los campos al crear la tarjeta.

En términos generales, el enfoque es el mismo que antes. Con la excepción de que en la versión 4.9.1 o posterior de Chat en web hay compatibilidad integrada para establecer un WebSocket bidireccional. Esto permite Chat en web conectarse directamente a la extensión de Direct Line App Service hospedada con el bot en lugar de conectarse a https://directline.botframework.com/. La dirección URL de Direct Line para el bot será https://<your_app_service>.azurewebsites.net/.bot/, el punto de conexión de Direct Line en la extensión de App Service. Si configura su propio nombre de dominio o el bot se hospeda en una nube soberana de Azure, sustituya en la dirección URL adecuada y anexe la ruta de acceso /.bot/ para acceder a las API REST de la extensión de App Service de Direct Line.

Intercambie el secreto por un token según las instrucciones del artículo Autenticación. En lugar de obtener un token en https://directline.botframework.com/v3/directline/tokens/generate, generará el token directamente desde su extensión de App Service para Direct Line en https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Para obtener un ejemplo que muestra cómo capturar un token, consulte ejemplos de Chat en 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>

Sugerencia

En la implementación del bot de JavaScript, asegúrese de que WebSockets está habilitado en el archivo web.config, como se muestra a continuación.

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

Share via

Uso de Chat en web con la extensión de App Service de Direct Line

Integración del cliente de Web Chat

Recursos adicionales