웹 채팅에서 Direct Line App Service 확장 사용Use Web Chat with the direct line app service extension

적용 대상: SDK v4APPLIES TO: SDK v4

이 문서에서는 Direct Line App Service 확장과 함께 웹 채팅 사용하는 방법을 설명합니다.This article describes how to use Web Chat with the Direct Line app service extension. 웹 채팅 버전 4.9.1 이상은 네이티브 Direct Line App Service 확장 지원에 필요합니다.Web Chat version 4.9.1 or later is required for native Direct Line app service extension support.

웹 채팅 클라이언트 통합Integrate Web Chat client

참고

Direct Line App Service 확장을 통해 전송되는 적응형 카드는 다른 버전의 Direct Line 채널을 통해 전송되는 카드와 다른 방식으로 처리됩니다.Adaptive Cards sent through the Direct Line App Service Extension do not undergo the same processing as those sent through other versions of the Direct Line channel. 따라서 Direct Line App Service 확장에서 웹 채팅으로 전송된 적응형 카드의 JSON 표현에는 카드가 생성될 때 봇에서 필드를 생략하는 경우 채널에서 추가하는 기본값이 없습니다.Due to this the JSON representation of the Adaptive Card sent to Web Chat from the Direct Line App Service Extension will not have default values added by the channel if the fields are omitted by the bot when the card is created.

일반적으로 방법은 이전과 동일합니다.Generally speaking, the approach is the same as before. 웹 채팅 버전 4.9.1 이상에서는 에 연결하는 대신 봇과 호스트되는 Direct Line App Service 확장에 직접 연결하는 양방향 WebSocket 을 설정할 수 있는 기본 제공 지원이 https://directline.botframework.com/ 있습니다.With the exception that in version 4.9.1 or later of Web Chat there is built-in support for establishing a two-way WebSocket, which instead of connecting to https://directline.botframework.com/ connects directly to the Direct Line app service extension hosted with your bot. 봇의 Direct Line URL은 앱 https://<your_app_service>.azurewebsites.net/.bot/ 서비스 확장의 Direct Line 엔드포인트인 입니다.The Direct Line URL for your bot will be https://<your_app_service>.azurewebsites.net/.bot/, the Direct Line endpoint on your app service extension. 고유한 도메인 이름을 구성하거나 봇이 소버린 Azure 클라우드에서 호스트되는 경우 적절한 URL로 대체하고 /.bot/ 경로를 추가하여 Direct Line App Service 확장의 REST API에 액세스합니다.If you configure your own domain name, or your bot is hosted in a sovereign Azure cloud, substitute in the appropriate URL and append the /.bot/ path to access the Direct Line app service extension's REST APIs.

  1. 인증 문서의 지침에 따라 토큰의 비밀을 교환합니다.Exchange the secret for a token by following the instructions in the Authentication article. 에서 토큰을 가져오는 대신 의 https://directline.botframework.com/v3/directline/tokens/generate Direct Line App Service 확장에서 직접 토큰을 생성합니다. https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generateInstead of obtaining a token at https://directline.botframework.com/v3/directline/tokens/generate, you will generate the token directly from your Direct Line App Service Extension at https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

  2. 토큰을 인출하는 방법을 보여 주는 예제는 웹 채팅 샘플을 참조하세요.For an example that shows how to fetch a token see Web Chat Samples.

    <!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-minimal.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: It is highly recommended to replace the below fetch with a call to your own token service as described in step 2 above, and 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>'}});
            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 파일에서 WebSockets가 사용하도록 설정되어 있는지 확인합니다.In the JavaScript bot implementation, make sure that WebSockets are enabled in the web.config file, as shown below.

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