Вызов безопасного веб-API Azure AD из Angular

Question

Я пытаюсь создать набор приложений PoC, WebApi с Angular (другой или вариантный интерфейс), используя Azure AD для аутентификации моих пользователей федерации.

У меня работает бэкэнд нормально, спроверка подлинности / MFA работает должным образом и отображает запросы на вход.

У меня есть примеры Microsoft для приложений Angular, но я борюсь с реализацией указанного приложения. Кому я могу использовать 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 & passport-azure-ad - внутренний пакет Пакет NPM

И мы получаем токен из внешнего интерфейса и проверяем, чтона бэкэнде и получите письмо, которое прикреплено к этому пользователю, и свяжите его с пользователем в нашей БД. Но это происходит только после того, как токен был проверен на бэкэнде 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
      }
    });
  }

Это код, который я имею на фактической кнопке входа в Microsoft

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;
      });
  }