CODEWITHSUNDEEP
phpbotframeworktoken
Hessel
Hessel

Reputation: 762

How to fix token issue with webchat

The bot framework api to generate a directline token results in a token that webchat cannot handle.

Recently I noticed the webchat on my website was not able to make a directline connection anymore. Using the directline secret results in a working webchat. Using the bot framework api to generate a very long token (816 characters) that webchat cannot handle (resulting in a message like unable to connect. This used to work just fine but now its broke (and nothing changed as far as I know)

I use some PHP to call the api and get a token:

<?php
    $botSecret = 'DIRECLINE 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>

And Html\Javascript to show the webchat client

<html>
<body>
<div id="webchat" role="main"></div>   
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>  
       const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
         if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
           dispatch({
             type: 'WEB_CHAT/SEND_EVENT',
             payload: {
               name: 'webchat/join',
               value: { language: window.navigator.language }
             }
           });
         }
         return next(action);
       });
        window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: webChatToken }),
        store,
        styleOptions: {
        },
        userID: 'N/A',
        username: 'Web Chat User',
        locale: 'nl-NL'
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

I would expect a shorter token or at least a token that can be used to use webchat

Upvotes: 1

Views: 755

Answers (2)

tdurnford
tdurnford

Reputation: 3712

The BotFramework Development Team just deployed an update that allows you to use a DirectLine secret with the Web Chat endpoint, so you can now use either a DirectLine or a WebChat secret to connect Web Chat to your bot. 

const res = await fetch('https://webchat.botframework.com/api/tokens', {
    method: 'GET', 
    headers: { 
        Authorization: 'BotConnector <WEB_CHAT_SECRET | DIRECT_LINE_SECRET>'
    } 
});

const token = await res.json();

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

Hope this helps!

Upvotes: 2

Hessel
Hessel

Reputation: 762

Using a directline secret in a webchatclient results in a long token wit a length of > 800 (the length varies) and a 403 error translated into a Unable to Connect message in the client. x. Allthough the fact that the method to create a connection is called 'createDirectLine', webchat clients still need webchat secrets.

Upvotes: 0

Related Questions