从 Angular 调用受 Azure AD 保护的 Web API

Question

我正在尝试创建一个 PoC 应用程序集，带有 Angular（其他或变体前端）的 WebApi，使用 Azure AD 对我的联合用户进行身份验证。

我的后端工作正常，身份验证/MFA 按预期工作，并显示登录提示。

我有 Angular 应用程序的 Microsoft 示例，但我正在努力实现所述应用程序，我应该使用 MSAL 在前端获取令牌，并让后端接受所述令牌并作为联合身份验证用户？

这是我在示例中的app.module.ts 代码，其中

export const protectedResourceMap:[string, string[]][]=[ ['https://localhost:5001/',['api://--------------/access_as_user']] , ['https://graph.microsoft.com/v1.0/me', ['user.read']] ];

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

@NgModule({
  declarations: [
    AppComponent, HomeComponent, ProductComponent, ErrorComponent, ProductDetailComponent, TodoListComponent, UserDataComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes,{useHash:true}) ,
    MsalModule.forRoot({
        clientID: '-----------',
        authority: "https://login.microsoftonline.com/common/",
        validateAuthority: true,
        redirectUri: "http://localhost:4200/",
        cacheLocation : "localStorage",
        storeAuthStateInCookie: isIE, // set to true for IE 11
        postLogoutRedirectUri: "http://localhost:4200/",
        navigateToLoginRequestUrl: true,
        popUp: !isIE,
        consentScopes: [ "user.read", "openid", "profile", "api://------------/access_as_user"],
        unprotectedResources: ["https://www.microsoft.com/en-us/"],
        protectedResourceMap: protectedResourceMap,
        logger: loggerCallback,
        correlationId: '1234',
        piiLoggingEnabled: true
      }
    ),
  ],
  providers: [ProductService, TodoListService, HttpServiceHelper,
     {provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true}
  ],
  bootstrap: [AppComponent]
})

Answer 1

我使用@azure/msal-angular - 前端NPM Package & passport-azure-ad - 后端NPM Package

我们从前端获取令牌并在后端验证它并获取附加到该用户的电子邮件并将其与我们数据库中的用户链接。但这只有在 Microsoft Graph 在后端验证令牌后才会发生。

所以在我们的登录页面上这是我们导入的代码import { BroadcastService, MsalService } from '@azure/msal-angular';

在NgOnInit 我们有这个

  ngOnInit() {
    this.broadcastService.subscribe('msal:loginFailure', payload => {
      this.loggedIn = false;
      this.loaded = false;
    });
    this.broadcastService.subscribe('msal:loginSuccess', payload => {
      console.log(payload);
      if (payload instanceof Object) {
        // Do something
      }
    });
  }

这是我在实际微软登录按钮上的代码

microsoftLogin() {
    this.loaded = true;
    this.msal
      .loginPopup()
      .then(token => {
        this.microsoftAPILogin(token); // A call to send the token to our API
        this.loaded = false;
        this.loggedIn = true;
      })
      .catch(err => {
        this.loggedIn = false;
        this.loaded = false;
      });
  }