Integrate angular - SPA with Azure AD + ADFS

Question

Integrate angular - SPA with Azure AD + ADFS

Madhur 41

Hi,

I want to integrate my angular- SPA with Azure AD which is federating with on-prem ADFS. as per online document seamless SSO is not available with ADFS. how can i achieve seamless SSO experience using AAD/ADFS , is it cookies based authentication ?

Any online document or sample application?

Regard,
Madhur

Accepted answer

2 additional answers

Your answer

Answer 1

anonymous userBhardwaj-9418, I apologize for the delay in my response. Somehow I missed this thread. Let me try to share the answers for the questions listed above.

1) But how to enable application specific SSO ?
Ans: Application Specific SSO mostly works with apps using OAuth. When an app uses OAuth, mostly it would work on tokens. the two major tokens used are access tokens and refresh tokens. Using the refresh tokens another access token is requested for silently in the background, hence saving the user from logging in again in the middle of his session. Application specific SSO is enabled by default if your OAuth application uses Auth-Code Grant flow, which is a interactive login for users.

2) If the token issued is valid for let's say 1 hour , and user tries to re-launch application after 4 hours. how silent authentication will work, does ADFS will re-issue new token using refresh token if that is still valid.
Ans: If the user has accessed the application now, after logging in, he would be issued with an access token (valid for 1 hr by default) and a refresh token (valid for 14 days and keeps increasing if the refresh token keeps getting used). If the user closes the application/browser session, that session gets destroyed there and if after 4 hours the user again tries to access that same app, he would have to re-authenticate as the refresh token wont work here since the session was destroyed. Refresh token would only work if the session is active and just before the access token expires the code of the app fetches the next access token using the refresh token that rests in the application cache.

3) how the refresh token is created, do we need to enable this also , or it is created by default with session and persistent SSO.
Ans: If you are coding your own application, then you would need to use the MSAL library, which can be used to make the token requests. In that case, nothing special has to be done. But in case you are trying to fetch a token for an OAuth app using http post request, then you would need to add "offline_access" as a value for the scope parameter.

Sample Request: https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/authorize?client_id={client-id}&response_type=code&redirect_uri={redirect-uri}&response_mode=fragment&scope=openid%20offline_access%20https%3A%2F%2Fgraph.microsoft.com%2F.default&state=12345

4) What changes do we need at ADAL side ? domain-hint/login-hint etc. Could you please point me to some sample application.
Ans: You can check the following sample code. Its of a browser based application using MSAL(since this is the latest library) using Open ID Connect.
You can also check the following URLs:

Though these samples are for Azure AD, but these also work for ADFS. For enabling OpenID Connect on ADFS 2016, you can try the steps mentioned in the following article:
https://learn.microsoft.com/en-us/windows-server/identity/ad-fs/development/enabling-oauth-confidential-clients-with-ad-fs

Hope this helps. Do let us know if this helps and if there are any more queries around this, please do let us know so that we can help you further. Also, please do not forget to accept the response as "Answer" if the above response helped in answering your query.

Madhur Bhardwaj 101 Reputation points

2020-05-21T12:02:27.34+00:00

Thanks once again @soumi-MSFT for detailed answer.

Just to validate my understanding issuing refresh token to SPA (single page application) is not good practice so, i think my application which is actually a SPA will only receive Id-Token and access token. for silent authentication which internally use iframe + cookies to get new token. so for SPA implicit is the only possible flow with ADFS 2016 ? i think ADFS 2019 has code flow + PKCE.

Regarding re-launching the application without re-authentication should also work if persistence cookies which can live beyond sessions is still valid. so once user re-launch the application browser will send the cookies to ADFS and if server finds a valid persistence cookies it should issue a new token to provide auto login (seamless SSO) kind of user experience ?
soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-05-21T13:05:56.913+00:00

anonymous userBhardwaj-9418, Yes, you are correct, for SPA application the only way to get the token (access token) is using the implicit flow by using the MSAL.js library. In implicit flow, there are two steps involved usually,

Request to the /authorize endpoint of AAD to request an id_token initially

Request to the /authorize endpoint again of AAD to request an access token. This is the step that is used for silently requesting another access token also.

You can find more details on the implicit flow here: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow#send-the-sign-in-request

Now with the advent of MSAL v2.x version using that you can try the auth-code grant flow. You can find a sample for the same here: https://github.com/Azure-Samples/ms-identity-javascript-v2

For the second part, yes even persistent cookies will prove useful here as you described.
soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-05-21T13:06:34.557+00:00

anonymous userBhardwaj-9418, Hope this helps. Do let us know if this helps and if there are any more queries around this, please do let us know so that we can help you further. Also, please do not forget to accept the response as "Answer" if the above response helped in answering your query.
Madhur Bhardwaj 101 Reputation points

2020-05-21T16:20:13.26+00:00

Thanks @soumi-MSFT for answering all my queries..
soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-05-21T16:22:28.3+00:00

anonymous userBhardwaj-9418, It would be great if you can accept the response as Answer so that it helps others visiting the community with similar queries.
Madhur Bhardwaj 101 Reputation points

2020-05-21T16:46:51.22+00:00

@soumi-MSFT apologies but i'm not able to find option to mark your reply as answer :-)
soumi-MSFT 11,831 Reputation points Microsoft Employee Moderator

2020-05-22T03:46:16.997+00:00

anonymous userBhardwaj-9418, The response under the Answer section that helped in answering your query, you should see a button called "Accept Answer". Since anonymous userbhardwaj is the owner of the question, that id should be able to accept the response as answer.

Hope this helps.

Answer 2

soumi-MSFT 11,831 Microsoft Employee Moderator

anonymous userbhardwaj, You would also get SSO if the domain present in your Azure AD tenant is federated with ADFS. ADFS supports the following types of SSO:

Session SSO
Persistent SSO
Application SSO

You can read more about ADFS SSO here.

Hope this helps. Do let us know if this helps and if there are any more queries around this, please do let us know so that we can help you further. Also, please do not forget to accept the response as "Answer" if the above response helped in answering your query.

Madhur 41 Reputation points

2020-05-15T19:14:44.65+00:00

Thanks a ton @soumi-MSFT , it was really helpful. I have few more questions
I could find commands to enable Session and Persistent SSO.

1) But how to enable application specific SSO ?

2) If the token issued is valid for let's say 1 hour , and user tries to re-launch application after 4 hours. how silent authentication will work, does ADFS will re-issue new token using refresh token if that is still valid.

3) how the refresh token is created, do we need to enable this also , or it is created by default with session and persistent SSO.

4) What changes do we need at ADAL side ? domain-hint/login-hint etc. Could you please point me to some sample application.

Many thanks in advance.

Madhur
Madhur Bhardwaj 101 Reputation points

2020-05-21T05:25:38.217+00:00

any help on these questions

Answer 3

Muthu, Sathiamoorthy 1

Hi @soumi-MSFT , I have successfully added MSAL in my SPA application, is it possible to add SAML? how to add SAML in SPA application?

Share via

Integrate angular - SPA with Azure AD + ADFS

2 additional answers

Your answer