Direct Line App Service 拡張機能で Web チャットを使用する

2025-05-10

2023 年 9 月 1 日から、ネットワーク分離に Azure Service Tag メソッドを使用することを強くお勧めします。 DL-ASE の使用率は、非常に具体的なシナリオに限定する必要があります。運用環境でこのソリューションを実装する前に、サポートチームにガイダンスを提供することをお勧めします。

適用対象: SDK v4

この記事では、Direct Line App Service 拡張機能で Web チャットを使用する方法について説明します。ネイティブの Direct Line App Service 拡張機能のサポートには、Web チャットバージョン 4.9.1 以降が必要です。

Web チャットクライアントを統合する

注

Direct Line App Service 拡張機能を介して送信されたアダプティブカードは、Direct Line チャネルの他のバージョンを介して送信されるものと同じ処理を受けられません。このため、Direct Line App Service 拡張機能から Web チャットに送信されるアダプティブカードの JSON 表現では、カードの作成時にフィールドがボットによって省略された場合、チャネルによって既定値は追加されません。

一般的に言えば、アプローチは以前と同じです。 Web チャットのバージョン 4.9.1 以降では、双方向 WebSocket を確立するためのサポートが組み込まれています。これにより、Web チャットは、 https://directline.botframework.com/に接続するのではなく、ボットでホストされている Direct Line App Service 拡張機能に直接接続できます。ボットの Direct Line URL は https://<your_app_service>.azurewebsites.net/.bot/で、アプリケーションサービス拡張の Direct Line エンドポイント になります。独自のドメイン名を構成する場合、またはボットがソブリン 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 拡張機能から直接トークンを生成します。

トークンをフェッチする方法を示す例については、 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>

ヒント

JavaScript ボットの実装では、次に示すように、 web.config ファイルで WebSocket が有効になっていることを確認します。

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

次の方法で共有

Direct Line App Service 拡張機能で Web チャットを使用する

Web チャット クライアントを統合する

その他のリソース

Web チャットクライアントを統合する