Udostępnij za pośrednictwem

Łączenie bota z czatem internetowym

  • Artykuł

DOTYCZY: SDK w wersji 4

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

Kanał czatu internetowego zawiera wszystko, czego potrzebujesz, aby osadzić kontrolkę Czat internetowy na stronie internetowej. W tym celu uzyskasz klucz tajny bota, a następnie osadzisz kontrolkę na stronie internetowej.

Warunki wstępne

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

Zagadnienia dotyczące zabezpieczeń czatu internetowego

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

Osadzanie kontrolki czatu internetowego na stronie internetowej

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

składników sterowania czatem internetowym

Ważny

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

Uzyskaj klucz tajny bota

  1. Przejdź do portalu Azure i otwórz swojego bota.
  2. W obszarze Ustawienia wybierz pozycję Kanały . Następnie wybierz Web Chat.
  3. Zostanie otwarta strona czatu internetowego. Wybierz domyślną witrynę z listy witryn .
  4. Skopiuj pierwszy klucz tajny i kod osadzania.

Opcje osadzania programowania

Opcja 1 — wymień swoją tajemnicę na token i wygeneruj osadzenie

Jest to dobra opcja, jeśli:

  • Możesz wykonać żądanie serwer-serwer w celu wymiany tajemnicy czatu internetowego na tymczasowy token.
  • 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ć swój sekret na token i wygenerować kod osadzania:

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

    • W przypadku bota globalnego adres URL wymiany tokenów jest https://webchat.botframework.com/api/tokens.
    • W przypadku bota regionalnego wprowadź następujący adres URL zgodnie z wybranym regionem:
    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 (w cudzysłowie), który można użyć do rozpoczęcia konwersacji poprzez renderowanie kontrolki czatu internetowego. Token jest ważny tylko dla jednej konwersacji; aby rozpocząć inną konwersację, musisz wygenerować nowy token.

  3. W sekcji osadzonego kodu, którą wcześniej skopiowałeś z kanału czatu internetowego, zmień parametr s= na t= i zastąp "YOUR_SECRET_HERE" swoim tokenem.

Notatka

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

Notatka

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 — osadź kontrolkę czatu na stronie w swojej witrynie internetowej przy użyciu sekretu

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 czatu internetowego 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 sekret w kodzie Embedded :

  1. Skopiuj kod Embedded z kanału czatu internetowego w witrynie Azure Portal (opisany w Pobierz klucz tajny bota powyżej).

  2. W ramach tego osadzonego koduzastąp "YOUR_SECRET_HERE" kluczem tajnym o wartości, skopiowanym z tej samej strony.

Opcja osadzania produkcyjnego

Zachowaj swój sekret w tajemnicy, zamień swój sekret na token i wygeneruj osadzenie

Ta opcja nie uwidacznia klucza tajnego kanału czatu internetowego na stronie internetowej klienta.

Klient musi podać token, aby komunikować się z botem. Aby dowiedzieć się więcej o różnicach między sekretami a tokenami oraz zrozumieć czynniki ryzyka związane z używaniem sekretów, zobacz uwierzytelnianie Direct Line.

Na poniższej stronie internetowej klienta pokazano, jak używać tokenu z czatem internetowym. 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