SSO with Angular 7 —

Recently I tried, developing an angular7 application (with .net web api) to Single sign-on through ADFS. Microsoft has provided a npm package for For angularjs but not for Angular. After a bit of research, I found that you have to write your own wrapper to do the job which is a bit headache for a backend developer like me. So I have found a angular package which works as a wrapper on top of adal.js.

source: https://docs.microsoft.com

How to configure adfs — https://docs.microsoft.com/en-us/windows-server/identity/ad-fs/development/native-client-with-ad-fs

How to configure api —

1. Install NuGet package Microsoft.owin.
2. Change Startup.Auth.cs as follows,

Startup.Auth.cs

web config settings

3. Add highlighted line in WebApiConfig.cs in App_Start

Enable cors

4. Install Nuget package — WebApiCors

Get Nilendra Sarathchandra’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

5. Add Authorize attribute and the following attribute before every API controller you want to access by client-side

enable cors in api controller

How to configure Client side (Angular 7)

1. Install npm package (npm i microsoft-adal-angular6)
2. Import microsoft adal in app.module.ts

3. Add the following in imports of app.module.ts (change accordingly)

4. In providers of app.module.ts add ‘AuthenticationGuard’

5. Import adal angular in app-routing.module.ts

6. Change your routes as follows

7. Create token interceptor which will attach a bearer token in http header, in every API call you make, this can change according to your requirement. Mine is as follows.

get access token from acquire token method and attach as a bearer token in API call

Now you have completed all the steps. Good luck with testing.