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

2025-05-10

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을 설정하기 위한 기본 제공 지원이 있다는 점을 제외하고. 웹 채팅이 https://directline.botframework.com/에 연결하는 대신 봇과 호스트된 Direct Line App Service 확장에 직접 연결할 수 있도록 합니다. 봇의 다이렉트 라인 URL은 앱 서비스 확장의 다이렉트 라인 https://<your_app_service>.azurewebsites.net/.bot/에 위치할 것입니다. 도메인 이름을 자체 구성하거나 봇이 Azure 주권 클라우드에 호스트되는 경우 적절한 URL로 바꾸고 /.bot/ 경로를 추가하여 Direct Line App Service 확장의 REST API에 액세스하십시오.

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

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

<!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 봇 구현에서 아래와 같이 web.config 파일에서 WebSocket이 사용하도록 설정되어 있는지 확인합니다.

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

다음을 통해 공유

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

웹 채팅 클라이언트 통합

추가 리소스