Question

在使用Angular应用程序的本地副本时，我们需要访问开发服务器上的api。但是，由于升级到使用msal-angular不再起作用，它返回401并进入重定向循环。

我不确定是否缺少我们要允许的配置。当我们使用adal时，效果很好，但现在我们需要在api上使用V2令牌。

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

...

imports: [
    MsalModule.forRoot({
      clientID: 'Azure-App-Id',
      authority: 'https://login.microsoftonline.com/Azure-Tenant-Id',
      validateAuthority: true,
      redirectUri: window.location.origin,
      navigateToLoginRequestUrl: false,
      cacheLocation: 'localStorage',
      popUp: false,
      protectedResourceMap: protectedResourceMap
    })
],
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }
],

...

上面是我在app.module.ts中的配置。

当我在http://localhost:4200上从Visual Studio运行的asp.net核心Web api运行https://localhost:5600上的角度应用程序时，此方法很好用。

在服务器上部署时，它也可以正常运行。但是，如果我在开发环境中将Angular应用程序更改为使用服务器api（http://localhost:4200-> https://www.api.azurewebsite.net），则会始终收到身份验证错误，因为Angular应用程序不会像在应用程序上那样发送承载令牌。其他两种情况。

希望这是足够的细节。

谢谢。

Answer 1

我发现了msal-angular拦截器的问题。我猜它做对了，跨域时作用域为空。

我们正在根据msal-angular代码创建自己的拦截器，以便在开发过程中注入作用域。

谢谢。

Answer 2

是的，现在我自己实现了MsalInterceptor。
投票保护ProtectedResourceMap https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1776中的通配符这是我的自定义代码块：

// #region own workaround in order not to put every api endpoint url to settings
if (!scopes && req.url.startsWith(this.settingsService.apiUrl)) {
  scopes = [this.auth.getCurrentConfiguration().auth.clientId];
}
// #endregion

// If there are no scopes set for this request, do nothing.
if (!scopes) {
  return next.handle(req);
}

访问远程API时，msal-angualr返回401

2 个答案: