Token Generation for Botframework Webchat

3
votes

I've been migrating my Direct Line Bot from Webchat v3 to v4. The new version demands the use of tokens rather than the Direct Line secret in the calling page. Here is the code (index.html) used to start the bot:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat: Full-featured bundle</title>

    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>

    <style>
         html, body {
            height: 100%
        }

         body {
            margin: 0
        }

         #webchat,
         #webchat > * {
             height: 100%;
             width: 100%;

        }


    </style>
</head>
<body>
       <div id="webchat" role="main"></div>

    <script>
    (async function () {
        const res = await fetch('https://bellamspt.azurewebsites.net/Forms/Webchat/directline/token', { method: 'POST' });

      const { token } = await res.json();

      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token })
      }, document.getElementById('webchat'));

      document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
   </script>
</body>
</html>

Question: What code do I need to write to generate the token in other to be called by https://bellamspt.azurewebsites.net/Forms/Webchat/directline/token ?? Realize it's got to be something like

POST https://directline.botframework.com/v3/directline/tokens/generate
Authorization: Bearer SECRET

but I don't know if it's got to be a php, js or other type of file to work.

Thanks in advance

3
tokenbotframework
Are you trying to exchange your DirectLine Secret for a token on the backend? If so, how is the backend for https://bellamspt.azurewebsites.net/ configured - are you using a framework like Express or Restify? – tdurnford
Yes I am. The bellamspt.azurewebsites.net is a simple asp.net website. Could please share some pointers about Express or Restify implementation? It would be also great if you could share some reference source code. Thx – Amintas Lopes Neto

3 Answers

1
votes

I used php to solve this. You could give it a try.

<?php
$botSecret = '<your secret>';
$response = wp_remote_get( 'https://webchat.botframework.com/api/tokens', array( 'headers' => 'Authorization: BotConnector ' . $botSecret ) );
if( is_array($response) ) {
  $header = $response['headers'];
  $token = $response['body'];
}
?>
<script type="text/javascript">
        var webChatToken = <?php echo $token; ?>;
</script>
1
votes

I had the same issue yesterday, I just post it here in case it helps anyone in the future. If you change your code to this it should work: 

    <!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat: Full-featured bundle</title>

    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>

    <style>
         html, body {
            height: 100%
        }

         body {
            margin: 0
        }

         #webchat,
         #webchat > * {
             height: 100%;
             width: 100%;

        }


    </style>
</head>
<body>
       <div id="webchat" role="main"></div>

    <script>
    (async function () {
        const res = await fetch('https://bellamspt.azurewebsites.net/Forms/Webchat/directline/token', 
{ method: 'POST', headers: { Authorization: 'write your direct line secret here' }});

      const { token } = await res.json();

      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token })
      }, document.getElementById('webchat'));

      document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
   </script>
</body>
</html>

You had to add the authorization in the header of the post request to generate the token in the async function. Unfortunately this might not be obvious from Microsoft's documentation on how the generate the token

0
votes

What you need to do is implement some kind of server side logic using whatever technology you're most comfortable with that uses the secret, which is kept only on your server, to generate a new token by making an HTTP request to the DirectLine channel as you point out above. Then, in your web page's start up logic, you make a request to get that token and, with the token, initialize the direct line instance in the web page. Using this approach ensures that nobody external ever gets a hold of your secret.

So, there is no one type of file to "make it work". You will need to choose Node, PHP, ASP.NET or any other server technology and implement it in the way you would any other HTTP request handler.

This article will help in understanding the authentication concepts and APIs and here's a blog post that shows how you might do it with ASP.NET and Node.