title: How can i bind my Angular App with Azure Active Directory?
body: <p>I have created an Angular App with just two components, Login and User Details component. Wanted to show the logged in user details only. Whenever I click on login button from application it redirects me to azure-client. Getting below redirection url on browser.  Please suggest/recommend next steps?</p>
  <p><a href="https://i.stack.imgur.com/icPsA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/icPsA.png" alt="enter image description here" /></a></p>
  <p>app.module.ts</p>
  <pre><code>@NgModule({
    declarations: [
      LoginComponent,
      UserDetailComponent,
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      RouterModule,
      HttpClientModule,
      ReactiveFormsModule,
      AppRoutingModule,
      MsalModule.forRoot({
        auth: {
            clientId: '************************************', // This is your client ID
            authority: '********************************************', // This is your tenant info
            redirectUri: 'http://localhost:4200/' // This is your redirect URI
        },
        cache: {
            cacheLocation: 'localStorage'
        },
     }),
    ],
    providers: [UserService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
    }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>app.routing.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { LoginComponent } from './login/login.component';
  import { UserDetailComponent } from './user-detail/user-detail.component';
  
  const routes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'login', component: LoginComponent },
    { path: 'userDetail', component: UserDetailComponent },
    { path: '**', redirectTo: '' }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>Login method that will be called on click of login button of custom Ui</p>
  <pre><code>login(username, password) : Observable&lt;any&gt; {
  
      let headers: HttpHeaders = new HttpHeaders();
     
      headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
      headers = headers.append('Content-type', 'application/json');
      headers = headers.append('Content-type', 'text/html');
      headers = headers.append('Access-Control-Allow-Origin', '*');
      headers = headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
      headers = headers.append('Access-Control-Allow-Headers', '*');
      headers = headers.append('Access-Control-Allow-Credentials', 'true');
      
       return this.http.post&lt;any&gt;('http://localhost:8082/check', { username, password }, {headers})
          .pipe(map(user =&gt; {
                 return user;
          }));
      }
  
  </code></pre>