Connecting Web Applications with ASP.NET WebHooks

The SaaS model and the need for interaction between different web applications have made webhooks very popular. With the release of ASP.NET WebHooks, developing webhooks has become a step easier for ASP.NET developers.

There are many instances where we can use webhooks. Imagine a scenario where you want your version control application (such as GitHub) to automatically trigger your build and deploy system as a new code commit occurs. In addition to that, you may also want to send messages across to your team through Slack. With the help of webhooks, you can integrate all the three—version control, build and deploy, and messaging applications.

ASP.NET WebHooks

ASP.NET WebHooks from Microsoft is an open-source package targeting ASP.NET Web API 2 and MVC 5. It is in beta phase at the time of writing. The NuGet package for webhooks provides WebHook Handler class that can be used for handling the incoming webhooks requests. Microsoft has also released other packages to connect to widely used services like GitHub, Slack, Salesforce, Stripe, and so on.

GitHub Issues Notifier Application

In this article, I show how an ASP.NET MVC application that integrates GitHub and Slack can be developed with webhooks. We will register the webhooks in GitHub to send the data to our application. We will handle, parse, and store it in our database and send messages to the users by integrating our application and Slack.

We need to create accounts in GitHub and Slack to try this out. To host the application, we need to have a live subscription of Windows Azure or any other hosting platform that supports ASP.NET. The application cannot run locally because webhooks need a live URL to send the data. The below image shows the screen of the application that I aim to build.

Webhooks Sample in ASP.NET

Setting Up the Environment

Let us start by creating an MVC and Web API application in Visual Studio. After the project was created, I modified the resulting code using Materialize CSS framework to give the application a clean interface. Our objective is to capture and store events that are triggered from GitHub and send corresponding messages to Slack. So, I have given two buttons, one to show the GitHub events and the other to show the messages sent to Slack.

Integrating Webhooks

To integrate webhooks, we need to add a NuGet package to the project that has the default WebHook Receiver classes from Microsoft. So, either by using the NuGet GUI or the Package Manager Console, install the following package using this command:

The above command will bring us the common classes we need to receive the webhook and handle it. Since we are going to get the data from GitHub, we need to install the package for that. Use the below command to install it:

Now that we have installed all the packages needed for this tutorial, we have to add the default webhook handler in the Application_Start in Global.asax file. In the App_Start folder, in the project hierarchy, add a new class and name it WebhookConfig. Add the below code in that file:

Now in the Global.asax file, add the below code in the Application_Start function at the bottom:

This will configure our custom webhook handler to be called when there is an incoming webhook.

We need to deploy the application that we have made so far in Azure for it to actually work (since the webhook application has to be present in a public domain for it to receive the webhooks sent by applications). Use the Publish profile to find or create a web app in Azure and deploy it there. A sample Publish profile is given below. Make sure there are no errors while publishing.

Webhooks Sample - Web Deploy

Hooking GitHub

Now that we have our web application ready to handle the incoming webhook requests, we need to register it with GitHub. Go to the Settings tab in GitHub and choose Webhooks & Services and click Add webhook.

Hooking GitHub

In the webhook details page, enter the details as given below and save the webhook.

  1. Payload URL: https://<your-web-application-name>.azurewebsites.net/api/webhooks/incoming/github
  2. Content Type: application/json
  3. Secret: Use the online HMAC Generator tool to generate a secret and paste it here.
  4. Events: Select “Send me everything” option.
  5. Active: Check to get the events triggered.

(Don’t forget to add your application’s name in “<your-web-application-name>” in the Payload URL.) The webhook is now configured. We need to make a few changes in the code to set the secret key and create a method to handle the incoming requests.

Parsing Incoming Requests to Application

Create a new class “GitHubWebhookHandler” in the project. This is the class that will be called when there is an incoming request from GitHub. This class has to extend the inbuilt class “WebHookHandler.” This class is responsible for finding and handling the incoming requests.

In the Web.config, add the secret key that you have given in GitHub.

Now build the application and publish it once again. After publishing the application, go to GitHub and check the status of the initial webhook sent. It will be Response status 500. Now click Redeliver on the request, and it would be sent successfully.

7

Now that we are receiving the webhooks from GitHub, we need to parse them into an object so that we can pass them around and store them in the database. So create a new class named GitHubInfo in the Models folder and paste the below code:

This class contains the properties to hold the details of the webhook request, such as Issue, Comment, and Action. To limit the scope of the article, we are going to process only the Issues from GitHub. So in the SetActivityType, we shall set the various events that are related to Issues like Created, ReOpened, Closed, and so on.

Now add these two lines of code in the GitHubWebhookHandler class in the ExecuteAsync method in the place of the already existing line.

This will convert the incoming webhook data into the GitHubInfo class type.

Using Models and Repositories to Store Data in Database

We need to create models and repositories in the application to store the parsed GitHub request in our database. I have created the below table in the database:

After creating this table in the database, create the database model class in the application along with the database context. The models and the context are present in the sample solution. To insert the data in the database, we need to create a repository for the model. Below is the code for the repository:

The next step is to convert the GitHubInfo object into GitHubIssue object so that we can insert the data in the database. Copy and paste the below function in a separate class to convert the GitHubInfo into GitHubIssue class.

After this is done, we can directly call the AddNewIssue function from the Repository to insert the data. This has to be done on the GitHubWebhookHandler class. Add the below lines after the existing lines in the ExecuteAsync function.

Displaying GitHub Issues in View

Now the only task that remains is to display the Issues (from GitHub) in View. In the HomeController, add the below code:

This will get the data and pass the model object into the Partial View “GitHubMessagesPartial.” Use the model object and iterate through the contents of the object and display it in View. The screen should look like the sample that was shown earlier in the article. I have added a small button to send the message to Slack for each Issue.

Setting Up Configuration in Slack

Browse to the URL https://api.slack.com/incoming-webhooks and click the incoming webhook integration link to open the Slack integration for the current group. Choose the channel that you want the messages to be sent to and click Add Incoming WebHooks Integration.

Setting Up Configuration in Slack
The page will show a URL labeled “Webhook URL.” This is the API URL that we are going to send our request payloads to. Copy the URL given in the Webhook URL and paste it in the Web.config file under “AppSettings” as shown below:

Sending Messages to Slack

We need to send a message to Slack for each Issue that we get. Create the below table in the database to store the Slack message details.

We need to create models and repositories for Slack messages as explained in the case of GitHub.

We have to first create the data that has to be inserted in the database, which is of the type SlackMessage, and then send it to Slack. The below code should be added to the GitHubWebhookHandler class after parsing and inserting the GitHub Issue.

The last function call “SendSlackMessage” should be written in a separate class. This is where the data is passed to the endpoint URL in Slack.

The function above is an Async function that is used to send the message to Slack from our application. The payload data in the POST request should have the following format:

Our application is now capable of receiving GitHub Issue instances. In the event of an issue, data will be inserted in the database of our application. A Slack message will be created. It will be inserted in the application database and sent to Slack. The following message will appear in Slack:

Message received in Slack using WebHooks

To Do

The only thing left to do is display the Slack messages from the database in View. This is, however, similar to showing GitHub messages in View. You can try it and refer to the solution file in GitHub for extra details.

Conclusion

ASP.NET WebHooks makes it easy to quickly develop solutions that integrate web applications. Availability of custom classes that deal with commonly used SaaS like GitHub is an additional advantage.

Happy Coding!

You May Also Like