Megosztás a következőn keresztül:

Robot csatlakoztatása webes csevegéshez

VONATKOZIK: SDK v4

Amikor létrehoz egy botot az Azure-ral, a webes csevegési csatorna automatikusan konfigurálva lesz az Ön számára. A webes csevegési csatorna tartalmazza a Webes csevegés vezérlő, amely lehetővé teszi a felhasználók számára, hogy közvetlenül egy weblapon kommunikáljanak a robottal.

A webes csevegési csatorna mindent tartalmaz, amire szüksége van a webes csevegés vezérlő weblapba való beágyazásához. Ehhez lekérheti a robot titkos kulcsát, majd beágyazhatja a vezérlőt egy weblapra.

Előfeltételek

  • Egy Azure-fiók. Ha még nem rendelkezik ilyen fiókkal, a kezdés előtt hozzon létre egy ingyenes fiókot.
  • Az Azure-ban közzétett meglévő robot.

A webes csevegés biztonsági szempontjai

Ha Azure AI Bot Service-hitelesítést használ a webes csevegéssel, figyelembe kell vennie néhány fontos biztonsági szempontot. További információ: Biztonsági szempontok.

A Webes csevegés vezérlő beágyazása weblapra

Az alábbi képen a webes csevegés vezérlőelem beágyazásakor érintett összetevők láthatók egy weblapon.

Webes csevegés vezérlő összetevői

Fontos

A közvetlen vonallal (továbbfejlesztett hitelesítéssel) csökkentheti a biztonsági kockázatokat, amikor a webes csevegés vezérlőjével csatlakozik egy robothoz. További információ: Direct Line továbbfejlesztett hitelesítés.

A robot titkos kulcsának lekérése

  1. Menjen a Azure portal oldalra, és nyissa meg a botot.
  2. A Beállításokterületen válassza Csatornáklehetőséget. Ezután válassza a Webes csevegéslehetőséget.
  3. Megnyílik a webcsevegés oldal. A Webhelyeklistájából válassza ki az alapértelmezett webhely.
  4. Másolja az első Titkos kulcs és a Beágyazási kód.

Fejlesztési beágyazási lehetőségek

1. lehetőség – Cserélje le a titkát egy tokenre, és hozza létre a beágyazást

Ez egy jó lehetőség, ha:

  • Kiszolgálók közötti kérést hajthat végre a webes csevegés titkosító kulcsának ideiglenes tokenre való cseréjére.
  • szeretné megnehezíteni más fejlesztők számára, hogy beágyazhassák a robotot a webhelyükre

Ez a lehetőség nem akadályozza meg teljesen a többi fejlesztőt abban, hogy beágyazza a robotot a webhelyeikbe, de ez megnehezíti számukra ezt.

A titkos kulcs cseréje egy tokenre és a beágyazás generálása:

  1. Adjon ki egy GET kérést a tokencsere URL-címére, és adja át a webes csevegés titkos kódját a Authorization fejlécen keresztül. A Authorization fejléc a BotConnector sémát használja, és tartalmazza a titkos kódját.

    • Globális robot esetén a tokencsere URL-címe https://webchat.botframework.com/api/tokens.
    • Regionális robot esetén adja meg a következő URL-címet a kiválasztott régió szerint:
    Régió Token Kicserélési URL
    Európa https://europe.webchat.botframework.com/api/tokens
    India https://india.webchat.botframework.com/api/tokens

  2. A GET kérésre adott válasz tartalmazza a token-t (idézőjelek között), amely felhasználható a webes csevegés vezérlőjének megjelenítésével egy beszélgetés elindítására. A jogkivonat csak egy beszélgetésre érvényes; Egy másik beszélgetés indításához létre kell hoznia egy új jogkivonatot.

  3. A webes csevegési csatornáról korábban másolt beágyazott beágyazott kódon belül módosítsa a s= paramétert t=, és cserélje le a "YOUR_SECRET_HERE" kifejezést a jogkivonatra.

Jegyzet

A tokenek automatikusan megújulnak, mielőtt lejárnának.

Példakérések

Globális robot esetén:

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

Regionális robot esetén:

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

Jegyzet

Az Azure Government esetében a tokencsere URL-címe eltérő.

requestGET https://webchat.botframework.azure.us/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
Példa válasz
"IIbSpLnn8sA.dBB.MQBhAFMAZwBXAHoANgBQAGcAZABKAEcAMwB2ADQASABjAFMAegBuAHYANwA.bbguxyOv0gE.cccJjH-TFDs.ruXQyivVZIcgvosGaFs_4jRj1AyPnDt1wk1HMBb5Fuw"
Példa HTML-kódra
<!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>

2. lehetőség – A webes csevegés vezérlő beágyazása a webhelyre a titkos kód használatával

Ezt a lehetőséget akkor használhatja, ha azt szeretné, hogy más fejlesztők egyszerűen beágyazhassák a robotot a webhelyükre.

Figyelmeztetés

Ezzel a beállítással a webes csevegési csatorna titkos kulcsa megjelenik az ügyfél weblapján. Ezt a lehetőséget csak fejlesztési célokra használhatja, éles környezetben nem.

A robot beágyazása egy weblapra a Embedded-kódtitkos kódjának megadásával:

  1. Másolja ki a Embedded-kód az Azure Portal webes csevegési csatornájából (a fenti A robot titkos kulcsának lekérése című cikkben).

  2. Az Beágyazott kódbelül cserélje le a "YOUR_SECRET_HERE" szót az ugyanazon lapról másolt titkos kulcs értékre.

Gyártási beágyazási lehetőség

Rejtse el a titkos kódot, cserélje le a titkos kódját egy jogkivonatra, és hozza létre a beágyazást

Ez a beállítás nem teszi elérhetővé a webes csevegési csatorna titkos kulcsát az ügyfélweblapon.

Az ügyfélnek meg kell adnia egy tokent a robottal való beszélgetéshez. A titkos kódok és a jogkivonatok közötti különbségekről, valamint a titkos kódok használatával járó kockázatokról a Közvetlen vonalas hitelesítéscímű témakörben olvashat.

Az alábbi ügyfél weboldal bemutatja, hogyan használhat egy tokent a webes csevegéssel. Ha regionális vagy Azure Gov-robottal rendelkezik, módosítsa az URL-címeket a nyilvánosságtól a kormányzatiig.

<!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éldák tokenek létrehozására:

További információk