Připojení robota k Webový chat

Článek
03/05/2024

PLATÍ PRO: SDK v4

Když vytvoříte robota s Azure, kanál Webový chat se automaticky nakonfiguruje za vás. Kanál Webový chat obsahuje ovládací prvek Webový chat, který umožňuje uživatelům pracovat s robotem přímo na webové stránce.

Kanál Webový chat obsahuje vše, co potřebujete k vložení ovládacího prvku Webový chat na webovou stránku. Uděláte to tak, že získáte tajný klíč robota a pak tento ovládací prvek vložíte na webovou stránku.

Požadavky

Účet Azure. Pokud ho ještě nemáte, vytvořte si před zahájením bezplatný účet .
Existující robot publikovaný do Azure.

aspekty zabezpečení Webový chat

Pokud používáte ověřování Azure AI Bot Service s Webový chat, je potřeba mít na paměti některé důležité aspekty zabezpečení. Další informace najdete v tématu Aspekty zabezpečení.

Vložení ovládacího prvku Webový chat na webovou stránku

Následující obrázek ukazuje komponenty, které jsou součástí vložení ovládacího prvku Webový chat na webovou stránku.

Web Chat control components

Důležité

Pomocí Direct Line (s rozšířeným ověřováním) můžete zmírnit rizika zabezpečení při připojování k robotovi pomocí ovládacího prvku Webový chat. Další informace naleznete v tématu Rozšířené ověřování direct line.

Získání tajného klíče robota

Přejděte na Web Azure Portal a otevřete robota.
V části Nastavení vyberte Kanály. Pak vyberte Webový chat.
Otevře se Webový chat stránka. Ze seznamu webů vyberte výchozí web.
Zkopírujte první tajný klíč a kód pro vložení.

Možnosti vkládání pro vývoj

Možnost 1 – Výměna tajného kódu pro token a vygenerování vložení

Toto je dobrá možnost, pokud:

Můžete spustit požadavek na server pro výměnu tajného kódu webového chatu za dočasný token.
chcete ostatním vývojářům ztížit vkládání robota na jejich weby.

Použití této možnosti nezabrání úplně ostatním vývojářům v vkládání robota na jejich weby, ale znesnadňuje jim to.

Výměna tajného kódu pro token a vygenerování vložení:

Vyžádejte požadavek GET na adresu URL výměny tokenů a předejte tajný kód webového chatu prostřednictvím hlavičkyAuthorization. Hlavička Authorization používá BotConnector schéma a obsahuje váš tajný kód.
- Pro globálního robota je https://webchat.botframework.com/api/tokensadresa URL výměny tokenů .
- V případě místního robota zadejte následující adresu URL podle vybrané oblasti:
Oblast Adresa URL výměny tokenů

Evropě https://europe.webchat.botframework.com/api/tokens

Indie https://india.webchat.botframework.com/api/tokens
Odpověď na požadavek GET bude obsahovat token (obklopený uvozovkami), který se dá použít k zahájení konverzace vykreslením ovládacího prvku Webový chat. Token je platný pouze pro jednu konverzaci; pokud chcete zahájit další konverzaci, musíte vygenerovat nový token.
V kódu Embedded, který jste zkopírovali z kanálu Webový chat dříve, změňte s= parametr na t= YOUR_SECRET_HERE a nahraďte tokenem.

Oblast	Adresa URL výměny tokenů
Evropě	https://europe.webchat.botframework.com/api/tokens
Indie	https://india.webchat.botframework.com/api/tokens

Poznámka:

Tokeny se před vypršením jejich platnosti automaticky obnoví.

Příklady požadavků

Globální robot:

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

Pro místního robota:

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

Poznámka:

V případě Azure Government se adresa URL výměny tokenů liší.

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

Příklad odpovědi

"IIbSpLnn8sA.dBB.MQBhAFMAZwBXAHoANgBQAGcAZABKAEcAMwB2ADQASABjAFMAegBuAHYANwA.bbguxyOv0gE.cccJjH-TFDs.ruXQyivVZIcgvosGaFs_4jRj1AyPnDt1wk1HMBb5Fuw"

Příklad kódu HTML

<!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>

Možnost 2 : Vložení ovládacího prvku webového chatu na web pomocí tajného kódu

Tuto možnost použijte, pokud chcete umožnit ostatním vývojářům snadné vkládání robota na jejich weby.

Upozorňující

Pomocí této možnosti se tajný klíč kanálu Webový chat zobrazí na webové stránce klienta. Tuto možnost použijte jenom pro účely vývoje a ne v produkčním prostředí.

Pokud chcete robota vložit na webovou stránku zadáním tajného kódu v rámci vloženého kódu:

Zkopírujte vložený kód z kanálu Webový chat na webu Azure Portal (popsaný v části Získání tajného klíče robota výše).
V rámci vloženého kódu nahraďte "YOUR_SECRET_HERE" hodnotou tajného klíče , kterou jste zkopírovali ze stejné stránky.

Možnost vkládání do produkčního prostředí

Skrytí tajného kódu, výměna tajného kódu pro token a vygenerování vložení

Tato možnost nezpřístupňuje tajný klíč kanálu Webový chat na webové stránce klienta.

Klient musí poskytnout token pro komunikaci s robotem. Informace o rozdílech mezi tajnými kódy a tokeny a vysvětlení rizik spojených s používáním tajných kódů najdete v tématu Ověřování direct line.

Následující webová stránka klienta ukazuje, jak používat token s Webový chat. Pokud máte místního robota nebo robota Azure Gov, upravte adresy URL z veřejného prostředí do státní správy.

<!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>

Příklady, jak vygenerovat token, najdete tady:

Sdílet prostřednictvím