Basic Authentication with #AngularJS and #WebAPI Part 2 – The Angular Client

In part 1, I linked to a few blog entries about getting Basic authentication to work with AngularJS. I outlined what was required to make the suggested idea work in ASP.NET WebAPI, but I didn’t detail what was required in the AngularJS client. The blog entries that I linked to were also very light on details, so I thought I’d put together this blog post to show an end-to-end solution for this problem.

This project is available on GitHub at https://github.com/cerkit/BasicAuthWebApiSample.git

I’m missing a few features that were intended to be included due to my newbie status with AngularJS. In particular, I do not currently have a way to save the failed requests for later to retry them after the user successfully logs in. That will probably have to wait until I get better with AngularJS. Also, there may be a better way to inject the credentials into the web request other than putting the code into the controller. I’ll try to improve on this model at a later date.

To start, let’s take a look at the .config for the app.

Notice that I add a header on line 6 that sends the XMLHttpRequest to the server. If you’ll remember from the last post, this will cause the server to send an “xBasic” authentication method, thereby bypassing the browser’s built-in security dialog. This will allow us to answer the 401 Unauthorized response with our own login dialog.

Here is the template for the login dialog:

This contains the modal class that the dialog requires to be a modal dialog. In order for the dialog to be opened, a request has to be made to an $http resource. This is done by the main controller, but the actual work is done by an $httpProvider interceptor. You can see the interceptor definition on lines 8-36 of the above code. Notice that when the status of a request is 401, it fires the “auth-loginRequired” event. This indicates that the dialog needs to be shown. This event is answered by a directive that then launches the dialog. Here is the directive:

The CredentialsController performs the login:

Notice that the login method calls the event for “auth-loginConfirmed”. This will cause the modal dialog to be hidden. It is also answered by the SampleController so that it can refresh its data.

We’ll then see the login-dialog directive being used at the bottom our index.html page. This is there just so that we can respond to the event and show the dialog.

Since we’re using the SampleController, let’s take a look at what it does to get the data:

The refreshData() function checks to see if there’s a credentials cookie. If so, it sends the credentials along in the Authorization header. This is the part that should be changed. I think it needs to go in the interceptor, but I haven’t quite figured out how to do it. After setting credentials, the controller has various functions for dealing with the data. It also sets the currentUser property on the scope so that it can be displayed on the home page.

This should illustrate the end-to-end process of enabling basic authentication on an AngularJS application when used with ASP.NET WebAPI.

I’ve been very happy with the results. Just make sure you secure all of this behind SSL.

 

 

Http Error 503 – Service Unavailable with .NET 4 – #IIS

When trying to debug my web service today after upgrading the project to .NET 4, I was told by Visual Studio that it could not debug and to try running the project outside the browser. When I did, I received a 503 Error, Service Unavailable.

I check the Event Log and found this:

The worker process for application pool 'PartsWebService' encountered an error 'Cannot read configuration file due to insufficient permissions
' trying to read configuration data from file '\\?\C:\Windows\Microsoft.NET\Framework\v4.0.30319\CONFIG\machine.config', line number '0'. The data field contains the error code.

Simple enough, I just have to give the correct permissions to that file. It seems that my service’s application pool identity doesn’t have rights. So I’ll navigate to the path that contains the machine.config and set permissions there.

You can’t just set permissions on the parent folder, you have to give permissions to the machine.config file itself. Add IIS_IUSRS from your local machine to the read and execute roles.

Also, load IIS Manager and check your application pool as this error usually stops the application pool if it’s running.

This should clear up any issues you were having.

More #Illustrator and #Lightroom Goodness – Image Trace

Laurie

I really like the image trace functionality in the new Illustrator CC. I took a photo of Laurie and did some alterations in Adobe Lightroom to increase the contrast and make it a better candidate for image trace. I then loaded it in Illustrator and applied the image trace to it. Then I added the fill color to her face. It was so incredibly simple. It’s amazing to me that this illustrator file can now be used to create an image of any size and not lose resolution. It could even be on a billboard! I love Illustrator.

Here is the original image:

Laurie

First project with Adobe #Illustrator CC

Laurie’s new job has her teaching preschool at the Jewish Educational Alliance here in Savannah. As part of her teaching, she needed a wheel that would let her students know what the day’s activity would be. I decided to create it for her using Adobe’s new Illustrator Creative Cloud.

Here is a PDF containing the final product: ActivityWheel

Activity Wheel

Most of the work I did involved finding Creative Commons images on the web and converting them to line drawings, then cleaning up the paths.

The activities are:

  • Monday – Sandbox
  • Tuesday – Painting
  • Wednesday – Skating
  • Thursday – Water table
  • Friday – Spray Painting (with paint in a spray bottle)

I really like the new Illustrator. I still haven’t decided if I can pay the $20/month for it, though. I have the Photoshop/Lightroom special of $9.99/month already.

Enabling Basic Authentication for Angular and jQuery clients for your ASP.NET WebApi

I have been working on a WebAPI for a client over the past few months and I’ve successfully implemented Basic authentication on my WebAPI and connected to it using a Xamarin Android client.

I’ve come to a point where I need to start supporting AngularJS clients, but I don’t like how the browsers each have their own default login dialogs that are ugly. I found a great blog entry solving this exact issue, but the author wrote their server side in Sinatra.

Here is the blog entry with the situation and solution:

http://olefriis.blogspot.com/2014/01/http-basic-authentication-in-angularjs.html

You’ll need to implement Basic authentication on your WebAPI to make this work. To implement Basic authentication on your ASP.NET WebAPI, follow the instructions here:

http://www.asp.net/web-api/overview/security/basic-authentication

One thing to make sure you do (in Web.config) is change the

type="WebHostBasicAuth.Modules.BasicAuthHttpModule, BasicAuth"

to reflect the project name and binary name of your project (your’s shouldn’t be named WebHostBasicAuth.Modules.BasicAuthHttpModule. It will be the name of your project instead.

type="{ProjectName}.Modules.BasicAuthHttpModule, {BinaryName}

It turns out that the changes required to make the solution outlined in Ole Friis Østergaard’s post is very easy to implement in ASP.NET.

Here is the code you need to change in the Basic Authentication Implementation from above:

That’s it! Now, when you pass in the X-Requested-With header value of “XMLHttpRequest”, you’ll get back a WWW-Authenticate header with a type of “xBasic” instead of “Basic”. That will cause the browser to ignore the request and suppress the login dialog, letting you display your own pretty dialog.

I have started a GitHub project that has my Sample WebAPI in it. I’ll be updating that to include the AngularJS code as I create it to demonstrate exactly how to pull this off since Ole’s post is light on details.

Here is the GitHub project:

https://github.com/cerkit/BasicAuthWebApiSample.git

random musings

Follow

Get every new post delivered to your Inbox.