Direct Line App Service 확장과 함께 웹 채팅 사용

아티클
10/24/2023

2023년 9월 1일부터 네트워크 격리를 위해 Azure 서비스 태그 방법을 사용하는 것이 좋습니다. DL-ASE의 사용률은 매우 구체적인 시나리오로 제한되어야 합니다. 프로덕션 환경에서 이 솔루션을 구현하기 전에 지원 팀에 지침을 문의하는 것이 좋습니다.

적용 대상: SDK v4

이 문서에서는 Direct Line App Service 확장과 함께 웹 채팅 사용하는 방법을 설명합니다. 네이티브 Direct Line App Service 확장 지원에는 웹 채팅 버전 4.9.1 이상이 필요합니다.

웹 채팅 클라이언트 통합

참고 항목

Direct Line App Service 확장을 통해 전송된 적응형 카드는 다른 버전의 직접 회선 채널을 통해 전송된 카드와 동일한 처리를 거치지 않습니다. 이로 인해 Direct Line App Service 확장에서 웹 채팅 전송된 적응형 카드의 JSON 표현은 카드 만들 때 봇에서 필드를 생략하는 경우 채널에서 기본값을 추가하지 않습니다.

일반적으로 방법은 이전과 동일합니다. 웹 채팅 버전 4.9.1 이상에서는 양방향 WebSocket을 설정하기 위한 기본 제공 지원이 있습니다. 이렇게 하면 웹 채팅 연결하는 대신 봇으로 호스트되는 Direct Line App Service 확장에 직접 연결할 수 https://directline.botframework.com/있습니다. 봇의 직접 회선 URL은 https://<your_app_service>.azurewebsites.net/.bot/앱 서비스 확장의 직접 회선 엔드포인트 입니다. 고유한 do기본 이름을 구성하거나 봇이 소버린 Azure 클라우드에서 호스트되는 경우 적절한 URL로 대체하고 경로를 추가하여 /.bot/ Direct Line App Service 확장의 REST API에 액세스합니다.

인증 문서의 지침에 따라 토큰에 대한 비밀을 교환합니다. 토큰 https://directline.botframework.com/v3/directline/tokens/generate을 가져오는 대신 Direct Line App Service 확장에서 https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate직접 토큰을 생성합니다.

토큰을 가져오는 방법을 보여 주는 예제는 웹 채팅 샘플을 참조하세요.

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

팁

JavaScript 봇 구현에서 아래와 같이 WebSocket이 web.config 파일에서 사용하도록 설정되어 있는지 확인합니다.

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

다음을 통해 공유

Direct Line App Service 확장과 함께 웹 채팅 사용

웹 채팅 클라이언트 통합

추가 리소스