Building a Microsoft Teams Bot App – Step-by-Step Setup Guide [Part I]

Microsoft Teams is a powerful collaboration platform, and integrating a bot can streamline numerous tasks for your team. In this guide, I'll walk you through the process of setting up a Bot App in Microsoft Teams, covering everything from app registration to deployment.

Prerequisites

• Buy subscriptions for MS365 and Azure.
• Ensure you use the same tenant for Microsoft Teams and Azure.
• Install the ngrok to setup an HTTP tunnel.
• Install Nodejs18.x.
• Follow the steps in the specified order to avoid issues during setup.

Step 1: Microsoft Entra ID App Registration

1. Register a New Application
   • Go to the Microsoft Entra ID – App Registrations portal.
   • Register a new application. Choose options that suit your use case.
   • save the Application/Client ID for future use.
2. Create Client Secret
   • Navigate to "Certificates and Secrets" and create a new client secret.
   • Make sure to save the secret value immediately, as it is revealed only once.

Step 2: Setting up the Bot Backend Service

Teams Bots are developed using the Microsoft Bot Framework, a collection of tools and SDKs designed to build intelligent bots. To get started, you need to set up the backend service for the bot. (Bot registration is performed in the very next section)

1. Download the Echo Bot Sample
   • Download a simple echo bot (written in nodejs) from the sample here. This bot just responds with the same user message as received.

2. Update Environment Variables

   • Update the environment variables in the .env file of the downloaded project:

     MicrosoftAppType={"MultiTenant" or "SingleTenant" based on                         the setting you selected while creating the app registration}
     MicrosoftAppId={App ID from previous step}
     MicrosoftAppPassword={App Password from previous step}
     MicrosoftAppTenantId={ignore if multi-tenant app else put the tenant-id}
   

3. Run the Backend

   • Read the relevant README file to run the backend.

4. Set Up HTTP Tunnel

   • Now, set up an HTTP tunnel at port 3978 via ngrok.

Step 3: Bot Registration in Azure Bot Service

1. Create a Bot Framework Registration Resource

   • Go to the Azure Portal.
   • Create a Bot Framework registration resource.
     • In the left panel, select Create a resource.
     • In the search box enter bot, then press Enter.
     • Select the Azure Bot card.
     • Select Create.
   • Provide the necessary details such as project details, data residency, and app ID from the previous step.

2. Enable the Teams Channel

   • Make sure to enable the Teams Channel in the bot settings.

3. Set Up Messaging Endpoint

   • Configure the messaging endpoint with below Url format: https://{ngrok-domain}/api/messages

Step 4: App Registration in Teams Developer Portal

1. Create a New App
   • Sign in to the Teams Developer Portal and create a new app.
   • Fill in the required fields under the "Basic Information" section, including the MS Entra ID app ID.
2. Branding and Features
   • Update the app icons under the "Branding" section.
   • In "App Features," setup the Bot feature for the app. or link the Bot feature tile with the MS Entra ID app ID.

3. Allow Required Domains

   • Navigate to "Domains" and allow the following domains:

     • *.ngrok-free.app
     • *.ngrok.io

     When setting up for production, be sure to allow the production service domain here once you're ready. Additionally, for successfull app auth, you need to allow other domains as well, such as token.botframework.com is mandatory.

Step 5: App Distribution

1. Validate the App

   • In the Teams Developer Portal, navigate to your app.
   • Use the App Validation section to check for any critical issues.

2. Publish the App
   As per your requirements, you can publish the app to the App Store or your organization etc.

   • For organization wide apps, publish the app to your organization via the "Publish to Org" section.
   • Request your Teams Admin to approve and distribute the app within the organization.

3. Installation

   • Once approved, the bot will be available for installation in the Teams client.

You may need to go through a rigorous approval process to publish the app to the store. For more information, refer to the documentation.

Sample Bot UI

ref ==> [1], [2]

Next, we will enable authentication for the app using Microsoft SSO.