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

Question

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

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

我很好地创建了应用程序，并通过邮递员模拟获取令牌并使用。但在我的应用程序中，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

标签： angularazure-devopsmsalazure-devops-rest-apimsal.js