1

I am building an Angular 8 app that authenticates the user against Microsoft Azure Active Directory using adal-angular4. I have an ASP.NET Core API set up and associated with a client app on Azure.

I have followed the following documentation to set up Active Directory: -

https://azure.microsoft.com/en-gb/resources/samples/active-directory-dotnet-webapp-webapi-openidconnect-aspnetcore/

and the following for setting up my Angular app and my .NET Core API using adal-angular4: -

https://www.digital-moves.eu/2018/07/19/authentication-with-azure-ad-angular-6-client-web-api/

The redirect URL appears to work, in that the correct callback component in my application is hit. However, at this point the app gets into an endless loop of re-attempting the login and redirecting. Eventually the login attempt produces the exception 'we couldn’t sign you in. Please try again', presumably due to being locked out.

In my app.module.ts: -

  providers: [
    AdalService, { provide: HTTP_INTERCEPTORS, useClass: AdalInterceptor, multi: true },
    RefreshTokenService

My adal config file: -

  private adalConfig = {
      tenant: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
      redirectUri: 'http://localhost:4200/auth-callback',
      postLogoutRedirectUri: "http://localhost:4200/end-session",
      endpoints: { "https://visionapi2019.azurewebsites.net": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" },
      cacheLocation: 'localStorage'
    };

  constructor(private adal: AdalService){
    this.adal.init(this.adalConfig);
  }

  ngOnInit() {
    this.adal.login();
  }

In my callback component I have the following: -

  ngOnInit() {
    this.adal.handleWindowCallback();
    this.router.navigate(['test-api']);
  }

Navigation to component 'test-api' works, but then the infinite loop begins.

Thanks!

trees_are_great
  • 3,881
  • 3
  • 31
  • 62
Stephen Banbury
  • 43
  • 5
  • Do you see any console errors? – Suhas Parameshwara Jul 26 '19 at 11:39
  • Not really - it's sometimes hard to tell because the looping happens so quickly. But occasionally I have seen this: "sockjs.js:2998 WebSocket connection to 'ws://localhost:4200/sockjs-node/455/b4sklziq/websocket' failed: WebSocket is closed before the connection is established." – Stephen Banbury Jul 26 '19 at 12:26
  • Can you check whether this link provides you any clarity? https://stackoverflow.com/questions/52123856/angular-6-websocket-is-closed-before-the-connection-is-established – Suhas Parameshwara Jul 26 '19 at 12:48
  • Thanks. Nothing immediately obvious with this, but I'll keep delving. – Stephen Banbury Jul 26 '19 at 13:21
  • Further research has led me to the possibility of a hashbang being added before id_token in the return url: http://localhost:4200/auth-callback#id_token=eyJ0eXAiOiJK.... However, I've not been able to remove this. I've tried using the following in my router: imports: [RouterModule.forRoot(routes, { useHash: true })] as suggested here: - https://stackoverflow.com/questions/41687562/angular-2-remove-hash-from-the-url and also { provide: LocationStrategy, useClass: PathLocationStrategy } in app.module.ts. None of these have removed the hash. – Stephen Banbury Jul 30 '19 at 09:56
  • 1
    Solved! I used [RouterModule.forRoot(routes, { useHash: false })] in my router and also removed this.adal.login() from ngOnInit() in the app.component - I guess it was re-attempting to log in for each redirect and then failing due to the hash in the url removing the id_token. – Stephen Banbury Jul 30 '19 at 10:21

1 Answers1

0

Solved the problem. I used [RouterModule.forRoot(routes, { useHash: false })] in my router and also removed this.adal.login() from ngOnInit() in the app.component - I guess it was re-attempting to log in for each redirect and then failing due to the hash in the url removing the id_token. Now the login and redirect works fine.

Stephen Banbury
  • 43
  • 5