Sharing the Love – Zurb Foundation for Apps Scaffolding for .Net with Authentication

TLDR;

NuGet package here.

Github repository here.

A little while back I was really excited that Zurb released their Foundation for Applications (ZFA) library. I’ve been working with it a little and really like the results. I’ve learned some new things along the way and it’s helping be do a “platform shift” for my side project: Prayer Journal. I even created an initial scaffolding that others can use to start up their .Net apps. But I still needed to be able to let users create accounts and restrict access to pages, so a new scaffold was born, one with authentication.

The Basics

The core of the authentication piece deserves a HUGE hat tip to Taiseer Joudah, who wrote an amazing series about how to build an app with a .Net web service backend and use an AngularJS architecture on the front end for client interaction. The series shows how to password protect only the pages you need to, as well as include other login services (such as Facebook and Twitter) to integrate into your application. I was able to go through the series, and adapt the code to the ZFA framework where needed.

I won’t go into a “soup to nuts” outline of the framework like I did for my previous scaffolding. I would highly recommend you read Taiseer’s series to get a better working knowledge of the WebAPI backend and the AngularJS factories/services used to handle authentication, and then read my previous article on using ZFA in .Net to really get an in depth look of what is going on. For now, I’ll cover a few of the basics about how this scaffolding is organized.

Authentication

As mentioned earlier, .Net provides a great set of libraries to cover OWIN (its open web protocol) and WIF (it’s updated identity management foundation). Since our single page application framework doesn’t play as nice with your typical cookie based authentication model (and any future mobile apps that might queue into this API wouldn’t either) we go with the newer and more flexible signed token approach. The great thing about this is that .Net gives us about 90% of this code out of the box with the frameworks mentioned above. We simply need to provide the appropriate wiring and configuration for our functions.

WebAPI

Instead of using a MVC approach (though in a lot of ways this approach is MVC), we went and used the .Net WebAPI for all of our processing. This gives us the flexibility of using the same core code base with mobile applications and our front end framework plays quite nice with WebAPI. Again, thanks to the .Net libraries available, 90% of the work is done for us. We simply install the library, wire up some basic configuration code, and start building the API calls we need.

Zurb / Angular

Our front end uses AngularJS for our single page application framework. I’m still pretty new to the framework but really love how clean it makes a lot of the intense data binding/watching/updating methods that I used to have to work with. The template architecture provided by ZFA works great with AngularJS’s dynamic routing model and we have nicely compressed stylesheets/resources for optimal performance. There are plenty of “eye candy” type plugins as well for those fancy effects you may think are only available in a jQuery/Bootstrap environment.

How to Use

Start an empty solution in Visual Studio. Open up the package manager console and run the following command:

Install-Package z4a-dotnet-scaffold-auth

This will pull down the scaffolding and get the initials in place. Since this scaffold is a little more complex than the basic one, we do need to effectively “rebuild” our front end code base, as well as our backend database. The readme file that is attached will have the rest of the details.

Go Make Something Great!

I hope this becomes a good resource for you to get going with what I like to call the “ZANS” architecture. I’d love to hear about what apps you’re building with it and if you run into any issues with it. Enjoy!

8 thoughts on “Sharing the Love – Zurb Foundation for Apps Scaffolding for .Net with Authentication

  1. Hi there,

    What a great and interesting post. Just a question, I was hoping you might be able to answer, I downloaded the VS demo solution and have been having a play with the project locally and wondered whether you know how to go about securing individual pages so that only registered/logged in users can access them? For example, if a non-registered user were to enter the URL to the news page (i.e if somehhow they worked it out) into the browser:

    e.g. http://www.myserverurl12340/#!/news

    at present they are allowed to access the news page. I thought that they would be denied, but that may require extra functionality of protecting the ‘news’ router somehow so it only serves the page if user is authenticated. Do you have any thoughts on this and how it may be achieved?

    Thanks

    1. Greetings Greg! I’m still working through that portion myself with a project I’m working on. I believe the linked tutorial base I was working from should have some addition resources to secure that.

      If not, one thing I pulled from another project was to setup a “UserService” and register an onRootscope changed event that would check whether or not a page is protected and if the user was authenticated. If not they would be redirected to the login page. Part of this code relied upon the routing to have an additional parameter for “isProtected” which i haven’t translated yet to the “font matter” templating that ZFA uses.

      Hopefully that gives you an idea. If not, it’s something I definitely need to update for the scaffold.

  2. Hey! Thanks for posting back. I am new to Foundation, so still finding my way around how everything fits together. However, if we look at the part of your current solution that serves the data from the WebAPI using .NET, I added a simple:

    “[Authorize]”

    parameter into the ‘InfoController’ in .NET.

    As a result, it seems that the News page (as per my original post) can still be accessed by an unauthorised user, however this new parameter seems to protect any calls to the actual data in the WebAPI by using the security login/authorisation you have in place already. Therefore now it will only serve data (in this case when the HTTP call is made by pressing the ‘Get News TIme’) to logged in users.

    Not perfect, but quite a straightforward addition if we are more concerned about data stored in a database being protected than front-end matter. For now at least.

    Does that sound like it is a ‘proper’ way of protecting the data – I mean I assume this is how it is designed to work in .NET ?

    All the best and really like what you are doing here.

    Greg

    1. Yes, using the [Authorize] data annotation is definitely the way to go, since it will require the auth token to be valid, and can validate the one being passed in. I’ve noticed in my own code a little bit of a disconnect between the Foundation display and the authorized action, as you are mentioning. I suspect this just needs a little more tweaking on the front end for the token, or potentially a quick API “token check” type option to verify if the token is still valid when reloading a page.

      I’ve been using Foundation for a little while, but I’m still pretty green myself, so it’s good to get some other eyes on the case! Let m know if you put in a solution and I’ll add it to mine!

      1. Hey, I’m studying Foundation for Apps too, a complete newbie, but I think your .NET hybrid ideas are really interesting.

        I don’t have enough experience yet to be able to do the enhancements to the Auth stuff, so I think I will need to watch your progress – I’m a student of Computing so it’s nice to see a pro-work!!

        I also saw your other blog post about tips for new people coming in to IT as a profession, it’s great that folks like you take the time to post information in this way, so thanks.

        I’ll be sure to keep an eye on your blog. If you do have any updates to this hopefully you can post them on this comment string (page). Or maybe some other comments will come as a result of our discussion! All the best.

What are your 10 bits on the matter? I want to know!

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