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

[アーティクル]
12/26/2023

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

この記事の対象: SDK v4

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

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

Note

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

一般に、このアプローチは以前と同じです。バージョン 4.9.1 以降のWeb チャットを別として、双方向 [WebSocket] を確立するためのサポートが組み込まれています。これにより、Web チャットは、https://directline.botframework.com/ に接続するのではなく、ボットでホストされている Direct Line App Service 拡張機能に直接接続できます。ボットの Direct Line URL は https://<your_app_service>.azurewebsites.net/.bot/ になり、App Service 拡張機能の Direct Line エンドポイント になります。独自のドメイン名を構成する場合、またはボットがソブリン Azure クラウドでホストされている場合は、適切な URL で置き換え、Direct Line App Service 拡張機能の REST API にアクセスするための /.bot/ パスを追加します。

「認証」の記事の手順に従って、トークンのシークレットを交換します。ただし、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>

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

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

その他のリソース

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