Integrate ADFS with Angular 2 project

Question

I have to integrate ADFS with angular 2 Project. I know, this ADFS is old one now. But We need this only.

I found similar question On-Prem ADFS . It suggests to use angular2-adal. I have tried that Also. But this thing is giving me the ADFS error Page, when clicking on login button. Below is the code, which I am trying.

private endpoints: any = {
    'http://localhost:58689':
          'https://localhost:44302', // as registered in ADFS //  
  };


  public get adalConfig(): any {
    return {
        instance: 'https://adfs.domain.com/',
        tenant: 'adfs', 
        clientId: 'https://localhost:44302',  
        redirectUri: window.location.origin + '/',
        postLogoutRedirectUri: window.location.origin + '/',
        endpoints: this.endpoints
    };
  }

I do not know, what is the error, I have tried many combinations to set the properties, But always the same error page.

Note:

1. http://localhost:58689 is my local website URl

2. https://localhost:44302 // is Relying party identifier On ADFS Server.

Questions:

1) Is it necessary that my site should be on https, It can be on HTTP also,

2) Is there any alternate solution apart from angular2-adal, for ADFs integration with Angular 2, I need only ADFS.this is the only problem (No OAuth, No SAML)

Answer 1

In order to talk to ADFS, you have to use OpenID Connect (OAuth), WS-Fed or SAML.

You also need ADFS 4.0.

Yes - you need to use ADAL.

Here's an example.