Angular 2 Authenticatication with on-prem ADFS

Question

We have decided to use Angular 2 as the framework for our new project. In trying to deal with the security aspect of things, I cannot find much on authentication with on-prem ADFS. There is plenty out there dealing with Azure AD, but that is not an option for us.
Does anyone know of a way to be able to setup Angular 2 to successfully authenticate against ADFS?

Did you find a solution for this? IdentityServer3 is able to integrate with ADFS, but it may be overkill for you. I am working through ADFS authentication with ADFS from C# using the ADAL library and have just posted quite extensive details for setting up ADFS as an answer to [this question](http://stackoverflow.com/questions/39961921/how-do-i-setup-a-valid-on-premise-adfs-uri). It may help you, though you'd obviously use the ADAL JS library. — Peter, Oct 19 '16 at 15:44
No we did not. We wanted to implement IdentityServer3 but our security team wants to settle on having only one "login" service enterprise wide. Currently ADFS is in use so having IdentityServer was too much for them. — bharris9, Dec 01 '16 at 18:30
@bharris9, So what you did in the last for this problem? Any solution? We are also having the similar kind of requirements but did not find any solution for this yet, If you have any, please share — Nimish goel, Feb 11 '18 at 19:47
@Nimishgoel we ended up just using using the basic auth in IIS on the server to authenticate. That was the method being used in the old solution. The users were used to getting prompted on their browsers for user/pass -- so we stuck with that though not ideal. On my second project we used IdentityServer which is so much nicer. — bharris9, Aug 10 '18 at 17:40

score 8 · Answer 1 · answered Dec 28 '16 at 09:31

8

You can implement this successfully using the ng2-adal npm library, you can implement it the same way it is implemented for Azure AD, but instead you fill the values of the secret-service.js with the ADFS values as following:

import { Injectable } from '@angular/core';

@Injectable()
export class AdfsSecretService {
  private endpoints: any = {
    'http://{your-website-url}/':
    'http:/{the-service-provider-identifier}', // as registered in ADFS
  };

  public get adalConfig(): any {
    return {
        instance: 'https://{your.adfs.site}/',
        tenant: 'adfs',
        clientId: '{adfs-client-guid}',
        redirectUri: window.location.origin + '/',
        postLogoutRedirectUri: window.location.origin + '/',
        endpoints: this.endpoints
    };
  }
}

you can find a link to an example in the library's readme section.

On the ADFS side you need to register your apps under ADFS as an Application Group, for more info refer to this technet article

answered Dec 28 '16 at 09:31

Tha'er AlAjlouni ثائر العجلوني

14,069
7
33
38

What is the value of service-provider-identifier, Can you share any example ? – Nimish goel Feb 12 '18 at 17:41
It is an arbitrary uri identifier that you create when you register you web app in ADFS, check the technet article mentioned in the answer for more details. – Tha'er AlAjlouni ثائر العجلوني Feb 12 '18 at 19:41
Need, One more help, what is the meaning of `http://{your-website-url}/` My Website URL, during the development? like `http://localhost:58689` Correct me IF I am wrong – Nimish goel Feb 27 '18 at 16:20
1

Yes, but don't forget to change it to the production URL once you go live. – Tha'er AlAjlouni ثائر العجلوني Feb 27 '18 at 16:31
And, is it necessary that my site should be on https, It can be on HTTP also, correct? I do not know, But I am getting ADFS Error page when clicking on login. What can be the reason for that? – Nimish goel Feb 27 '18 at 16:34
in auth.service.ts there is a URL xyz.micorosoft.com, what that should be replace with? public getToken(): Observable { return this.adalService.acquireToken("https://xyz.onmicrosoft.com/abc").map( token => token.toString() ); } – resolve_promise Apr 18 '18 at 15:03

rbrayb · Answer 2 · 2016-06-01T19:31:17.660

3

My understanding is that you would normally use ADAL 2.0 (ADAL JS) for this.

However, that uses the OAuth implicit flow that is not supported by ADFS 3.0. There is no OAuth support in ADFS 2.1 and below. It is however, supported in ADFS 4.0 (Server 2016).

You could get round this by bridging with something like IdentityServer or Auth0 e.g. Authenticate Angular.js with ADFS.

And no, I don't work for Auth0!

edited Jun 01 '16 at 19:31

answered Jun 01 '16 at 19:24

rbrayb

46,440
34
114
174

I wish we could use Auth0 but the cost of the license for enterprise clients will prevent that option. I'll have to look into IdentityServer. – bharris9 Jun 01 '16 at 19:45

Angular 2 Authenticatication with on-prem ADFS

2 Answers2

Linked