PhoneGap & iOS — Build Submission Pains

If you’re using PhoneGap and submitting builds to the iOS App Store there’s a pretty good chance you’ve gotten an email back from them saying something along the lines of…

Your binary is not optimized for iPhone 5 – – New iPhone apps and app updates submitted must support the 4-inch display on iPhone 5 and must include a launch image referenced in the Info.plist under UILaunchImages with a UILaunchImageSize value set to {320, 568}. Launch images must be PNG files and located at the top-level of your bundle, or provided within each .lproj folder if you localize your launch images. Learn more about iPhone 5 support and app launch images by reviewing the ‘iOS Human Interface Guidelines’ at <; and the ‘iOS App Programming Guide’ at <;.


Missing Info.plist key – This app attempts to access privacy-sensitive data without a usage description. The app’s Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.

From a PhoneGap point of view, both of these messages left me with a “The Fuck?” look on my face, many, many times. However, they’re actually very easy to deal with IF you know what needs to be updated in the config.xml of your PhoneGap application.

Error 1

The first TLDR message occurs because a splash screen is missing. When you first launch a PhoneGap app, it’ll use the default PhoneGap Splash Screen. However, when you add your own, if you don’t add them all correctly you’ll get something like this error. Here are the things in my config that help me rid of this error:

<gap:plugin name="cordova-plugin-splashscreen" source="npm" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<splash src="res/splash/splash@2x.png" />
<splash src="res/splash/ios/320x480.png" gap:platform="ios" width="320" height="480" />
<splash src="res/splash/ios/640x960.png" gap:platform="ios" width="640" height="960" />
<splash src="res/splash/ios/640x1136.png" gap:platform="ios" width="640" height="1136" />
<splash src="res/splash/ios/768x1024.png" gap:platform="ios" width="768" height="1024" />
<splash src="res/splash/ios/1024x768.png" gap:platform="ios" width="1024" height="768" />
<splash src="res/splash/ios/1536x2008.png" gap:platform="ios" width="1536" height="2008" />
<splash src="res/splash/ios/1536x2048.png" gap:platform="ios" width="1536" height="2048" />
<splash src="res/splash/ios/2048x1496.png" gap:platform="ios" width="2048" height="1496" />
<splash src="res/splash/ios/2048x1536.png" gap:platform="ios" width="2048" height="1536" />

Make sure that each and every file is a separate file with the dimensions specified. The first image listed as splash@2x.png is a 640×960 file and IN THEORY replaces any sizes you may have missed by leaving off the dimension attributes… this has not been the case in my testing so include them all.

Error 2

So this is something that I’ve only recently seen pop up when using PhoneGap builds and its due to an iOS requirement that when you need access to something on the phone then you have to supply a string describing why. This makes sense if you’re in XCODE and have the info.plist file on hand… but it wasn’t so obvious looking at it with PhoneGap. Another addition to the config file will clear this error up:

<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription">
 <string>This app requires access to the PhotoLibrary to allow the user to select an image to use as their profile picture. </string>

using a <gap:config-file> element with the platform listed as either iOS or Android will allow you add items to either the iOS’s info.plist or Android’s manifest.xml respectively. the plist file is really just an XML property file like a .csproj is to Visual Studio. So since the property we want to add a string to  in the plist is named “NSPhotoLibraryUsageDescription”, the parent property on the gap:config-file element contains this string. Inside <gap:config-file> is the actual <string> for describing what your app uses that permission for.

Error 3

Wait – There wasn’t a third error, was there?!?! No, this one isn’t exactly an error but it is a WTF moment. If your icon shows up correctly when installed, but iTunes Connect doesn’t display the correct icon for the builds, this is another config.xml fix ( I wouldn’t dare submit the build for review while the icon was wrong on the builds as I would guess it would show up somewhere else incorrect ). Make sure to have the following in your config:

 <platform name="ios">
   <icon src="res/icon/icon.png" />
   <icon height="57" src="res/icon/ios/icon.57.iOS.png" width="57" />
   <icon height="72" src="res/icon/ios/icon.72.iOS.png" width="72" />
   <icon height="114" src="res/icon/ios/icon.114.iOS.png" width="114" />
   <icon height="120" src="res/icon/ios/icon.120.iOS.png" width="120" />
   <icon height="144" src="res/icon/ios/icon.144.iOS.png" width="144" />

Now here, where the SplashScreen didn’t seem to get overridden… the icon without dimensions has been the only thing to show correct on the builds while the icons with dimensions show correct on the phone itself.

Being less stupid.

This is going to be basically just a ramble — TLDR version at the bottom.

I’ve been learning IdentityServer3 for the better part of 2, maybe 3 weeks now. I’m a self-taught developer with nearing 3 years of development. When I jumped on, I knew how web servers worked to a degree thanks to taking HTML classes and my Net Sec degree but I never understood how underlying frameworks like ASP.NET MVC and OWIN worked. I pressed a pretty button and BOOM a WEB API / MVC Application was born and I could start coding away. For the most part, how it worked was magic to me but I knew which code did what after the project was spun up and was good to go. While attempting to setup my server w/ IDS3 to accept its own tokens for the API it is also hosting… I’ve begun to start understanding what goes on underneath those templates when you hit the button for a new project…

I was tasked to spin up a new API in a language I’m unfamiliar with, where there are no pretty templates to get things up and running… you just have to understand how the underlying framework works. I failed. I had no idea HOW MVC created an API or, as I’m realizing now, what OWIN even was. Each of these frameworks can be used separately or in conjunction to spin up a flavor of Web API whether you’re using MVC’s global.asax which is tied to a code-behind file for configuration or using OWIN to specify a start-up file which does about the same thing, with a different flow.

I never really took the time to actually learn how the hell these things worked, and I see now I’ve suffered because of it. Here’s an example of what I’ve been talking about:

In an ASP.NET project, there’s a file called global.asax…

The Global.asax file, also known as the ASP.NET application file, is an optional
file that contains code for responding to application-level events raised by 
ASP.NET or by HttpModules. The Global.asax file resides in the root directory of 
an ASP.NET-based application.

When you’re spinning up a WEB API with ASP.NET, this file routes to a code-behind which begins all the configuration for the server. So the markup for it would look like

<%@ Application Codebehind="Global.asax.cs" Inherits=" WolfSoftware.IdentityServer.WebApiApplication" Language="C#" %>

The codebehind for it would then by default have some configuration done

public class WebApiApplication : HttpApplication
    protected void Application_Start()

Up until now, this was all really magic code for me. I didn’t understand how this really configured the server, just that it did.

So now, throwing OWIN into play…

Open Web Interface for .NET (OWIN) defines an abstraction between .NET web 
servers and web applications. OWIN decouples the web application from the server,
which makes OWIN ideal for self-hosting a web application in your own process, 
outside of IIS.

So OWIN can do exactly what ASP.NET just did, but without having the global.asax and depending on markup. With OWIN, you declare a class as the startup class and begin configuration from there.

[assembly: OwinStartup(typeof(LobbyGuard.IdentityServer.Startup))]

namespace LobbyGuard.IdentityServer
   public partial class Startup
      public void Configuration(IAppBuilder app)
      private void ConfigureWebApi(IAppBuilder app)
         HttpConfiguration config = new HttpConfiguration();
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }

This has a bit less configuration than what was shown with the ASP.NET but the idea is there. Now that I know (I feel like I did, it just didn’t click when I needed it to…) how it all works… I completely understand now how to spin up the Web API in the new language I was tasked with because I know how more about the framework itself.


I didn’t know how to spin up a ASP.NET or OWIN Web Api in a new language because I’ve been used to C# templates doing the configuration for me; Now I understand the differences between the two, how they both work, and how I could use said new language.

I don’t know what was mystifying me before about any of this, did I just not look? did I not read? Time to be a little less… stupid.

Getting started with package management using NPM’s package.json file in VSCODE

The files used in this blog can be found here:


I’ve really been getting into VSCode recently when doing my own projects and even at work. One thing I’ve noticed is that packages seem to be handled a little differently between using something like a feature-packed IDE like Visual Studio 2015 compared to Visual Studio Code or another editor like Sublime or Brackets. In Visual Studio 2015 you generally have proj files like a .csproj and/or a .sln which would handle packages using a list of entries in a package.config file which is used by NuGet. The entries would probably look a little something like

<?xml version="1.0" encoding="utf-8"?>
 <package id="angularjs" version="1.5.8" targetFramework="net452" />
 <package id="bootstrap" version="3.3.7" targetFramework="net452" />
 <package id="jQuery" version="1.9.1" targetFramework="net452" />

This package.config file would install angularjs, bootstrap, and jquery to a nice and tidy Scripts folder and you wouldn’t really have to worry about them again unless you wanted to update the packages. Other Developers coming onto the project would most likely already have those files in source or would be able to run a NuGet restore to get those files into their environment. Package.json works kind of in the same way except it uses packages from NPM, stores those packages in a node_modules directory, and generally come with insanely long file paths that drive Windows and myself mad (the package will have dependencies, which will have dependencies, which will have dependencies… etc, outcome = long ass file paths).

Getting Started

Alright… so lets start off with an empty website and lets add some basic files to start off


All of these files are empty except the .gitignore which has one entry… node_modules/
This is because node_modules shouldn’t be placed into source and only on the machines that will be developing the app or the server running the app (so part of the build/deployment process would be to run ‘npm install’ so that all the dependencies are available on deployment)

Ok. So what the hell do we do now? We’ve got an empty package.json file… what goes in it? Well, with a little help from VSCode’s intellisense… it’s pretty easy to know what can go in this file along with some help from NPM’s documentation located here

As its a JSON file, you might be able to infer that you’d start off with some squiggly brackets and that properties will be listed in normal JSON format using “property”: “value”… so what happens when we attempt to add a new property?


Well hi there intellisense, long time no see, are those the properties I can use in the file? Why yes, yes they are. I can see two properties already that’ll be helpful, 1) author and 2) dependencies. So if we begin to enter author, we’ll see what this property is suppose to contain in terms of it’s value.


OK Cool, so the author property is supposed to include information about me. Now, in your own project you don’t really need to add this property as its really more helpful for when you actually put a lib on NPM so people can know who created the package as that’s what you’re essentially doing by using package.json, you’re entire project is now technically a ‘package’. Filling out the author though intellisense will allow you to tab-complete a new object for its value so once that’s done you can then start to add properties of the object belonging to ‘author’


As you can see, the object that belongs to ‘author’ contains email,name, and url properties. Lets fill those out really quick. After adding those properties to the object ‘author’ will be happy it has been given the correct data. But you may notice there is a green squiggly under the very first bracket… why is this?


Looks like the package.json file is looking for two properties right off the bat that we don’t have, lets go ahead and add those. After seeing how the author property was added, you should be able to have intellisense help you add these two properties. You should end up with something that looks like this:


Ok. So that’s nice, we’ve got this information in our package.json but… WHAT ABOUT THE DEPENDENCIES?!?!? That’s what you’re here for in the first place, right?

Adding Dependencies to your package.json file

So if you read Getting Started section you’ve been exposed to the intellisense provided by VS Code in the package.json file and you might be able to conclude that intellisense will also help us with adding dependencies… you’d be correct. Remember seeing dependencies in the intellisense from before? Lets try adding that property now.


By clicking on the blue ? icon next to ‘dependencies’ when intellisense pops up, you’ll see the full version of the description for this property. Ok, so this property contains the dependencies of our package AKA our project. Let’s tab complete it and see what we get.


Alrighttttt, so this is where intellisense abandons us, and for good reason… there’s a shit ton of packages out there and trying to fit them all in that intellisense window would be kind of asinine and probably be a humongous load to handle. So, in order to begin adding the dependencies we want, we have to go checkout for the packages we need. So say we want Angular…


That first package looks right to me, lets add it to the dependencies. Add “angular”: “” under dependencies and that will tell package.json to install any version of angular available, which means it will choose highest version it can find and install it.


What if we want a specific version, or, near a specific version if that version cannot be found? Well, intellisense can actually help us out here but it requires the first number and decimal to pick up. We can see the current version on npmjs, the screenshot above shows that angular is currently on 1.5.8 so lets start to define the version as 1.5.8… but wait… what is that intellisense?


VSCode can pick up on the rest of version… but sometimes there are different options that’ll show up here. Sometimes you’ll get the prefixes on the version to appear to which show how can infer which version to use based on a specific version. Here’s the documentation from to show you your available options for versions:


So we now know that we can do a lot of different things when specifying the version such as expecting an exact version, multiple ways to choose a version close to the one we specify using > and < variants as well as using git repositories to get packages instead of NPM’s repository. Lets try finishing the angular dependency by using an exact version then adding another dependency to jQuery but use a variant of the version selector.


Intellisense on jQuery is giving me the option to use the approximate version, so lets give that a shot. Ok. Cool. How do we actually install these dependencies now?

Installing your dependencies

If you’ve followed through this far, you might realize I’ve made a mistake. The version needs to be in a specific format for node, something like v1.0.0 instead of 1.0 so lets go ahead and change that now.


After you’ve filled out your package.json with the dependencies (and fixed the version number!) all you have to do is run ‘npm install’ through the command prompt or a terminal. I prefer using VScode’s built in terminal which can be opened by pressing CTRL + ` (backtick) at the same time.


If you look in the TERMINAL window in bottom-middle of the screen you can see ‘npm install’ was ran, a few errors about missing details in the package.json file which aren’t required and the packages were installed. Looking at the Explorer pane on the right you can see that there is now a node_modules directory with angular and jquery installed.


Congratulations – You’ve officially created your first package.json file and installed dependencies onto your machine!

TypeScript definition files

As you may know, TypeScript is a superset of JavaScript. However, that doesn’t mean when you use a framework such as Knockout or Angular that TypeScript will be able to interpret what you’re trying to do. Typescript allows you to  use the keyword ‘declare’ on a variable to indicate that it’s supposed to be from an external resource. This will prevent errors but we don’t get any intellisense. This is a pretty error prone way to work, hmm?


Here’s an example of using Declare to define ko. Now… notice something wrong in that code?


What the hell is an oberserverable?! This was an a mistake I honestly didn’t mean to make when I was going to show off what ‘declare’ does. But there it is. I created an error in the first 3 lines of code because I always screw up typing ‘observable’

In order to solve this, TypeScript allows you to make use of Type Definition files. These files allow TypeScript to utilize the frameworks you want to use instead of flying around without that oh-so handy intellisense. Where does one get a Type Definition file? Well…

There are TONS and TONS of definition files for TypeScript in the link above, including knockout. Download the file or copy/paste the code into a new one, whatever works. I’d recommend putting it somewhere close to your .ts, but hey, go crazy if you want. Now, if you’re using an editor like Visual Studio you can just drag and drop the file into your .ts and it’ll create a reference to that file, if not, you can just manually enter the reference.




****This reference is supposed to be commented out! Its not actually used in the JavaScript that gets transpiled! It ONLY helps TypeScript****

Now that there’s a reference to the Knockout Definition file, if I remove my declaration of the variable ‘ko’, I’ll see an error where I misspelled observable.


If I delete my crappy spelling and try again…


Oh… Well hey there intellisense… long time no see buddy.

The definition file even takes the intellisense a step further than what you normally get in regular JavaScript. Say I have a observable and placed “” as the default value. In TypeScript, this will be recognized and intellisense will show you that a string is supposed to go in. JavaScript does not do this because JavaScript doesn’t care. JavaScript is a Honey Badger.






If you try to put a string for the name value, everything is A-OK; If you try to pass in a number it gives you a red squiggly telling you that the value isn’t the correct type.


Getting Started with TypeScript in Visual Studio Code


TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain 
JavaScript. Any browser. Any host. Any OS. Open Source


TypeScript brings classes, types, constructors, interfaces, and a whole bunch of other shenanigans to JavaScript. Learn more @ because they know all the stuff and things.


  1. Visual Studio Code
    (Any IDE will work but I’ll be setting this up with VS Code)
  2. TypeScript installed (npm install -g typescript)
    This installs the compiler that converts the .ts to .js
    (go to for npm to work in cmd)

Getting Started

Visual Studio Code allows you to work on a single file or in a directory. Navigate to a folder on your drive and select it to be the folder you work in.Some steps if you need help:

  1. Click ‘File’
  2. Click ‘Open Folder…’
  3. Navigate to folder
  4. Click ‘Select Folder’

The folder will now open in Visual Studio. Click it in the explorer so the the little drop down arrow triggers and then select new file.


A prompt appears to name the file, give a name with a .ts extension (like typeScript.ts).

When the file has been created, it will open in the right pane as an empty file. If you’re used to using a language like C#, this will be a breeze for you. We can start filling this file up by creating a new class. Place the following, or something similar, into the file:


A class is defined by prefixing it’s name with the keyword ‘class’ and then two curly braces for all the code to go in. We can then put a function inside that’ll do some work for us, you may notice some familiar keywords like ‘public’, ‘static’, and ‘void’. These all do exactly what you think they do if you’re familiar with them. The public keyword sets the accessibility level on the function, the static keyword means it doesn’t have to be newed up, and the void represents the nothingness that the function returns… deep. Inside the function is a normal console.log() with a string.


Compile/Transpile… gimme the .js

Now that we’ve got some TypeScript down… how is it actually used? Visual Studio Code comes with a built-in Task Runner that will need to be configured to compile the TypeScript file down to a JavaScript file that’ll actually be used in your view.  Press F1 to open Visual Studio Code’s command prompt and put in Configure Task Runner as the command, press Enter when done. This will have created a .vscode folder in your working directory with a tasks.json file in it.


Scroll down until you see something familiar to what’s above. the “args” value should be the location of your .ts file in your working directory. When you compile the .ts file it creates a .js file, so I have my .ts in a scripts folder inside my working directory.(TYPESCRIPTLEARNING is my working directory, .vscode and scripts are two folders inside my TYPESCRIPTLEARNING folder). After your change the args to your .ts file’s location save the file. You should now be able to compile the file by pressing CTRL + SHIFT + B which is the shortcut for Run Build Task. A little spinny thingy appears at the bottom left of Visual Studio Code to let you know the task runner is working in the background. When it stops you’ll have .js inside the same directory as your .ts file.


So as you can now see, the TypeScript has compiled/transpiled down to JavaScript and now that we’ve got the JavaScript we can attach it to a view. By the way – doing things in TypeScript and reviewing what it compiles down to is actually a pretty neat way to learn some new tricks in JavaScript. Create an index.html in the root of your working directory and add a script reference to the JavaScript file that was generated.


Save the file and open it in a browser, then open the browser’s developer tools to see the log!


So now that we know how to create a TypeScript file, fill it with a class, get some output, and how to generate the JavaScript for it. Just a heads up, if this was a full fledge version of Visual Studio the JavaScript would be auto-generated and we wouldn’t have to compile this every time.


Properties, Constructors, Variables

Look over this next block of code, would you kindly.


I’m going to guess you can tell what this code does just by looking at it. Lets run through it though just in case.

main() on (lines 2-6) now creates an instance of the Greeter class on Line 4 passing in a string “HULK”. The string passed in is used by the constructor on line 12 to set the value passed in equal to the name property on the Greeter class. You may notice the syntax used to create the variables in the constructor and property, you define the name of the variable and you can declare its type by adding ‘: typeName’ where typeName can be ‘number’, ‘string’, or ‘any’. The property is also referred to throughout the class using the this keyword, this.myProperty,  which may be a little new to you if you’re coming from C# where property names don’t require the keyword to use.

Continuing on, line 5 invokes the greet function of the Greeter class and also passes in a string. Line 16 defines what the greet function does, it takes a variable of type string, has a return type of void just like main(), and then logs a message that uses the name property and the string passed into the function.

If you build this using the task runner, the same way as before using CTRL + SHIFT + B and open up the view, you’ll see the new message appear in the log.


So we’ve now got at least and understand of how the basic building blocks work in TypeScript, nothing fancy as of yet. We know how to set up Visual Studio Code to be able to read and compile/transpile ( I’m really still not sure which term I’m supposed to use, I feel like transpile is a better word for it than compile ) and how to use the generated JavaScript file in a view. I’m probably going to be doing some follow up posts with TypeScript and eventually with Angular 2 so if this interests you, stick around for more posts 😀


Creating an HTML5/AngularJS hybrid mobile app using the Ionic CLI

The Ionic Framework is an open source front-end SDK which helps developers create beautiful hybrid HTML5 mobile applications alongside with AngularJS. Creating an app while using the Ionic Framework allows for the GUI of mobile applications to be built uniform manner with relative ease. With the CLI commands provided after downloading Ionic Framework it only takes seconds to begin work!

Installing the Ionic Framework

Ionic is installed with npm, which means that Node.js will need to be downloaded and installed first. This is easily done by visiting and clicking the INSTALL button right smack dab on the front page.


Once node is installed, you have access to using the npm (node package manager) which will allow you to install thousands of different packages like Ionic. Open up a command prompt (or Power Shell) and issue the following command

npm install -g Ionic

This will install Ionic globally on your system and allow the Ionic commands to be used from the command line


Creating an Ionic application

Now that Ionic has been installed globally, creating the base application will take only seconds using the command line. The Ionic CLI provides a couple templates to create an application, the possible templates are Blank, Tabs, and Sidemenu. Let’s take a look at what these will look like, from the command line, enter the following:

Ionic start myTabsApp tabs


This command will create an app called myTabsApp with the tabs template in place in whichever directory you are currently in.


We can now launch the application as-is by using the Ionic Framework command Ionic serve, this will create a locally hosted version of the application for you much like starting an application in Visual Studio would do.


The tabs application will look like this once ‘served’


As the template name indicated, there are 3 tabs at the bottom of the page which allows you to switch between different pages using provided tabs. If we used Ionic Start to create an app using the sidemenu template, this is what it would look like:


and finally, here’s the blank template which provides the most basic form of the app with of course all the required resource to build out what the other templates provide from the get-go


next, let’s take a look at the different directories that were generated and try to make some sense out of it. Here’s what the structure of an Ionic application looks like:


There’s a couple directories here that control different parts of the application. the www directory is where the actual application is housed and contains all the html, js, css, and image files that your application will use. The resources folder contains items like icons and splace screens for the different platforms you’ll be deploying to like Android and iOS. The plugins directory includes the different ionic and cordova plugins that will help your application feel more native such as the com.ionic.keyboard plugin. The platforms folder contains the code required to build your application for the different mobile platforms and also helps to emulate the app using Cordova’s or Ionic’s emulate CLI commands.

By default, the platforms folder will be empty, in order to add the platforms you want to build for issue the following command

Ionic platform add <platform>

where platform could wp8 (windows phone 8), android, ios, or blackberry. Once a platform has been added, you’ll have the ability to emulate your application for that given platform using the following command

Ionic emulate <platform>

As a heads up though, some extra setup may be required in order to get the emulators to work correctly.

Protecting Azure VM from unwanted attempted access with ACLs

For about the past two weeks, I’ve been noticing that my server has been running a little slow. It’s a tiny server and I was just chalking it up to that – small server = not great response, no biggie right? Yesterday however, My server was down for good, which actually turned out be unrelated… but what I found was a little unsettling. While I was looking through my servers Event Viewer I noticed a lot of failed log ins going to MSSQL… and I mean, 4-5 a minute failed log ins… for over a week. Needless to say, somebody was trying to get access to the data in my SQL via some sort of Brute-Force or Dictionary attack.

Here what Event Viewer looked like (x10000)


There were tons of different IPs being used to attempt these log ins,,, — the list goes on

this means someone’s also spoofing their IP address like anyone trying this sort of thing would. The one in the above image for example is supposedly from the city of Nanjin in Jangsu, China… another one identified as being from California. You can easily find out where an IP address is located by using free services like, however, it doesn’t mean much when your attacking is spoofing their IP address to throw you off the trail.

This could have been easily avoided had I taken the necessary preventative measures. Azure’s VM management allows for the easy control of an ACL over each VM you may have. ACL, if you don’t already know, stands for Access Control List. What it does, is exactly like what it sounds like it does, it’s a list that controls access to your machine. This is done by permitting and/or denying selected ranges of IP addresses.

When you choose a VM from from your list of Azure items, you’re brought that VM’s dashboard.


The third item on the row of tabs for your VM are your endpoints which are used for connecting to that VM via Remote Desktop, PowerShell, and SQL. Each endpoint is allowed to have to have it’s own ACL in order to provide access from whomever may need that resource and deny everyone else that shouldn’t have access. When you choose one of the endpoints, in the footer menu of the page, the option for ‘MANAGE ACL’ will appear.


Once MANAGE ACL has been selected, a window will appear


This is where you’ll actually provide the permitted IP ranges as well as the denied IP ranges. ACLs work top to bottom, if you deny an address up top, then permit it lower down, that address will be denied. If you do the opposite and permit an address up top then deny that address lower down the list, that address will be permitted. The remote subnet requires a CIRDR address which uses a {ipAddress}/{subnetBits} notation – you may need to do some research on this to permit or deny the correct ranges of addresses. The best way to ensure that no one but you want to permit access to the endpoint is allowed in is by putting the permitted address in then on the bottom of the list, enter the CIDR address — this will deny everyone who was not approved before this point. Any address afterwards will not be permitted.


Addresses beginning in 192.168 area addresses reserved for interfaces that aren’t actually connected to the internet – so this address isn’t actually viable. You can use here as well to discover what your actual Public IP address is. Once your ACL list is finished, click the checkbox on the bottom and Azure will set the rest up for you in a matter of seconds.

var about = JsonConvert.DeserializeObject <Collection<DevStuff>> (;