Angularjs and SAML, the beginning

Question

I m working on an application that needs SAML to manage authentication with an OpenAM server.

Actually, I use Satellizer with OAuth2 implicit grant flow and I have the following :

• Open angularjs app in browser
• Click on the third party login button
• A new window hover the existing one (with ng app) is open asking me my credentials
• I fill them, and validate
• The pages made its stuff (generating token)
• The angularjs application gets the token through the windows (how it is possible ?)
• I can use my application with the OAuth2 bearer / jwt token.

I need to have something that works the same using SAML. The fact is that I m completely lost and it seems that I should log onto the SAML server using my backend...

I don't really like this situation and I need to know if there's something better to do using client side application.

What is the "usual" authentication flow with client side app with SAML ?

Thanks for your help

Answer 1

SAML2 was designed at a time when the concept of client side apps with JavaScript was not yet invented.

A common method is to use an intermediate OpenID Connect/SAML2 proxy/bridge (e.g. IdentityServer3 + Kentor.AuthServices.Owin) to authenticate users:

1. User starts log in sequence in JS app.
2. User is redirected (part of OpenID Connect flow) to IdentityServer3.
3. User is redirected (part of SAML2P) to SAML2 Idp.
4. User authenticates at SAML2 Idp.
5. User is redirected back to IdentityServer3 (part of SAML2P).
6. User is redirected back to JS app (part of OpenID Connect flow).

This works excellent to get the user authenticated with an external Idp. If you have resources, such as backend services, those calls are usually authorized through an OAuth2 bearer token issued at step 6.

If your backend API is expecting a SAML assertion instead of a bearer token you will have to look at our ways though.