angular - 如何将我的 Angular 应用程序与 Azure Active Directory 绑定(bind)？

Question

我创建了一个只有两个组件的 Angular 应用程序:登录组件和用户详细信息组件。只想显示登录用户的详细信息。每当我单击应用程序中的登录按钮时，它会将我重定向到 azure-client。在浏览器上获取以下重定向网址。请建议/推荐后续步骤？

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

单击自定义 Ui 的登录按钮时将调用的登录方法

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

要使用 MsalModule 登录 Azure，您必须调用

msalService.loginPopup();

或

 msalService.loginRedirect();

前者是建议的。

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