Share via

Menggunakan Web Chat dengan ekstensi Direct Line App Service

  • Artikel

Mulai 1 September 2023, sangat disarankan untuk menggunakan metode Tag Layanan Azure untuk isolasi jaringan. Pemanfaatan DL-ASE harus terbatas pada skenario yang sangat spesifik. Sebelum menerapkan solusi ini di lingkungan produksi, sebaiknya konsultasikan dengan tim dukungan Anda untuk mendapatkan panduan.

BERLAKU UNTUK: SDK v4

Artikel ini menjelaskan cara menggunakan Web Chat dengan ekstensi Direct Line App Service. Web Chat versi 4.9.1 atau yang lebih baru diperlukan untuk dukungan ekstensi Direct Line App Service asli.

Mengintegrasikan klien Web Chat

Catatan

Kartu Adaptif yang dikirim melalui ekstensi Direct Line App Service tidak menjalani pemrosesan yang sama dengan yang dikirim melalui versi lain saluran Direct Line. Karena ini, representasi JSON dari Kartu Adaptif yang dikirim ke Web Chat dari ekstensi Direct Line App Service tidak akan memiliki nilai default yang ditambahkan oleh saluran jika bidang dihilangkan oleh bot saat kartu dibuat.

Secara umum, pendekatannya sama seperti sebelumnya. Dengan pengecualian bahwa di Web Chat versi 4.9.1 atau yang lebih baru ada dukungan bawaan untuk membuat WebSocket dua arah. Ini memungkinkan Web Chat untuk langsung terhubung ke ekstensi Direct Line App Service yang dihosting dengan bot Anda alih-alih menyambungkan ke https://directline.botframework.com/. URL Direct Line untuk bot Anda adalah https://<your_app_service>.azurewebsites.net/.bot/, titik akhir Direct Line pada ekstensi layanan aplikasi Anda. Jika Anda mengonfigurasi nama domain Anda sendiri, atau bot Anda dihosting di cloud Azure yang berdaulat, ganti di URL yang sesuai dan tambahkan /.bot/ jalur untuk mengakses REST API ekstensi Direct Line App Service.

  1. Tukar rahasia dengan token dengan mengikuti instruksi di artikel Autentikasi . Alih-alih mendapatkan token di https://directline.botframework.com/v3/directline/tokens/generate, Anda akan menghasilkan token langsung dari ekstensi Direct Line App Service Anda di https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

  2. Untuk contoh yang memperlihatkan cara mengambil token, lihat Sampel Obrolan 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>

    Tip

    Dalam implementasi bot JavaScript, pastikan bahwa WebSocket diaktifkan dalam file web.config , seperti yang ditunjukkan di bawah ini.

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