WebHooks with ASP.NET Core – DropBox and GitHub

ASP.NET Core 2.1 introduces many new features and also brings some of the older technologies to work with ASP.NET Core like SignalR and WebHooks. A WebHook is an HTTP callback for event notification across the web. WebHooks enable services to send event notifications over HTTP to registered subscribers. A subset of the ASP.NET webhooks receivers is ported to ASP.NET Core. The following receivers ported to ASP.NET Core: Azure alerts, Kudu notifications, Dynamics CRM, Bitbucket, Dropbox, GitHub, MailChimp, Pusher, Salesforce, Slack, Stripe, Trello, WordPress. This post talks about creating DropBox and Github webhooks with ASP.NET Core.

WebHooks with ASP.NET Core – DropBox and GitHub

Firstly, if you have still not installed .NET Core 2.1 preview, please do the following installation.

• Download and get started with .NET Core 2.1 Preview 1, on Windows, MacOS, and Linux:
  • .NET Core 2.1 Preview 1 SDK — includes the Runtime
  • .NET Core 2.1 Preview 1 Runtime
• Visual Studio 2017 15.6 Preview: Visual Studio and Visual Studio “Preview” can be installed side-by-side on the same device. It will have no impact on your current stable VS installation.

Once the installation is done, open Visual Studio “Preview” version to create ASP.NET Core Web API project. First, we’ll create DropBox webhook receiver. To do that, install the following package.

Install-Package Microsoft.AspNetCore.WebHooks.Receivers.Dropbox --version 1.0.0-preview1-final

Once installed, modify the Startup.cs -> ConfigureServices method to configure endpoint to receive notifications.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc()
        .SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
        .AddDropboxWebHooks();
}

Next, we need to add an endpoint to receive the notification. This endpoint will hit in case of any notification from DropBox. To do that, add a new controller with the following code. The controller action needs to be decorated with DropboxWebHook attribute.

That’s all required for setting up the code.

To test this application, we need to host this somewhere as the localhost URL will not work. Or we can convert the localhost URLs to public URL. ngrok is a such an application to expose localhost URLs to public URLs accessible over the internet. But this application doesn’t support HTTPS URLs and by default, ASP.NET Core 2.1 applications supports HTTPS. To disable HTTPS by default, 2 things need to be updated. First, comment out the following line in the Startup.cs -> Configure() method.

app.UseHttpsRedirection();

Second, open the launchSettings.json file. This file is located under Properties. In the launchSettings.json, remove the property “sslPort” in the “iisSettings”/”iisExpress” section or set its value to 0. Remember, these 2 changes are only required for development environment running on localhost.

Now, let’s download the ngrok exe and execute it following command.

ngrok http -host-header=localhost 63459

Once this command is executed, you should see the following. See the highlighted URLs. These URLs are accessible over the internet.

To access the values controller over the internet, you may use the following URL.
http://1474c10e.ngrok.io/api/values

Please note, the WebHook Controllers have a different URI form:

https://<host>/api/webhooks/incoming/<receiver>/

The <receiver> component is the name of the receiver, for example github or dropbox. So the webhook URL becomes,

• DropBox: http://1474c10e.ngrok.io/api/webhooks/incoming/dropbox
• GitHub: http://1474c10e.ngrok.io/api/webhooks/incoming/github

The webhook URL needs to be configured in DropBox application and GitHub webhook settings. Note, the ngrox URL will be different on your machine.

Now, let’s prepare DropBox to send events when something is happening.

Configure DropBox for WebHooks

To do that, Visit this link and create a new app required for invoking the webkook.

I selected the full DropBox option for this post. Once the app is created, open the settings tab and you will see something like this:

Here, we are interested in the highlighted settings, which are App Secret and WebHook URI. Provide the WebHook URL. When you add the webhook URL, the DropBox sends a verification request. From the DropBox documentation:

Once you enter your webhook URI, an initial “verification request” will be made to that URI. This verification is an HTTP GET request with a query parameter called challenge. Your app needs to respond by echoing back that challenge parameter. The purpose of this verification request is to demonstrate that your app really does want to receive notifications at that URI. If you accidentally entered the wrong URI (or if someone maliciously entered your server as their webhook), your app would fail to respond correctly to the challenge request, and Dropbox would not send any notifications to that URI.

Next, copy the App Secret value as we need to add this secret value to our application. To do that, open appsettings.json, and configure the Secret key like following:

"WebHooks": {
  "DropBox": {
    "SecretKey": {
      "default": "j5gco55if38p0ei"
    }
  }

That’s all. Run the application now and try to change something in your entire dropbox-space the webhook should be triggered like this:

As you can see, once the file upload is complete, the breakpoint hits in VS. The ngrox command prompt shows POST request made to DropBox webhook endpoint. Now, let’s configure the GitHub.

Configure GitHub for WebHooks

Let’s make the code changes to create GitHub webhook receiver. First, install the following package.

Install-Package Microsoft.AspNetCore.WebHooks.Receivers.GitHub --version 1.0.0-preview1-final

Next, change the Startup.cs -> ConfigureServices method to configure GitHub endpoint to receive notifications.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc()
        .SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
        .AddDropboxWebHooks()
        .AddGitHubWebHooks();
}

Next, add a new controller named GitHubController with the following code. The controller action needs to be decorated with GitHubWebHook attribute.

Next, we need to configure GitHub to send webhook. To do this, open any of your repository settings and select Webhooks from the menu. This will redirect to manage webhooks page, where you can see a list of existing webhooks and option to create a new webhook. Like,

Click on the Add WebHook button to create a new webhook. This will open a form like this,

Here, provide the Payload URL, Content Type, Secret and events where the webhook need to trigger. You can generate a secret value from here. We need to configure the same secret value in appsettings.json. Like,

"WebHooks": {
  "DropBox": {
    "SecretKey": {
      "default": "j5gco55if38p0ei"
    }
  },
  "GitHub": {
    "SecretKey": {
      "default": "77b277dd7b77d6bcf4cc026ff1e02a8f2ad6552d"
    }
  }
}

That’s all. Run the application now and try to change something in the github, the webhook should be triggered like this:

That’s it. You can find the source code at Github. Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then