DEV Community

Cover image for Building a Microsoft Teams Bot App – Step-by-Step Setup Guide [Part I]
Afraz Khan
Afraz Khan

Posted on

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
  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. App Registration

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: ```text

    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](https://portal.azure.com/).
  - 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.
        ![Bot Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36gv741r7aij75gtm01n.png) 
      - Select Create.
  - Provide the necessary details such as project details, data residency, and app ID from the previous step.
![Bot Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c46ge96h3963gnorcvcl.png)
![Bot Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jr7xjjjzt2kb5pl0cys.png)

2. Enable the Teams Channel
  - Make sure to enable the Teams Channel in the bot settings.
![Bot Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mk1hm0ywnmywo022kora.png)
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](https://dev.teams.microsoft.com/home) and create a new app.
![Teams Dev Portal App Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dgd79gdcfb09oyx0lvo.png)
  - 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.
    ![Teams Dev Portal App Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf6g2axsvzvwsc2u1wj7.png)
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.
    ![Teams App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kit164460tqy7ab9g6ko.png)


> 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

![Teams App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0gcef8gsb4fgdtm8fsl.png)


ref ==> [[1](https://learn.microsoft.com/en-us/microsoftteams/platform/bots/what-are-bots)], [[2](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/deploy-and-publish/apps-publish-overview)]

---

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

|                                |
|:------------------------------:|
| 1. [**Part I - Simple Teams Bot App Setup**](#)|
| 2. [Part II - Enable SSO for Teams Bot App](https://dev.to/afrazkhan/implementing-single-sign-on-sso-in-your-microsoft-teams-bot-app-part-2-3k7d)|


Enter fullscreen mode Exit fullscreen mode

Top comments (0)