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

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