AzureAutomation – Webhooks, jQuery, and Runbooks, oh my! (Part 2)

Alright! In the last post, we setup AzureAutomation and tested it out on our Hybrid Worker. Now, let’s create a webhook to make sure we can trigger this remotely. What’s a webhook you might ask? Well, that’s an excellent question!

https://en.wikipedia.org/wiki/Webhook

https://azure.microsoft.com/en-us/documentation/articles/automation-webhooks/

Basically, it’s a URL that is both the location and token, to use a resource. Think of it like a trigger on a gun – once you’ve got your finger on it you can use whatever is behind it! Why is that useful in this case? Well, a webhook will let us use our Azure Automation runbooks from another source. That source could be a PowerShell workflow, another Azure Automation runbook, a C# app, or a website! Cool stuff.

Anything we do below assumes you’ve already got OMS and Azure setup, and have the Azure Automation components configured. If you need help doing that, go back and check out part 1 of this guide!

So we’re in Azure, I’ve headed to the ‘Runbooks’ Area of my automation account from last post, and found the same ‘Test-HybirdWorker’ runbook that I was using before. I’m attempting to use the scientific method and not change too much at once 😉

webhook1

If I click the ‘Webhooks’ tile, we get a new page where we can add a new Webhook. You can have multiple Webhooks for a single runbook, but we just need one for now. Click that ‘Add Webhook’ button!

webhook2

Let’s fill out some info…

webhook3 webhook4

Be sure to save the webhook URL someplace safe! You only see it once, and it’s super important. It acts as both authentication and a pointer to running your runbook, so keep it safe, but accessible, in the event that you need it again.

We’ll also want to make sure that we set this webhook to run on our Hybird Worker again. We can always come back and change this later, but we’re here, so we may as well set it!

webhook5

After hitting ‘OK’, then ‘Create’, you’ll be brought back to your Webhooks screen, and you’ll see the fruits of your labor! Clicking on your Webhook, you can get the details and modify parameters and settings if need be. If you can’t find your Webhook URL because you didn’t listen to me above, you’re in trouble! Time to create a new Webhook and update your code 🙂

webhook6

Beautiful! We’ve got a webhook, but what the heck do we do with it? Well, it’s still just a trigger to our basic runbook that writes a file to the C drive… but let’s make sure it works how we want and triggers our runbook appropriately. We’ll need to switch gears a bit and build a simple webpage to try this out 🙂

Here’s some code you can drop in a folder in your C:\inetpub folder. Just install IIS with default settings and that should be all you need here.

AutomationWebsite.zip

webhook7

 

You’ll want to make sure IIS is installed! It doesn’t take anything special to run this website, so defaults is fine. I’ll update this page with a quick PowerShell one line to install the proper roles and features in a bit 🙂

Let’s unzip our files now…

webhook8 webhook9

And move it into our inetpub folder…

webhook10

Perfect! Now let’s make the website in IIS, and point it to the files we’ve dropped locally.

 

webhook11 webhook12

You’ll see I’ve changed the port to 8080, that’s just because I have other things running on port 80. Run it wherever you like!

webhook13

And now let’s navigate to our webpage and see how it looks…

webhook25

Holy cow, it’s beautiful!

This gives us a nice HTML webpage, some CSS to make it pretty, and JavaScript, specifically jQuery, that can be called when the big button is pressed. Awesome!

Let’s dive into the code…

We’ve got a few files and folders in here:

webhook15

  1. CSS – This holds our CSS files to theme the website. These have been borrowed from Bootstrap and saved us tons of time 🙂 CSS is just color and style and layout, nothing you’ll need to change unless you want to change the look and feel.
  2. JS – this holds our javascript files, and we’ll end up in here modifying a few things here. This will be a good place to be 🙂
  3. index.html – The is the ‘scaffolding’ for the website that the CSS makes pretty. If we want to change any of the fields, forms, etc, then we’ll change things in here. Not much to do here either, unless you want to really extend the functionality.

So if we actually go ahead and pull up the code in aaFunctions.js, we’ll want to change the webhook URL so it matches what we’ve got from the Azure Portal when we setup the webhook. I’m going to paste mine in, you do the same!

webhook23

Alright, let’s navigate back to the page, hit refresh, and press the big button!

webhook26

It says that something happened… but let’s check Azure.

webhook20

Awesome! and if we check out our Hybrid Worker again…

webhook22We’ve got an updated last modified date! It worked 🙂

This is awesome. One thing I do want to point out, is that if you’ve got the developer console enabled in your web browser of choice (Usually hitting F12 will bring this up), it will spit out an error when you click the button to actually call the webhook URL.

webhook24As far as I can tell, this is just a ‘red herring’ of sorts, and while not desirable, it doesn’t impact functionality here. I’m going to look into trapping this/eliminating it in a future post.

That’s all for now – Part 3 coming soon!