SAML Authentication with Angular and .NET WebAPI

Issue

I am trying to setup a website that uses Angular for the front end, .NET for the backend APIs and utilizes SAML for authentication against a third party's Azure AD. I am getting confused trying to understand the process for how each part interacts with each other.

When I look at documentation online I see references to Service Providers and Identity Providers. Would the backend APIs be the Service Provider and the third party be the Identity Provider?

Is the following how the flow would work for the UI, Service Provider (SP) and Identity Provider (IdP)?

1. A user goes to the UI and presses login.
2. The UI calls an API Login endpoint on the SP.
3. The SP creates a SAML Request and sends it to the IdP.
4. The IdP returns a SAML Response to the SP. Would this be a different API endpoint from the initial Login one used in step 2?
5. The SP parses through the response and verifies authentication.
6. The SP returns a response to the UI based on if authentication is successful or not.
7. The UI redirects the user to the authenticated site if successful.

Or would the UI send a SAML Request directly to the IdP and wait for the Response and send that to an API endpoint on the SP for validation?

Solution

I'm sure there are many ways to achieve this but I think the steps you've enumerated are a good starting point.

To answer your questions:

1. The backend app would be the SP. Azure AD would be the IdP.

2. I recommend having a separate endpoint whose sole responsibility is to receive and process SAML response from the IdP.

ComponentSpace has a commercial product (SAML for ASP.NET Core) that demonstrates an Angular app communicating with an ASP.NET Core backend app acting as the SP to SSO to some third party IdP such as Azure AD. It also demonstrates upon successful SSO the backend app securely returning a JWT to the Angular app for subsequent authorized web API calls.

Answered By - ComponentSpace