VS Code deploys Teams webhook to Azure Functions

The Microsoft Teams product is already familiar to us. As developers, we can also build our own Teams applications through some official development modes.

Today, I will quickly share with you how to deploy Azure Function (a solution of Azure Serverless) in VS Code and use it as the webhook address of Teams.

Prepare the environment

1. Prepare Azure Account and Microsoft Teams Account
2. VS Code
   1) Download and install
   2) Install Azure Extension for VS Code
3. Microsoft Teams (either client or web version)
4. Download code:
   Address: https://github.com/paul-cheung/outgoing-web-hook-sample

New Project

1. Log in to Azure Account according to the option of Extension and select subscription.
2. VS Code opens the downloaded code (or creates it yourself), and Azure's Extension will recognize it.
   
3. View project content. Here is a simple api function that accepts the Activity request model (Microsoft's Bot Framework), and marks the trigger type of the function as httptrigger, and the authentication level is also anonymous, so that you don't need to provide a token when calling this api. Of course, the actual situation requires token verification, so I won't introduce it here.
   

Deploy the project

1. 1. Build the project, click Deploy to Function App, and operate all the way.
   
2. Select the corresponding subscription
   
3. Choose to deploy to an existing function app or create a new one, according to your needs. I will directly overwrite the existing ones here.
   
   If it is new, you will be prompted to enter a name, just enter the name normally, such as:
   
4. Select Location. We need to specify which region our app is deployed to.
   
5. Awaiting deployment.
   

Or look at the Log of output

Prompt that the relevant resource has been created and the deployment is complete.

Check deployment

Let's log in to the Azure Portal to check the deployment.
You can see the URL column, which is the address of our OutgoingWebhook.

Configure Webhooks in Teams

The service has been deployed on Azure Functions above. Next, open Teams for Webhook configuration.

1. First log in to Teams and navigate to the app tab of the team:
   
2. Click Create an outgoing webhook, fill in the name and Callback URL.
   

The Callback URL comes from here:

3. After creating the webhook, you will be prompted to save the token (just save it properly, we will not use it here for the time being, skip the authentication part)
   

Verify the effect

The above has successfully created the outgoing webhook, and this hook is called to the azure function. Now test the effect.

1. Let's go to the team's channel and send it a message (at it)

2. Just send any message and get a reply
   

Summarize

In the development process of Teams App, we often use ngrok for reverse proxy/intranet penetration. Here is another way to deploy the bot code we wrote to the cloud with one click. Help improve our development efficiency.

Using the serverless azure implementation to simplify our deployment, of course, there are other services that can achieve the same purpose. Thanks for reading.

Related Links:

https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview

https://www.microsoft.com/en-sg/microsoft-teams/download-app

Microsoft Most Valuable Professional (MVP)

The Microsoft Most Valuable Professional is a global award given to third-party technology professionals by Microsoft Corporation. For 29 years, technology community leaders around the world have received this award for sharing their expertise and experience in technology communities both online and offline.

MVPs are a carefully selected team of experts who represent the most skilled and intelligent minds, passionate and helpful experts who are deeply invested in the community. MVPs are committed to helping others and maximizing the use of Microsoft technologies by Microsoft technical community users by speaking, forum Q&A, creating websites, writing blogs, sharing videos, open source projects, organizing conferences, and more.

For more details, please visit the official website.

Click foran introduction to Azure Functions