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?

Answer 1

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!

Answer 2

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