Utiliser Chat Web avec l’extension App Service Direct Line

Article
01/03/2024

À compter du 1er septembre 2023, il est fortement recommandé d’utiliser la méthode Étiquette de service Azure pour l’isolement réseau. L’utilisation de DL-ASE doit se limiter à des scénarios très spécifiques. Avant de mettre en œuvre cette solution dans un environnement de production, nous vous recommandons de demander conseil à votre équipe de support.

S’APPLIQUE À : SDK v4

Le présent article explique comment utiliser Chat Web avec l’extension App Service Direct Line. Chat Web version 4.9.1 ou ultérieure est nécessaire à la prise en charge native de l’extension App Service Direct Line.

Intégrer le client WebChat

Remarque

Les cartes adaptatives envoyées par le biais de l’extension App Service Direct Line ne sont pas traitées de la même façon que celles envoyées par le biais d’autres versions du canal Direct Line. Pour cette raison, le canal n’ajoute pas de valeurs par défaut à la représentation JSON de la carte adaptative envoyée à Chat Web à partir de l’extension App Service Direct Line si les champs sont omis par le bot lors de la création de la carte.

De façon générale, l’approche est la même que précédemment. À l’exception de la version 4.9.1 ou ultérieure de Chat Web il existe une prise en charge intégrée de l’établissement d’un WebSocket bidirectionnel. Chat Web peut ainsi se connecter directement à l’extension App Service Direct Line hébergée avec votre bot au lieu de se connecter à https://directline.botframework.com/. L’URL Direct Line de votre bot sera https://<your_app_service>.azurewebsites.net/.bot/, le point de terminaison Direct Line sur votre extension App Service. Si vous configurez votre propre nom de domaine ou que votre bot est hébergé dans un cloud Azure souverain, remplacez l’URL appropriée et ajoutez le chemin d’accès /.bot/ pour accéder aux API REST de l’extension App Service Direct Line.

Échangez le secret pour un jeton en suivant les instructions fournies dans l’article Authentification. Toutefois, au lieu d’obtenir un jeton à l’emplacement https://directline.botframework.com/v3/directline/tokens/generate, vous générerez le jeton directement à partir de votre extension App Service Direct Line à l’emplacement https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate.

Pour obtenir un exemple montrant comment extraire un jeton, reportez-vous aux modèles de Chat 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>

Conseil

Dans l’implémentation du bot JavaScript, vérifiez que les WebSockets sont activés dans le fichier web.config, comme indiqué ci-dessous.

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

Utiliser Chat Web avec l’extension App Service Direct Line

Intégrer le client WebChat

Ressources supplémentaires