使用 MSAL-Angular 对 Azure DevOps 服务进行身份验证

Question

我尝试将我的应用程序配置为通过 oauth 连接到 Azure DevOps 服务。我的应用程序是 Angular，我想我可以使用 MSAL-Angular 。

但是示例配置设置protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);我喜欢配置范围为 vso.project vso.work_full

的 Azure DevOps 服务

我很好地创建了应用程序，并通过 Postman 模拟获取令牌并使用。但是在我的应用程序中，MSAL 不起作用。

我试过了：

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read', 'vso.project', 'vso.work_full']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: ['user.read', 'vso.project', 'vso.work_full']
    },
    loginFailedRoute: '/login-failed'
  };
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent,
    DetailComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    HttpClientModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

但 MSAL 未在应用程序中连接。

我喜欢用 https://app.vsaex.visualstudio.com/me 代替 https://graph.microsoft.com/v1.0/me