HyperDrive: Update #5

Intended Audience: Marija Bezbradica (FYP Supervisor)

Made progress with:

  • Building basic authentication app with Apache Cordova & Ionic framework.
  • Issues communication between mobile app and server. (CORS)

I built a very basic Ionic application which supports token based authentication and authorization.

The app uses ‘angular-mocks’ to simulate a backed. Angular-mocks intercepts http requests and processes them according to the rules you configure.When a user logs into the app a request is made to a back end server with a username and password.I have hardcoded in some behaviour for two types of users ‘user’ & ‘admin’.The regular user has access to the ‘dashboard’ & ‘public’ tabs, while the ‘admin’ user has access to all tabs.

On each state change the app checks if the user is authenticated and authorized. If the user is not authenticated they will be directed back to the login screen. Below are some of the screenshots from the app. On the right the app is making a request for a resource without authentication.

screenshots

After getting the basic mocked functionality working my next step was to make calls to my own API for authentication.

I changed the request being made to add scope, grant type, client_secret, client_id as well as the Basic authorization header.

Screen Shot 2016-04-04 at 19.55.58Screen Shot 2016-03-22 at 12.48.21The above error provided me with quite a bit of difficulty. I was faced with this error when trying to login from the mobile app. I was sending the exactly same request as I was from the web application but I was getting different behaviour. After quite a bit of frustration and research I found out why I was encountering different behaviour.The web application and the API are currently part of the same project, so that when API calls are being made from the front end they are coming from the same origin as the API.

The way I had the project initially configured did not support CORS (Cross Origin Resource Sharing).

If you’re not familiar with CORS the wikipedia page say:

CORS is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated. 

Cross-domain” AJAX requests are forbidden by default because of their ability to perform advanced requests (POST, PUT, DELETE and other types of HTTP requests, along with specifying custom HTTP headers) that introduce many cross-site scripting security issues.

I was able to get around this issue by using a filter that allowed CORS requests:

Screen Shot 2016-04-04 at 19.31.24and updating my web security configuration:
Screen Shot 2016-04-04 at 19.33.08

Leave a Reply

Your email address will not be published. Required fields are marked *