Azure AD with Angular 4

Question

I'm using Azure AD with implicit flow with an Angular 4 app. My NG4 app is using PathLocationStrategy for routing so that it can take advantage of the clean urls. My AAD auth request looks like this:

https://login.microsoftonline.com/xxxxx/oauth2/authorize?client_id=xxxx&response_type=id_token&redirect_uri=http://localhost:4200/login&response_mode=fragment&scope=openid&state=12345&nonce=xxxx

The authorization passes and I'm redirected to http://localhost:4200/login#id_token=xxxxx which then gets redirected to http://localhost:4200/home#id_token=xxxxx

I have routes that looks like this:

  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: '', component: BlankLayoutComponent,
    children: [
      { path: 'login#id_token=:id_token', component: LoginComponent }
    ]
  },
  {
    path: '', component: BasicLayoutComponent,
    children: [
      { path: 'home', component: StarterViewComponent }
    ]
  },
  // Handle all other routes
  { path: '**', redirectTo: 'home' }

I can't seem to get a route configured that will grab the id_token from the url so I can use it for authorizing other requests. How can I get this id_token back from the redirection?

Are you asking about how to get the fragment from the activatedRoute ? — Sadok Mtir
That could work, but my routes are missing the login route and redirecting to home. — Darthg8r
Hi Darthg8r, what is the package that you are using in angular4 to connect to AAD? I tried using ng2-adal but facing 'module not found' issues with angular 4.4.3. — Mani

Agam Agam · Accepted Answer · 2017-07-26T01:26:32

In component StarterViewComponent , implement interface OnInit and write this in method ngOnInit.

export class StarterViewComponent implements OnInit  {

    ngOnInit() {

      if (window.location.hash) {
            this.someLoginService.validateToken(window.location.hash);
        }
    }

}

Azure AD with Angular 4

1 Answers