Połączenie bota do czat internetowy

  • Artykuł

DOTYCZY: ZESTAW SDK w wersji 4

Podczas tworzenia bota za pomocą platformy Azure kanał czat internetowy jest automatycznie konfigurowany. Kanał czat internetowy zawiera kontrolkę czat internetowy, która umożliwia użytkownikom interakcję z botem bezpośrednio na stronie internetowej.

Kanał czat internetowy zawiera wszystkie elementy potrzebne do osadzenia kontrolki czat internetowy na stronie internetowej. W tym celu uzyskasz klucz tajny bota, a następnie osadzisz kontrolkę na stronie internetowej.

Wymagania wstępne

  • Konto Azure. Jeśli jeszcze go nie masz, przed rozpoczęciem utwórz bezpłatne konto .
  • Istniejący bot opublikowany na platformie Azure.

czat internetowy zagadnienia dotyczące zabezpieczeń

W przypadku korzystania z uwierzytelniania usługi Azure AI Bot Service z czat internetowy należy pamiętać o ważnych kwestiach dotyczących zabezpieczeń. Aby uzyskać więcej informacji, zobacz Zagadnienia dotyczące zabezpieczeń.

Osadzanie kontrolki czat internetowy na stronie internetowej

Na poniższej ilustracji przedstawiono składniki używane podczas osadzania kontrolki czat internetowy na stronie internetowej.

Web Chat control components

Ważne

Użyj funkcji Direct Line (z rozszerzonym uwierzytelnianiem), aby ograniczyć zagrożenia bezpieczeństwa podczas nawiązywania połączenia z botem przy użyciu kontroli czat internetowy. Aby uzyskać więcej informacji, zobacz Uwierzytelnianie rozszerzone direct line.

Uzyskiwanie klucza tajnego bota

  1. Przejdź do witryny Azure Portal i otwórz bota.
  2. W obszarze Ustawienia wybierz pozycję Kanały. Następnie wybierz pozycję czat internetowy.
  3. Zostanie otwarta strona czat internetowy. Wybierz witrynę domyślną z listy Witryny.
  4. Skopiuj pierwszy klucz tajny i kod osadzania.

Opcje osadzania programowania

Opcja 1 — wymiana wpisu tajnego dla tokenu i generowanie osadzania

Jest to dobra opcja, jeśli:

  • Możesz wykonać żądanie serwer-serwer w celu wymiany wpisu tajnego czatu internetowego dla tokenu tymczasowego
  • chcesz utrudnić innym deweloperom osadzanie bota w swoich witrynach internetowych

Użycie tej opcji nie uniemożliwi innym deweloperom osadzania bota w swoich witrynach internetowych, ale utrudnia im to.

Aby wymienić wpis tajny dla tokenu i wygenerować osadzanie:

  1. Wydaj żądanie GET do adresu URL wymiany tokenów i przekaż wpis tajny czatu internetowego za pośrednictwem nagłówka Authorization . Nagłówek Authorization używa schematu BotConnector i zawiera wpis tajny.

    • W przypadku bota globalnego adres URL wymiany tokenów to https://webchat.botframework.com/api/tokens.
    • W przypadku bota regionalnego wprowadź następujący adres URL zgodnie z wybranym regionem:
    Region (Region) Adres URL wymiany tokenów
    Europa https://europe.webchat.botframework.com/api/tokens
    Indie https://india.webchat.botframework.com/api/tokens

  2. Odpowiedź na żądanie GET będzie zawierać token (otoczony cudzysłowami), którego można użyć do rozpoczęcia konwersacji przez renderowanie kontrolki czat internetowy. Token jest ważny tylko dla jednej konwersacji; aby rozpocząć inną konwersację, musisz wygenerować nowy token.

  3. We wcześniejszym kodzie osadzonym skopiowany z kanału czat internetowy zmień s= parametr t= na i zastąp ciąg "YOUR_SECRET_HERE" tokenem.

Uwaga

Tokeny zostaną automatycznie odnowione przed ich wygaśnięciem.

Przykładowe żądania

W przypadku bota globalnego:

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

Dla bota regionalnego:

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

Uwaga

W przypadku platformy Azure Government adres URL wymiany tokenów jest inny.

requestGET https://webchat.botframework.azure.us/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
Przykładowa odpowiedź
"IIbSpLnn8sA.dBB.MQBhAFMAZwBXAHoANgBQAGcAZABKAEcAMwB2ADQASABjAFMAegBuAHYANwA.bbguxyOv0gE.cccJjH-TFDs.ruXQyivVZIcgvosGaFs_4jRj1AyPnDt1wk1HMBb5Fuw"
Przykładowy kod 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>

Opcja 2 — osadzanie kontrolki czatu internetowego w witrynie internetowej przy użyciu wpisu tajnego

Użyj tej opcji, jeśli chcesz zezwolić innym deweloperom na łatwe osadzanie bota w swoich witrynach internetowych.

Ostrzeżenie

Dzięki tej opcji klucz tajny kanału czat internetowy jest uwidoczniony na stronie internetowej klienta. Użyj tej opcji tylko do celów programistycznych, a nie w środowisku produkcyjnym.

Aby osadzić bota na stronie internetowej, określając wpis tajny w kodzie osadzonym:

  1. Skopiuj kod osadzony z kanału czat internetowy w witrynie Azure Portal (opisany w sekcji Uzyskiwanie klucza tajnego bota powyżej).

  2. W tym kodzie osadzonym zastąp wartość "YOUR_SECRET_HERE" wartością klucza wpisu tajnego skopiowaną z tej samej strony.

Opcja osadzania produkcyjnego

Przechowywanie wpisu tajnego w ukryciu, wymiana wpisu tajnego dla tokenu i generowanie osadzania

Ta opcja nie uwidacznia klucza tajnego kanału czat internetowy na stronie internetowej klienta.

Klient musi podać token, aby komunikować się z botem. Aby dowiedzieć się więcej o różnicach między wpisami tajnymi i tokenami oraz poznać czynniki ryzyka związane z używaniem wpisów tajnych, zobacz Uwierzytelnianie za pomocą wiersza bezpośredniego.

Poniższa strona internetowa klienta pokazuje, jak używać tokenu z czat internetowy. Jeśli masz bota regionalnego lub usługi Azure Gov, dostosuj adresy URL z publicznego do instytucji rządowych.

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

Aby zapoznać się z przykładami dotyczącymi generowania tokenu, zobacz:

Dodatkowe informacje