Build a Conversational Bot with SSO for Microsoft Teams

Table of Contents

• Introduction
• Creating a New Project
• Installing Dependencies
• Setting Environment Variables
• Adding the Bot to the Teams App Manifest
• Coding the Bot

Introduction

In this article, we will explore how to create a bot with single sign-on (SSO) capabilities in Microsoft Teams. We will cover the necessary steps to configure an Azure AD app, register the bot with the Bot Framework, create a new project, install dependencies, set environment variables, add the bot to the Teams app manifest, and finally, code the bot.

Creating a New Project

To start the process, open the command Prompt and create a new folder for the project:

mkdir learn-ms-teams-sso-tab-bot

Move into the newly created folder:

cd learn-ms-teams-sso-tab-bot

Next, generate the project using the Yeoman generator for Microsoft Teams:

yo teams

Choose the default options for the solution name, title, company, and manifest version. When prompted for project scaffolding, unselect the tab option and instead choose the bot option. For hosting options, it doesn't matter as we won't be using it. Since the Yeoman generator doesn't currently have SSO support, select the option for an already existing and running bot not hosted in the solution. Enter the ID for the bot from the Azure portal. Choose the default options for adding a static tab and providing a title for the bot. Then, continue with the default options for other settings.

Once the Yeoman generator finishes, it will create the necessary folders and files for the bot project. It will also run npm install to download and install all the dependencies.

Installing Dependencies

However, our bot requires a few additional dependencies. To install them, execute the following commands:

npm install microsoft-teams/microsoft-graph-javascript-sdk
npm install isomorphic-fetch jwt-decode
npm install @types/microsoft-graph

The first command installs the Microsoft Graph JavaScript SDK, which our bot will use for handling Microsoft Graph API requests. The Second command installs the isomorphic-fetch Package, which is a dependency required by the Graph SDK for making HTTP requests. It also installs the jwt-decode package, which allows us to parse the ID tokens received from Microsoft Azure AD. Lastly, the third command installs the type declarations for the Microsoft Graph JavaScript SDK.

Setting Environment Variables

Next, open the project in Visual Studio Code. Before we get started, we need to make a few changes. In the environment variables, you'll Notice that there are variables for app id and password. These values correspond to the ID and password of our Azure AD app associated with the bot.

To set the password, fetch it from the appropriate source and add it to the environment variable, just like the app ID. Additionally, we need to add a new variable called sso connection name. This will be the name of the Bot Framework connection used for the OAuth connection in our bot API.

If you're using ngrok for local development, set the subdomain to the one reserved for your licensed copy of ngrok. Remember to update the NGrok URL in the necessary places whenever it changes.

Adding the Bot to the Teams App Manifest

To register our bot, we need to add it to the Teams app manifest. Open the app manifest for your project and locate the bot reference section. Set the notifyBotOnPersonalScopeMessages, isNotificationOnly, isHidden, and supportsFiles properties as needed.

For bots using SSO, authentication should be limited to the personal scope only. Remove the team and groupchat scopes from the scopes collection in the manifest. Additionally, add token.botframework.com to the validDomains section.

To enable SSO support, add the webApplicationInfo property to the manifest. Include the id and resource properties. The resource property should be set to the app ID URI of your Azure AD app. Retrieve the value from the environment variable and set it dynamically.

Coding the Bot

At this point, our project is now configured, and we can start coding the bot. The specifics of coding the bot will depend on your requirements and the functionality you want to implement. You can refer to the Microsoft Teams documentation for detailed guidance on building bots with SSO capabilities.

Conclusion

In this article, we walked through the steps required to create a bot with SSO capabilities in Microsoft Teams. We covered configuring the Azure AD app, registering the bot with the Bot Framework, creating a new project, installing dependencies, setting environment variables, adding the bot to the Teams app manifest, and coding the bot. With these steps completed, you can now develop a bot that leverages SSO for authentication and provides a seamless user experience within Microsoft Teams.

🌐 Resources:

• Microsoft Teams Developer Documentation