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.
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)
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....
As you see in the the sequence, there is no direct communication between the Portal-Api and the Idp for Authentication and Authorisation or an user to a specified resource. The whole authentication process is handled by the Idp and the Browser (or the AngularJS) application itself. This includes
- Check existence of valid token in Browser-Store
- Redirect to Idp with correct redirect_uri (back to the SPA)
- Storing token in the Browser-Store
- Validate Expiration of Token
- Add Autnentication-Header to Api-Calls to the Portal-Api
- (Optional): Self-Update issued token as long user is active
Please note, some of the tasks should also be done in the server (i.E. Token Expiration Checks). This is already handled by the OAuth-Owin-Middleware in .NET.
With these requirements in mind, i found the following client libraries to support the Auth-Process in the client.
The following libraries are more or less compatible with AngularJS and the given approach
- Works with OpenId and some small adjustments
- Has no refresh functionality
- 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)
- Does not handle token response in client
- Needs server component who exchanges accesstoken to a idtoken
- Not OIDC-Compatible
- Does not directly handle callbacks
- Wrapped in a directive
- Not OIDC Compatible
- No Refresh Handling
- Conceptual fine
- Tightly coupled to Azure AD
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:
- 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)
bower install michaelschnyder/oidc-angular