Disclaimer : I am not an angularjs or security expert. What I write here is based on my readings and foundings on the net. I also didn't read the full [OpenId connect spec](http://openid.net/specs/openid-connect-core-10.html). So feel free to comment the articles and the code and I will try to keep it up to date._
This article talks about different open source project that you can use to build and protect your application. As there are lots of article speaking on angularjs, webapi2 and MVC my main focus point here is how to use the new Thinktecture's IdentityServer v3 to protect your application and allow external application (Client) to call your Api. (remember the "Do you allow XXXX to acces your email and profile information and to have 'write' access to your data?").
full code : https://github.com/CedricDumont/Mix-It
I splitted this article in multiple parts for clarity and will try to keep each part up to date as comments are coming in :
**Part 1 : **setting up and configure IdentityServer. IdentityServer will be used to authenticate user but also to authenticate Client and give them access to User's resource after they give them consent.
**Part 2 : **create our "private" API that will contain an accountController responsible for creating our users. The responsibility to authenticate them will be provided by IdentityServer.
Part 3 : creating a public Web API that will "expose" user's Resources. By user resources, I mean Products, Contacts, Orders ...
**Part 4 : **creating our angularjs Web UI which will allow us to Register an account, Log In and Logout, List Resources...
**Part 5: **Creating an MVC application that will access our public Web Api using a token.
IdentityServer : https://github.com/thinktecture/Thinktecture.IdentityServer.v3
AngularJs : https://angularjs.org/
Web Api : http://www.asp.net/web-api
MVC : http://www.asp.net/mvc
Semantic UI : http://semantic-ui.com/