Usar o Webchat com a extensão de serviço de aplicativo do Direct Line

  • Artigo

A partir de 1º de setembro de 2023, é altamente recomendável empregar o método de Marca de Serviço do Azure para isolamento de rede. A utilização do DL-ASE deve ser limitada a cenários altamente específicos. Antes de implementar essa solução em um ambiente de produção, recomendamos consultar sua equipe de suporte para obter orientação.

APLICA-SE A: SDK v4

Este artigo descreve como usar o Webchat com a Extensão do Serviço de Aplicativo do Direct Line. O Webchat versão 4.9.1 ou superior é obrigatório para suporte nativo da Extensão do Serviço de Aplicativo do Direct Line.

Integrar cliente do Webchat

Observação

Os Cartões Adaptáveis enviados por meio da Extensão do Serviço de Aplicativo do Direct Line não passam pelo mesmo processamento que os enviados por meio de outras versões do canal do Direct Line. Por causa disso, a declaração JSON do Cartão Adaptável enviado ao Webchat da Extensão do Serviço de Aplicativo do Direct Line não terá valores padrão adicionados pelo canal se os campos forem omitidos pelo bot quando o cartão for criado.

De modo geral, a abordagem é a mesma que a de antes. Com a exceção de que na versão 4.9.1 ou posterior do WebChat haja suporte interno para estabelecer um WebSocket bidirecional. Isso permite que o WebChat se conecte diretamente à extensão do Serviço de Aplicativo do Direct Line hospedada com seu bot em vez de se conectar ao https://directline.botframework.com/. A URL do Direct Line para o bot será https://<your_app_service>.azurewebsites.net/.bot/, o ponto de extremidade do Direct Line na sua extensão do serviço do aplicativo. Se você configurar seu próprio nome de domínio ou se o seu bot estiver hospedado em uma nuvem soberana do Azure, substitua a URL apropriada e acrescente o caminho /.bot/ para acessar as APIs REST da extensão do Serviço de Aplicativo do Direct Line.

  1. Troque o segredo por um token seguindo as instruções no artigo Autenticação. Em vez de obter um token em https://directline.botframework.com/v3/directline/tokens/generate, você gerará o token diretamente de sua Extensão de Serviço de Aplicativo do Direct Line em:https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

  2. Para obter um exemplo que mostra como buscar um token, confira Exemplos de conversa na Webchat.

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

    Dica

    Na implementação do bot JavaScript, verifique se os WebSockets estão habilitados no arquivo web.config, conforme mostrado abaixo.

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