Webhooks Demo – Outgoing Webhooks with MS Teams

In this second part of the series on Webhooks, we further expand our knowledge on Webhooks by understanding how an outgoing Webhook triggered by an entity, can be captured by a third-party application. In the last post, we already learned what Webhooks are and how they can be used to facilitate real-time communication between multiple entities. If you have not checked that out yet then I would highly recommend to do so first because all subsequent parts of this explainer series are based on the fundamentals we covered in the first introductory post.

For this demo, we will use one of the most popular Enterprise messaging platforms – Microsoft Teams & see how a message dropped in a MS Teams channel triggers an outgoing webhook. If you want to see how Webhooks can be used with other platforms like Webex then feel free to drop a comment and I’ll write a separate post for that.

The table of contents is listed below. You can click on the links directly to jump to the relevant section.

1. ngrok – What & Why
2. ngrok – Configure & Monitor
3. Webhook – MS Teams Message Flow
4. Configuring an Outgoing Webhook in MS-Teams
5. Testing the Webhook

ngrok – What & Why

As we had covered in the introductory blog post, a Webhook is basically nothing but an event that triggers an HTTP POST request. If we are working with publicly accessible SaaS platforms like MS Teams or Cisco Webex then it’s natural for us to provide a URL that can receive the incoming POST request from such platforms. If the recipient application is already hosted on the internet then it greatly simplifies the process. We can use that application’s public URL to receive the incoming POST request & process the data accordingly. However, if we have a local application which is confined within the boundaries of the enterprise network then we need some way to establish a web link between this local application & the SaaS platform hosted on the internet. That’s where applications like ngrok come in.

Without getting too much into detail, ngrok basically creates a secure tunnel to the localhost machine. It provides a publicly accessible URL which can help us expose our local development server to the internet without having to bother about hosting our application on the internet. This enables us to keep developing our application on the local machine and use the ngrok tunnel to make this “local” application accessible on the internet. This is just for demonstration purposes and should be used only during the dev/test phase. You can download ngrok from the following website

https://ngrok.com/download

ngrok – Configure & Monitor

The configuration of ngrok involves following steps

• Open the command prompt and navigate to the directory where ngrok is installed
• Then issue the command ngrok http 5000 or any port for that matter and hit Enter.

• The tunnel will start and the line item you need to pay attention to is “Forwarding“. It shows that “https://46d4-2604-3d08-987c-5100-f4d0-7ee0-8cdb-16f5.ngrok-free.app” is being forwarded to our local machine at “https://localhost:5000“. This means that whatever traffic comes to the “Public HTTPS” URL given above will be diverted to the localhost.

• Another line item you need to make a note of is “Web Interface”. This is where you will see the Webhook notification details. You will see the following page when you navigate to the address mentioned in the “Web Interface” line item. We will come back to this page again towards the later part of this tutorial.

To explore the rest of the article in detail, please head over to the following link