Seventh Week in Coding Bootcamp: Authentication with OAuth

By: Karen Snyder

On November 2, I began the seventh week at Origin Coding Academy. Hard to believe the first half of coding bootcamp was over, and I was starting the second half! In the beginning of the week, I learned more about passing information to the different states of a single-page application, and also learned how to use the AngularJS $resource factory to simplify access to the PropertyManager API, resulting in much less code than I had needed in KnockoutJS to access an API. The $resource factory can be used only with RESTful APIs, and luckily the APIs that I write in this course are RESTful. After that I was able to complete the front end of the PropertyManager Web application, including showing all properties, tenants, and leases, along with the functionality to add and update each.

Then I started earning about authentication and authorization, which is a huge topic that can’t be completely learned in one week, but it is possible to get some understanding of the subject. I was assigned the tutorials here, written by Taiseer Joudeh, which illustrate how to authenticate users in a Web API and AngularJS front end with a token-based approach. The token-based approach means that the server assigns a token to a validated user. The client saves the token and sends it with each request that the user makes to read or write data. This approach helps the client to share the server load in authentication, and the token is more simple to store than cookies.

After going through the tutorials, the next project was to use the knowledge gained by adding authentication to the PropertyManager Web application. I had to modify the Web API to add authentication, based on what was taught in the tutorials, by using ASP.NET Identity and Owin middleware packages in order to register new users and validate user credentials to generate tokens.

I learned how to use the Chrome Postman extension to verify after making the changes that it was not possible to access the API without first registering as a user and then obtaining a token to send with the GET or PUT to the API.

Then after verifying the the back end authentication was working, I added authentication to the front end. I added a login and registration screen to the front end of the PropertyManager Web application, along with a logout button and a display of the logged-in user. When trying to log in with the front end, I initially ran into some problems with Cross-Origin Resource Sharing (CORS), as the default is that the API does not allow requests originating from a different domain. These problems did not occur when testing with Postman, as requests sent by Postman are not interpreted by the API as originating from a different domain, however requests from the front end are interpreted as being in a different domain. I made some changes in the API to allow CORS and was able to proceed with the front end changes.

I also learned more about how to validate in AngularJS by using components of theinput directive. Cameron explained to me that rather than disabling the submit button if a field is invalid, it is a better user experience to allow the user to complete their typing and click the button to submit, and only then to display any problems with the input data. I added validation logic to the login, register, and add property/tenant/lease screens, such that when the user submits the form, any required fields that have not been filled in are highlighted in red with a message underneath stating that they are required.

The guest speaker this week was Jim Milton from Portfolium, which is a site that allows you to build an online portfolio of projects. He explained the best ways to leverage our portfolios to make us more attractive to recruiters and prospective employers. Now I need to improve my portfolio according to his suggestions!