Как связать свое приложение Angular с Azure Active Directory?

Question

Я создал приложение Angular всего с двумя компонентами, компонентом «Логин» и «Сведения о пользователе». Хотел показать только данные авторизованного пользователя. Всякий раз, когда я нажимаю кнопку входа в систему из приложения, он перенаправляет меня на azure -клиент. Получение ниже URL-адреса перенаправления в браузере. Пожалуйста, предложите / порекомендуйте следующие шаги?

введите описание изображения здесь

app.module.ts

@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 { }

app.routing.module.ts

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 { }

Метод входа, который будет вызываться при нажатии кнопки входа пользовательского интерфейса

login(username, password) : Observable<any> {

    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<any>('http://localhost:8082/check', { username, password }, {headers})
        .pipe(map(user => {
               return user;
        }));
    }

Answer 1

Чтобы войти в систему Azure с помощью MsalModule, вы должны позвонить

msalService.loginPopup();

или

 msalService.loginRedirect();

, первый из которых предлагается.

См. https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-angular/blob/master/src/app/app.component.ts