WebAPI OWIN and HppClient Authorize

Hi all, I know I promised my next post was going to be more Azure but I encountered a little task that took me a while to get working, the scenario was that I wanted to make a call to my WebAPI (MVC5) service using a C# HttpClient, the problem was that the resource I wished to access had the AuthorizeAttribute set

Now there’s a few ways to skin a cat but in the presence of the default Token Authorization one needs to first get a token and then use this token in subsequent requests. There is some good documentation using fiddler here: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api, however, there was not a lot of information on how to do this with HttpClient against Katana/Owin/MVC5, rather this information was not available in one specific place.

How

The first request gets the token and then this token is used as the Bearer for further requests.

Writing to an Azure Queue

If you've seen my previous post then this post is quite similar, this time however I write to an Azure Queue and not to a blob.

Code

First of all you need an Azure storage account as before, but once this is setup, consider the following code…

What I’m doing in the code above is

1. Connecting to my storage account
2. Creating the queue if it doesn't exist (remember you’ll get a bad request if you don’t name the queue correctly!).
3. Then I create a simple message, I’m using an POCO object from another project and serializing it to JSON.

Did it work?

Lets use VS2013 U3 to check!

Open your server explorer and select the queue under the storage account you’ve chosen in your connection string, double click

Above you see the message added to the queue, you can see how many times it was de-queued  and when it’s set to expire, If we use a competing consumer pattern that count may be more than 1!

Next

I’m a little thorn re my next post, I’ve been writing a post on c# expression trees which is nearing completion, however I think to keep in line with the current trend I’ll post how this queue can be read and feed to an Azure Service Bus topic (pub/sub)… stay tuned ;-)

Azure WebJob triggering on BlobUpload

Tonight I’m going to follow up on my previous post where I promised to show you how to react on somone/something uploading a Blob.

Please read http://azure.microsoft.com/blog/2014/06/18/announcing-the-0-3-0-beta-preview-of-microsoft-azure-webjobs-sdk/ as there is a lot of old information lying about on the web regarding v0-2-0 which will not work in v0-3-0, I’m not ashamed to say it’s now the early hours of the morning before I’ve finally managed to get this working as most of the documentation I was reading was v0-2-0.

Let’s get started by creating a console application.

Nuget

Code

In this code you can see that I’m just appending worked… to the input file, the important parts to consider are the BlobTrigger and Blob attributes, the trigger is the item that will start to process when a blobupdates on the reuters-input container, the BlobAttribute is the output and the reuters-gdmx is the identified container for same.

There are a few options with the job, schedule/on demand/continuous..

For the automatic trigger I’m setting the job to be On Demand, however I know in the current version of webjobs, that ondemand for blobs are polled every 10 minutes (I hope can be more real-time once WebJobs exit preview).

Connection Strings

You need to add two connections string to your blob storage account (get the connection string with visual studio Azure explorer), I’ve set both to the same storage account. The last two are from v0-3-0.

Test

I’m going to use the AzureStorage explorer to upload a file, once this file gets uploaded the WebJob will run and create the associated blob in reuters-gdmx

Output

Here you can see the result of the WebJob (appending worked….)

Uploading a Blob to Azure container

In the picture above you see a storage account in Azure, in the storage account we have an ecbfx (European Central Bank FX Rates) container. Now let’s see how to upload some data to this container using a C# console application.

NUGET

Given we are going to work with C# the best option is to use the .NET library, this can be retrieved from NuGet

Code

The code above connects to the pre-created container, notice that my container has built in Geo Redundancy (primary storage in Dublin, secondary in the Amsterdam) so after running there will be 6 copies of this blob, 3 in Dublin and 3 in Amsterdam, this is the storage package I’ve chosen.

View Blob

The easiest way to view the newly uploaded blob is to use the Windows Azure server explorer in Visual Studio, it’s the easiest way of getting the connection string to the storage account also.

In the next post I’m going to show you how react to someone uploading a Blob with an automatic trigger.

Broadband in rural Ireland

View Full Album

So what is this – javascript

To the uninitiated this can be really confusing in JavaScript. Consider the following:

The code above logs this three times, but what is this?

The main source of confusion is a quirk of the language where depending on the invocation pattern this can be set to the global variable (e.g. window in a browser). But there are come other gotchas.

In the example above this is 3 different objects.

• Window
• ATest
• Object

Function Invocation Patterns

In order to explain this we need to know what function invocation patterns are in JavaScript, of which there are 4.

• method
• function
• constructor
• apply/call

I’ve covered the first 3 above in my example

Method

In the method invocation patters, the method is called bare. Javascript assigns the global variable to this in this instance.

Constructor

Function

In the function invocation pattern this is the enclosing type also, however this is just object in this case i.e. the object literal returned from ATest constructor.

Apply

I’m not covering this here but the Apply (and the call) invocation patterns basically let you set the value of this.

Note: Object Literal can be avoided in this example above as follows.
What we do is set the methods on this explicitly.

Angular.js .NET File Upload

In this post I’m going to show you how to upload a file using Angular.js on the client side and Asp WebApi on the back end.

Lets get started

Create you project in visual studio, and add your angular.js app controllers etc.

Interestingly enough I’ve already shown you how to do the server side over 2 years ago!
Crikey 2 years and I’m still writing about the same old stuff….. well not really, last time it was knockout, sliverlight and the likes, now it’s Angular.js’ turn.

Angular file upload, Nuget

In order to facilitate the process, we’re going to use a nuget package I like, see screenshot.

The beauty of this package is that its got shims for non html5 browsers (apparently there are a few hanging around still :-( )

To use this package you’ll need to include 2 scripts, file-upload-shim before angular.js and file-upload after.

Script Includes

Markup

Next add the input tag and add the ng-file-select directive

Javascript

Module

Add the upload module

Factory

Here i added the $upload factory to my controller

Controller function

Here I enumerate the files (should i wish to have multi select) then I upload each one by posting to my Web Api .net controller, I pass a little more information also as to the diff side, but that’s pretty much it.

.NET

Now even though I did show you the .net code before I’m going to show it again now, because as I mentioned I’m passing a little information as to the side the file I’m uploading represents.

Why Java Sucks

http://2014.javazone.no/videos.htmlAn ex colleague of mine sent me this link this morning. www.whyjavasucks.com
Apparently I got associated with it, haha, yes at one time I used to shoot down java at every occurrence, this was most likely because I didn’t know it well enough at the time; now I just yawn a little and continue ;-)

Programming in C# after using Java

Enjoy the website! I did ;-)

To see the other side of the story have a look at some of the videos here

IDE’s and tools

I’ve gotten a few emails from last night’s post asking me why I’ve gone black (and will i go back?),, well you know what they say!

Btw: I’ve Visual Studio, IntelliJ and WebsStorm on black/dracula themes at the moment and a week on I’m kinda sold, the only big downside is when I switch to another app when in dark light (in bed for example) I hurt my eyes as they adjust.

Some people asked about the IDE as it wasn’t visual studio (nope, I’ve not written java in VS yet ;-) ) so I thought it would be interesting to share what tools and IDE’s I use.

As it happens I just rebuilt my OS last weekend so it’s all clear in my head, here goes:

Operating systems:

Windows 8.1 and Mac OS as the moment, I prefer Windows, but my Mac Book Air is by far my favourite hardware… conflict!! I am doing a project with a Raspberry Pi at the moment and between that and the Mac I’ve pretty much given up on DOS* in favour of powershell (simply because I can type linux commands)

IDE

1. Visual Studio 2013 this is my favourite IDE, I’ve been using VS since the mid 90ies, mostly these days I use VS for C#, ASP, UML, Testing, Azure, most of my pet projects are Azure based.
2. InetlliJ : I took me a while when I started learning Java to settle on IntelliJ, I went back and forth between that and eclipse for a while until I understood java and it’s eco system enough to set up my own projects. IntelliJ is just fantastic and the tooling is great (ideal for MSofties) and there is a certain degree of familiarity as Jetbrains the company behind is the company behind Resharper.
3. WebStorm: This is another Ide from Jetbrains (they have a few good IDE’s js,java,php,objective-c, python etc, check them out), I use this mostly for non ASP web stuff (where I naturally use VS), it’s quite good.
4. XCode: I’ve created a few iPhone app’s, I hit the curve learned objective-C and the libraries enough to get a few apps in the store and XCode was the vehicle, I’ve not used AppCode from jetbrains but I bet it’s good! The truth is I’ve not used XCode in about a year now I guess, the reason is that I’ve moved to Android myself and don’t have a iPhone any longer (and at least for the foreseeable future) so I’m not motivated enough to do any iOS coding on my free time.

File management

Total Commander by Ghisler.com, I’ve been using this since 2001, I was previously using norton commander but when I changed company I no longer had access to that software so I found my beloved TotalCommander, this is without doubt one of the major reasons I prefer windows. (I must get off my bum and find a corresponding program for Mac as Finder is dreadful IMO.

XML and it’s cousins

Stylus studio: great for formatting xml and editing xml in tree and grid formats, generating xsd, debugging xlst etc, nice xpath support.

Idiot’s guide to Angular service vs factory

You won’t believe the amount on questions I’ve come across regarding the confusion between angular services factories and providers. This blog post attempts to help clarify same and get you started.

Which should I use?

Factory* if you don’t know this this is a good place to start.

Which is most powerful?

Providers

What’s the difference?

I’m not going to cover providers here so lets see the difference between services and factories.

The rhetoric

Service gets passed a function that’s considered to be a constructor, so you get back a new-ed constructor.
Factory gets passed a function which it invokes and returns the result.
A service is often used when you have 3rd party constructor function and want to use this.

Example1 – Same end result both ways

Service

First lets show the view in all it’s glory, it’s quite simple just will display whatever x is.

 
Then the angular code

You can see that we don’t return anything! so think of this as a constructor function, so effectively angular will give us a new TestService and we can call the doSomething method on it, the output looks like this

Factory

Now let’s look at the same thing as a factory

What’s the difference? Well in this instance we are returning something! Angular will call new on the returned object and return it.

Ok I get it but

Show me a reason to prefer one over the other? Well lets say we want to pass some information to the service or factory, well given we have no control over angular creating our service we cannot pass any additional information! it just creates the function.

Factories on the other hand we get to return what we want! So we can return a function! Lets look at some code to make this easier to see

So now if we don’t change our controller we have a problem, because angular has just created f for us! Let’s see this in a debugger, we can clearly see that TestService is not an object but rather a function.

Now we need to modify our code to work, let’s do that.

So hopefully that’s helped you a little understand the difference.

Example 2

I’m working on a project at the moment and I’ve just created a backend REST webservice to manage user properties

as you can see I've got the basic REST HTTP verbs, GET,POST,PUT,DELETE, it’s done in Java, but could just as well be in .NET, node, php etc, it doesn’t matter, the basic premise of REST is that it just used what HTTP already gives us.

Now I want to be able to use this information in JavaScript, Angular itself exposes a $resource exactly for this scenario (read the docs there’s one or two simple steps needed to use it).

The important thing to notice is that we are returning something from our function, and we are passing parameters, therefore we cannot use a service in this scenario.

I hope this has clarified this situation for you, if so please drop me a line and let me know and I might cover providers also.
(comments are disabled until i get a better recapcha for all this spam I get when enabled).