使用 MSAL 和 OAuth2.0 通过独立 Angular 应用程序进行 AAD 身份验证 .NET Web API

Question

我正在努力使用我的 Web 应用程序对我的 API 进行身份验证，我已设法添加登录身份验证来访问我的 Web 应用程序，但我无法获取身份验证凭据/令牌来对 API 调用进行身份验证。我已在调用 API 的 Web 应用程序方法中临时在 API 调用的标头中添加了令牌，但这并不安全。

我见过的每个教程都使用 Angular 中的模块，但我使用的是 独立组件，这意味着 app.modules.ts 不存在。这是我验证 Web 应用程序的解决方法，但我需要帮助验证我的 Web api。

Main.ts（处理引导而不是app.modules）

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    provideRouter(routes),
    MsalService,
    MsalGuard,
    MsalBroadcastService,
    MsalRedirectComponent,
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
  ],
}).catch((err) => console.error(err));

msal-config.ts（创建配置是为了为我的 main.ts 提供工厂）

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

export function MSALInstanceFactory(): IPublicClientApplication {
    return new PublicClientApplication({
        auth: {
            clientId: environment.uiClientId,
            redirectUri: environment.redirectUrl,
            authority: `https://login.microsoftonline.com/${environment.uitenantId}`,
            postLogoutRedirectUri: '/'
        },
        cache: {
            cacheLocation: 'localStorage',
            storeAuthStateInCookie: isIE,
        },
            system: {
            allowNativeBroker: false, 
        }
    });
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
    return {
        interactionType: InteractionType.Redirect,
        authRequest: {
            scopes: environment.scope,
        },
    };
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
    const protectedResourceMap = new Map<string, string[]>([
        ['https://graph.microsoft.com/v1.0/me', ['user.read']],
        ['localhost', ["environment.scope"]],
    ]);

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

这是我调用 API 的服务，理想情况下我不需要添加任何标头来提供令牌，因为我对 Web 应用程序的身份验证应该处理此问题。

API调用（原创）

  // getObject(): Observable<Object[]> {
  //   return this.http.get<Object[]>(this.apiUrl).pipe(
  //     catchError(this.handleHttpError)
  //   );
  // }

API 调用（标头中带有我不想使用的令牌）

  getObject(): Observable<Object[]> {
    return this.msalService.acquireTokenSilent({ scopes: environment.scopeUri }).pipe(
      switchMap(tokenResponse => {
        const headers = new HttpHeaders({
          'Authorization': `Bearer ${tokenResponse.accessToken}`
        });
        return this.http.get<Object[]>(this.apiUrl, { headers }).pipe(
          catchError(this.handleHttpError) // Handle HTTP errors
        );
      }),
      catchError(this.handleTokenError) // Handle token acquisition errors
    );
  }

如何使用 MSAL 通过 Web 应用程序对独立应用程序验证我的 Web API？

Answer 1

尝试使用 DI 实现拦截器时，必须使用

withInterceptorsFromDi

。

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withInterceptorsFromDi()
    ),
    provideRouter(routes),
    MsalService,
    MsalGuard,
    MsalBroadcastService,
    MsalRedirectComponent,
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
  ],
}).catch((err) => console.error(err));