I mean it

Getting the new project going using C#/.net has been a bit of an adventure.  There are multiple reasons:  I had no prior experience with the language or framework, Few people on the team really did, and we decided to use .net core 1.0- the latest and greatest version.

So, there have been some hurdles, but it’s been fun to learn.  Visual Studio 2015 is both great and frustrating.  It’s an amazing program that will help you quickly check what methods are available and what each does (intellisense), it provides a built in test server for debugging, and even manages dependencies for you.  However, it also slows to a crawl sometimes while debugging, occasionally crashes for no apparent reason, and can be very complicated to publish a project (unless it’s directly to Azure).

It can be complicated to even start a project when you try to include a frontend framework (like Angular 2).  We eventually got one working (with the help of a nice example using yeoman).  I’m not trying to rip on VS2015- it’s amazing, but sometimes it’s nicer working with something a little lighter.

Anyway, I’m still much more comfortable with Javascript.  So when a side project came in that would let me set up a simple server and login system to host an internal use app, I jumped on it.  I got to choose the stack to use, and went with Node on the server.  I know there are critics, but I’ve been learning quite a bit about Node recently and wanted to give it a try.

It’s been great so far.  The frontend of this app is also Angular 2, so we can just work in JS the entire time.  My favorite experience so far as been implementing the persistent login system.  Why?  Because I don’t really know if we’ve found a creative solution or just a terrible idea, but I hope to find out.

We needed the app to be secure, but also allow a user to stay logged in across multiple Angular routes and even a page refresh if needed.  The first part is easy- use the CanActivate operation to protect everything except the login screen (there’s no api at the moment, but obviously that would need to be protected on the backend as well).  A locally stored ‘isLoggedIn’ boolean will check to see if access is allowed.  It’s initially false- a user logs in and their username/password is sent to the (Node) server.  There, it’s checked against the actual user data (currently in an unsecure json object for testing, soon to be in MongoDB).  If a match on the user/password is found, a json response is sent back containing a success notice and a json web token which is stored in sessionStorage (more on that in a minute).

The frontend then sets isLoggedIn to true- this will keep the user logged in while ‘inside’ the angular app.  But what if a reload happens?  It shouldn’t, but definitely could.  That would reset the app, and isLoggedIn reverts to false.

In steps the json web token.  Accepted practice is to confirm this token on any request to a protected route on the server, but we only really have two (login and home- it will be a simple display page).  It seemed unnecessary to contact the server again, unless the page is reloaded.  So, in the root component of the Angular 2 app, we added a check in OnInit.  It looks to see if there is a ‘token’ property in sessionStorage.  If there is, it sends the token value to the server.  On the server, that token is decoded and checked against a valid active token.  If a match is found, that user is automatically logged back in.  If not, back to the login screen!

It seems to work well, and seems fairly secure.  The jwt is stored in sessionStorage, which could be viewed, but I believe only on the actual user’s computer, correct?  Either way, it’s encrypted- that token has to be sent back to the server to be verified before access is allowed.

We’re still working on it, so I’m sure there will be changes/improvements, but so far it’s been a great experience.  Before this, I’d only heard about the benefits of full stack JS (backends I’ve worked on range from PHP to Python and now C#), but it really is nice.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s