Summary

This is a fork of the Spring Security + Angular samples created by Dave Syer. The goal of these changes is to create a starting point for an Angular single page app that allows users to login with their Google Plus or Facebook identity.

Approach

I selected the "proxy" project as the baseline for my enhancements, since it offers a logical separation between the UI components and the resource-serving components. From this starting point I needed to add:

• Integration with the Google Plus and Facebook Javascript SDK’s, which results in the browser getting an access token upon successful login

• A way for a client to setup the security context with the server. In short, the browser sends the Google Plus or Facebook access token to a login URL and then a servlet filter intercepts the token, validates it, and logs the user in as suggested by this stackoverflow answer

• A way to control the login process if the client is logged into both Google Plus and Facebook, since it doesn’t make sense for a user to try to login to the server using two identities simultaneously

• And finally, a more realistic organization of Angular source files to use as the starting point for an application

Lessons Learned

After looking at the Angular source code organization in Phonecat App, Photo Hunt, Todd Motto’s recommendations, and another Google team’s recommendations, I finally settled on John Papa’s style guide. Some of the syntax is more verbose and there are certainly more source files involved, but I found the structure easier to follow and generally like reducing the number of anonymous functions in the project, since named functions are easier for me to read and to debug.

The original Spring Security Angular project uses a Maven build to assemble the app. I found this to be way too slow for Angular development, so I created a Grunt build to make the Angular development cycle much faster. This, or something similar, is indispensible for any real Angular development.

TODO

The Spring Security Angular — Proxy project uses Redis to share sessions between the UI and Resource server. When I created the servlet filter and associated classes to enable Google Plus and Facebook access token login, I ended up with a few new classes like SocialAuthenticationToken.java. Instances of this class are stored in the session and hence the class itself is replicated in the two sub-projects. This is not a good longterm solution.