Dela via

Anslut en robot för att Webbchatt

  • Artikel

GÄLLER FÖR: SDK v4

När du skapar en robot med Azure konfigureras Webbchatt-kanalen automatiskt åt dig. Den Webbchatt kanalen innehåller Webbchatt-kontrollen, vilket ger användarna möjlighet att interagera med roboten direkt på en webbsida.

Kanalen Webbchatt innehåller allt du behöver för att bädda in Webbchatt-kontrollen på en webbsida. Det gör du genom att hämta robotens hemliga nyckel och sedan bädda in kontrollen på en webbsida.

Förutsättningar

  • Ett Azure-konto. Om du inte redan har ett skapar du ett kostnadsfritt konto innan du börjar.
  • En befintlig robot som har publicerats i Azure.

Webbchatt säkerhetsöverväganden

När du använder Azure AI Bot Service-autentisering med Webbchatt finns det några viktiga säkerhetsöverväganden som du måste tänka på. Mer information finns i Säkerhetsöverväganden.

Bädda in Webbchatt-kontrollen på en webbsida

Följande bild visar de komponenter som ingår när du bäddar in Webbchatt-kontrollen på en webbsida.

Web Chat control components

Viktigt!

Använd Direct Line (med förbättrad autentisering) för att minska säkerhetsriskerna vid anslutning till en robot med hjälp av Webbchatt kontroll. Mer information finns i Utökad direktlinjeautentisering.

Hämta din robothemlighetsnyckel

  1. Gå till Azure-portalen och öppna roboten .
  2. Under Inställningar väljer du Kanaler. Välj sedan Webbchatt.
  3. Sidan Webbchatt öppnas. Välj standardwebbplatsen i listan med webbplatser.
  4. Kopiera den första hemliga nyckeln och inbäddningskoden.

Inbäddningsalternativ för utveckling

Alternativ 1 – Byt hemlighet mot en token och generera inbäddningen

Det här är ett bra alternativ om:

  • du kan köra en server-till-server-begäran om att byta ut din webbchatthemlighet mot en tillfällig token
  • du vill göra det svårt för andra utvecklare att bädda in din robot på sina webbplatser

Om du använder det här alternativet hindras inte andra utvecklare från att bädda in din robot på sina webbplatser, men det gör det svårt för dem att göra det.

Så här byter du hemligheten mot en token och genererar inbäddningen:

  1. Utfärda en GET-begäran till tokenutbytes-URL:en och skicka din webbchatthemlighet via Authorization rubriken. Rubriken Authorization använder schemat BotConnector och innehåller din hemlighet.

    • För en global robot är https://webchat.botframework.com/api/tokenstokenutbytes-URL:en .
    • För en regional robot anger du följande URL enligt den valda regionen:
    Region Token Exchange-URL
    Europa https://europe.webchat.botframework.com/api/tokens
    Indien https://india.webchat.botframework.com/api/tokens

  2. Svaret på DIN GET-begäran innehåller den token (omgiven av citattecken) som kan användas för att starta en konversation genom att återge Webbchatt kontroll. En token är endast giltig för en konversation. för att starta en annan konversation måste du generera en ny token.

  3. I den Inbäddade kod som du kopierade från Webbchatt-kanalen tidigare ändrar du parametern s= till t= och ersätter "YOUR_SECRET_HERE" med din token.

Kommentar

Token förnyas automatiskt innan de upphör att gälla.

Exempelbegäranden

För en global robot:

requestGET https://webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE

För en regional robot:

requestGET 
    ## Europe region
    https://europe.webchat.botframework.com/api/tokens
    ## India region
    https://india.webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE

Kommentar

För Azure Government skiljer sig url:en för tokenutbyte.

requestGET https://webchat.botframework.azure.us/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
Exempelsvar
"IIbSpLnn8sA.dBB.MQBhAFMAZwBXAHoANgBQAGcAZABKAEcAMwB2ADQASABjAFMAegBuAHYANwA.bbguxyOv0gE.cccJjH-TFDs.ruXQyivVZIcgvosGaFs_4jRj1AyPnDt1wk1HMBb5Fuw"
Exempel på HTML-kod
<!DOCTYPE html>
<html>
<body>
  <iframe id="chat" style="width: 400px; height: 400px;" src=''></iframe>
</body>
<script>

    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
    xhr.setRequestHeader('Authorization', 'BotConnector ' + 'YOUR SECRET HERE');
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
      if (xhr.readyState == 4  && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        document.getElementById("chat").src="https://webchat.botframework.com/embed/<botname>?t="+response
      }
    }

  </script>
</html>

Alternativ 2 – Bädda in webbchattkontrollen på din webbplats med hjälp av hemligheten

Använd det här alternativet om du vill att andra utvecklare enkelt ska kunna bädda in din robot på sina webbplatser.

Varning

Med det här alternativet exponeras den Webbchatt kanalhemlighetsnyckeln på klientwebbsidan. Använd det här alternativet endast i utvecklingssyfte och inte i en produktionsmiljö.

Så här bäddar du in roboten på en webbsida genom att ange hemligheten i inbäddad kod:

  1. Kopiera inbäddad kod från Webbchatt-kanalen i Azure-portalen (beskrivs i Hämta din robothemlighetsnyckel ovan).

  2. I den inbäddade koden ersätter du "YOUR_SECRET_HERE" med det hemliga nyckelvärde som du kopierade från samma sida.

Inbäddningsalternativ för produktion

Håll hemligheten dold, byt ut din hemlighet mot en token och generera inbäddningen

Det här alternativet exponerar inte Webbchatt kanalhemlighetsnyckeln på klientwebbsidan.

Klienten måste ange en token för att kunna kommunicera med roboten. Mer information om skillnaderna mellan hemligheter och token och för att förstå riskerna med att använda hemligheter finns i Direktradsautentisering.

Följande klientwebbsida visar hur du använder en token med Webbchatt. Om du har en regional robot eller Azure Gov-robot justerar du URL:erna från offentlig till myndighet.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  </head>
  <body>
    <h2>Web Chat bot client using Direct Line</h2>

    <div id="webchat" role="main"></div>

    <script>

     // "styleSet" is a set of CSS rules which are generated from "styleOptions"
     const styleSet = window.WebChat.createStyleSet({
         bubbleBackground: 'rgba(0, 0, 255, .1)',
         bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',

         botAvatarImage: '<your bot avatar URL>',
         botAvatarInitials: 'BF',
         userAvatarImage: '<your user avatar URL>',
         userAvatarInitials: 'WC',
         rootHeight: '100%',
         rootWidth: '30%'
      });

      // After generated, you can modify the CSS rules
      styleSet.textContent = {
         ...styleSet.textContent,
         fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
         fontWeight: 'bold'
      };

      const res = await fetch('https:<YOUR_TOKEN_SERVER/API>', { method: 'POST' });
      const { token } = await res.json();

      window.WebChat.renderWebChat(
        {
          directLine: window.WebChat.createDirectLine({ token }),
          userID: 'WebChat_UserId',
          locale: 'en-US',
          username: 'Web Chat User',
          locale: 'en-US',
          // Passing 'styleSet' when rendering Web Chat
          styleSet
        },
        document.getElementById('webchat')
      );
    </script>
  </body>
</html>

Exempel på hur du genererar en token finns i:

Ytterligare information