Transparent BOT authentication with Microsoft Teams

Hi,

At the time of writing this blog post, the BOT framework is still in preview so things are subject to change! However, if you already played with it and tried to enable the Teams Channel for one of your BOTs, you’ll see that it behaves differently than for the WebChat Channel.

Indeed, attachments are not handled the same way and although the user is automatically recognized in the Teams Channel, I couldn’t find any way to generate a Graph AccessToken (or anything else) by leveraging this information.This means that if you want to interact with any Azure Active Directory protected API, you’ll have to prompt the user for login (unless I missed something).

It’s a bit a pity because the user is already authenticated when launching the chat window. So, I managed to come with an alternative that is probably not the best one but that could be interesting should the company you work for, absolutely want a transparent/automatic authentication with your BOT. As you know, SSO is on everyone’s lips and the average employee hates when being prompted for authentication, especially if he is already authenticated in Teams.

So, I recently wrote another blog post that explains how to achieve automatic authentication with the webchat channel and I’m going to build on that idea with Microsoft Teams. As you might know, Teams enables developers to add Content Pages and using the technique I’m defining in the other blog post, on can create a content page that points to our custom webchat controller. Overall, this is what you get as a Teams end user:

bot4

You see your BOT appearing in a tab instead of using the built-in chat box. Of course, the BOT experience will be different as it will be exactly as the one you have using the webchat channel.

I wouldn’t recommend you to go for such an approach unless you can’t make otherwise but I still see two advantages here: 1) the BOT is available right from the tab. As you know, at the time of writing, Teams’ search engine doesn’t search for BOTs as you must know the BOT ID to find it. 2) you will offer a coherent experience across channels (web and teams). So, let’s now see how to build such a tab. However, if in the future you can achieve SSO with BOTs with the Teams channel, I’d recommed sticking to that.

Let’s see how to get that up & running in Teams. In your Azure hosted web app (see my other blog post), add two pages:

tabconfig.html
tabremove.html

Make sure this page are anymously available and they should contain the following code:

<!DOCTYPE html>
<html>
  <body>
    <script src="https://statics.teams.microsoft.com/sdk/v0.3/js/MicrosoftTeams.min.js"></script>
    <script type="text/javascript">
      microsoftTeams.initialize();
      microsoftTeams.settings.registerOnSaveHandler(function(saveEvent) {      

          microsoftTeams.settings.setSettings({
              contentUrl: "https://yourwebapp.azurewebsites.net/api/webchat",
            suggestedTabName: "a bot",
            websiteUrl: "https://yourwebapp.azurewebsites.net/",
            removeUrl: window.location.origin + "/tabremove.html"
          });

        saveEvent.notifySuccess();
      });
      microsoftTeams.settings.setValidityState(true);

    </script>
  </body>
</html>

where you indicate to Teams where to find the content page via the contentUrl attribute. As you can see, I point to my Azure protected webchat controller that will automatically authenticate the user for me as the user is already authenticated in Teams. The other page (remove.html) should contain this:

<!DOCTYPE html>
<html>
  <body>
    <script src="https://statics.teams.microsoft.com/sdk/v0.3/js/MicrosoftTeams.min.js"></script>
    <script type="text/javascript">
      microsoftTeams.initialize();
      microsoftTeams.settings.registerOnRemoveHandler(function(removeEvent) {
        var radios = document.getElementsByName('removetype');
        removeEvent.notifySuccess();
      });
      microsoftTeams.settings.setValidityState(true);
    </script>
  </body>
</html>

So, these two pages must be deployed onto your Azure webapp. Afterwards, to publish your content page to Teams, you simply need to zip the following manifest and the tab icons:

{
"$schema": "https://statics.teams.microsoft.com/sdk/v0.2/manifest/MicrosoftTeams.schema.json",
"manifestVersion": "0.2",
"id": "com.my.bots.itauthbot",
"version": "0.2",
"name": "TransparentAuthBOT",
"developer": {
"name": "TransparentAuthBOT",
"websiteUrl": "https://yourwebsite/",
"privacyUrl": "https://yourwebsite/privacy",
"termsOfUseUrl": "https://yourwebsite/terms"
},
"description" : {
"short": "Auth BOT",
"full": "describe your tab"
},
"icons": {
"44": "bot44.png",
"88": "bot88.png"
},
"accentColor" : "#223344",
"configUrl": "https://yourwebapp.azurewebsites.net/tabconfig.html",
"canUpdateConfig": true,
"needsIdentity": false,
"validDomains": [
"*yourwebapp.azurewebsites.net"
]
}

Two things are important here: 1) the ID of your tab 2) the path to the configuration page that’s hosted in your Azure web app. Once you have your zip file ready, you can upload it in Teams via the Developer tab and add your new tab.

Feel free to watch my videos on Azure Cognitive Services

Happy Coding