JWT Token-Based Auth with AngularJs
Recently I developed a large customer portal where users should be able to login via different authentication providers. The backend is purely written in C# where as the frontent is basically a AngularJS Application.
Authentication Flow
As our entry point is an AngularJS application, we decided to use the Hybrid-Authentication Flow as defined in this RFC and explained in this article (http://www.heise.de/developer/artikel/Flexible-und-sichere-Internetdienste-mit-OAuth-2-0-2068404.html?artikelseite=2)
As per this delegation, a trusted relationship needs to be established between the backend-system (a .NET Application in our case) an the Identity Server. Mostly this is done with PKI and a signature to check the validity of the token when the client (the browser in our case) sends the token back to the server as Http-Header like Authentication: Bearer id....
Notes:
Blog: http://www.heise.de/developer/artikel/Tipps-und-Tricks-fuer-AngularJS-Teil-3-OAuth-2-0-2620374.html?artikel
Notes:
Notes:
Code: https://github.com/andreareginato/oauth-ng
Notes:
Blog: http://www.azurefromthetrenches.com/?p=2241
Notes:
Notes:
All of the mentioned libraries have different benefits (i.e. well styled, nice community or support for various external Identity Providers). All I wanted was a AngularJS-Compatible module to integrate with a OpenId-Connect capable Identity Server. I didn't expect that there will be no library which addresses this requirements. So I ended up at this point thinking of writing such a library itself.
The Angular-JS Module has the following capabilities:
Check out the sources on: https://github.com/michaelschnyder/oidc-angular or, as common in the Javascript-World
bower install michaelschnyder/oidc-angular
Authentication Flow
As our entry point is an AngularJS application, we decided to use the Hybrid-Authentication Flow as defined in this RFC and explained in this article (http://www.heise.de/developer/artikel/Flexible-und-sichere-Internetdienste-mit-OAuth-2-0-2068404.html?artikelseite=2)
Backend-Implementation
From the backend perspective, the whole authentication process is delegated to the Identity Server from ThinkTecture, a C# Component which provides an OpenId-Connect (also known as OIDC) compilant authentication-server.Check it out at https://identityserver.github.io/Documentation/docsv2/, the version 2.0 was just released a few days ago.
As per this delegation, a trusted relationship needs to be established between the backend-system (a .NET Application in our case) an the Identity Server. Mostly this is done with PKI and a signature to check the validity of the token when the client (the browser in our case) sends the token back to the server as Http-Header like Authentication: Bearer id....
Existing Libraries
The following libraries are more or less compatible with AngularJS and the given approachAnvil Connect
Page: http://anvil.io/Notes:
- Works with OpenId and some small adjustments
- Has no refresh functionality
heise.de Sample
Page: https://github.com/manfredsteyer/angular-with-openid-connectBlog: http://www.heise.de/developer/artikel/Tipps-und-Tricks-fuer-AngularJS-Teil-3-OAuth-2-0-2620374.html?artikel
Notes:
- Validates Issuer, Audience, Nonce
- Refresh included
- Claims Parsing included
- Does not not Logout at IdServer (destroy session on idServ)
- Nonce must be generated @ Server (stateful somehow)
Satellize
Page: https://github.com/sahat/satellizerNotes:
- Does not handle token response in client
- Needs server component who exchanges accesstoken to a idtoken
oauth-ng
Page: http://andreareginato.github.io/oauth-ng/Code: https://github.com/andreareginato/oauth-ng
Notes:
- Not OIDC-Compatible
- Does not directly handle callbacks
AngularJs-Oauth2
Page: https://github.com/JamesRandall/AngularJS-OAuth2Blog: http://www.azurefromthetrenches.com/?p=2241
Notes:
- Wrapped in a directive
- Not OIDC Compatible
- No Refresh Handling
Active Directory Authentication Library m(ADAL) for Javascript
Page: https://github.com/AzureAD/azure-activedirectory-library-for-jsNotes:
- Conceptual fine
- Tightly coupled to Azure AD
Decision
Tada!
OIDC-Angular
The Angular-JS Module has the following capabilities:
- Login / Logout from an Idp
- Stores token in Browser-Storage and reaccess it later
- Configurable API-Urls to intercept with Authentication-Header
- Hightly Configurable
- Several Events (i.E. TokenExpiration, MissingToken, Login, Logout, etc.)
- Fully integrated into client-Code (no server component needed)
Check out the sources on: https://github.com/michaelschnyder/oidc-angular or, as common in the Javascript-World
bower install michaelschnyder/oidc-angular
Comments
Post a Comment