文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >使用@ Azure /msal-转角将日志记录到azure B2C角应用程序中

问使用@ Azure /msal-转角将日志记录到azure B2C角应用程序中
EN

Stack Overflow用户
提问于 2022-01-27 22:48:45
回答 1查看 918关注 0票数 1

我在使用@azure/msal角库使用PKCE使用auth代码流将我的应用程序登录到B2C时出现了一个奇怪的错误。我将重定向回B2C登录，被重定向回我的应用程序，我的应用程序成功地从令牌api中获得一个令牌，但随后会记录一个JS错误，并阻止我的应用程序继续加载。以下是控制台输出：

代码语言：javascript
运行
复制
[Thu, 27 Jan 2022 22:34:53 GMT] : @azure/msal-angular@2.1.0 : Info - Interceptor - 1 scopes found for endpoint
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-angular@2.1.0 : Info - Interceptor - 1 scopes found for endpoint
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-angular@2.1.0 : Info - Interceptor - 1 scopes found for endpoint
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-angular@2.1.0 : Info - Interceptor - 1 scopes found for endpoint
core.js:40853 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:handleRedirectStart
core.js:40853 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-angular@2.1.0 : Error - Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:loginStart
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-angular@2.1.0 : Error - Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:loginStart
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-angular@2.1.0 : Error - Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:loginStart
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-angular@2.1.0 : Error - Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:loginStart
4msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:loginFailure
4core.js:6241 ERROR Error: Uncaught (in promise): BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.  For more visit: aka.ms/msaljs/browser-errors.
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.  For more visit: aka.ms/msaljs/browser-errors.
    at BrowserAuthError.AuthError [as constructor] (AuthError.js:27:1)
    at new BrowserAuthError (BrowserAuthError.js:169:1)
    at Function.push.../../node_modules/@azure/msal-browser/dist/error/BrowserAuthError.js.BrowserAuthError.createInteractionInProgressError (BrowserAuthError.js:236:1)
    at RedirectClient.<anonymous> (StandardInteractionClient.js:216:51)
    at step (_tslib.js:75:1)
    at Object.next (_tslib.js:56:45)
    at _tslib.js:49:1
    at new ZoneAwarePromise (zone-evergreen.js:960:1)
    at __awaiter (_tslib.js:45:1)
    at RedirectClient.push.../../node_modules/@azure/msal-browser/dist/interaction_client/StandardInteractionClient.js.StandardInteractionClient.preflightInteractiveRequest (StandardInteractionClient.js:207:25)
    at resolvePromise (zone-evergreen.js:798:1)
    at zone-evergreen.js:705:1
    at zone-evergreen.js:721:1
    at ZoneDelegate.invoke (zone-evergreen.js:364:1)
    at Object.onInvoke (core.js:41667:1)
    at ZoneDelegate.invoke (zone-evergreen.js:363:1)
    at Zone.run (zone-evergreen.js:123:1)
    at zone-evergreen.js:857:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Object.onInvokeTask (core.js:41645:1)
defaultErrorLogger @ core.js:6241
handleError @ core.js:6294
next @ core.js:42627
schedulerFn @ core.js:37132
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:37092
(anonymous) @ core.js:41707
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41501
onHandleError @ core.js:41704
handleError @ zone-evergreen.js:368
runGuarded @ zone-evergreen.js:136
api.microtaskDrainDone @ zone-evergreen.js:670
drainMicroTaskQueue @ zone-evergreen.js:576
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
resolvePromise @ zone-evergreen.js:785
(anonymous) @ zone-evergreen.js:705
webpackJsonpCallback @ bootstrap:25
(anonymous) @ mcl-portal-order.js:1
capture_page_info.js:954 Gather controls: 2.934814453125 ms
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : [64b25cee-dd82-4679-8a9e-b4eb65289ff3] : @azure/msal-common@6.0.0 : Info - in acquireToken call
DevTools failed to load source map: Could not load content for chrome-extension://lkoeejijapdihgbegpljiehpnlkadljb/browser-polyfill.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
client:52 [WDS] Live Reloading enabled.
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:loginSuccess
msal-config.module.ts:27 [Thu, 27 Jan 2022 22:34:54 GMT] : @azure/msal-browser@2.21.0 : Info - Emitting event: msal:handleRedirectEnd

如果在这种情况发生后刷新我的应用程序，那么应用程序将很好地加载，并使用它获得的令牌适当地调用我的所有api端点。所以这仅仅是引导我的应用程序，重定向到登录，被重定向回我的应用程序，发布令牌请求，然后在接收到令牌之间，但是在api请求发出之前，有什么事情失败了吗？

我把这个配置错了吗？

我的MsalConfigModule设置MsalModule的配置：

代码语言：javascript
运行
复制
const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1; // Remove this line to use Angular Universal

export function loggerCallback(logLevel: LogLevel, message: string) {
  console.log(message);
}

export function MSALInstanceFactory(config: ConfigService): IPublicClientApplication {

  const authConf = config.getSettings()['oauthConfig'][0] as any;

  const authConfig = new PublicClientApplication({
    auth: {
      clientId: authConf['client_id'],
      authority: authConf.authority,
      knownAuthorities: [authConf.authority],
      redirectUri: authConf['redirect_uri'],
      postLogoutRedirectUri: authConf['redirect_uri'],
      navigateToLoginRequestUrl: true
    },
    cache:{
      cacheLocation: BrowserCacheLocation.SessionStorage,
      storeAuthStateInCookie: isIE
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });

  return authConfig;
}

export function MSALInterceptorConfigFactory(config: ConfigService): MsalInterceptorConfiguration {
  const resourceMap = new Map<string, Array<string>>();
  // iterate over the urlMappings config and create a protectedresourcemap
  const configUrls = config.getSettings()['urlMappings'] as Array<any>;
  const scope = config.getSettings()['oauthConfig'][0].scope as string;
  configUrls.map(urlMap => resourceMap.set(`${urlMap.url}/*`, [scope]));

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

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect
  };
}

@NgModule({
  providers: [],
  imports: [MsalModule]
})
export class MsalConfigModule {

  static forRoot() {
    return {
      ngModule: MsalConfigModule,
      providers: [
        {
          provide: MSAL_INSTANCE,
          useFactory: MSALInstanceFactory,
          deps: [ConfigService]
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useFactory: MSALGuardConfigFactory,
          deps: [ConfigService]
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useFactory: MSALInterceptorConfigFactory,
          deps: [ConfigService]
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true
        }
      ]
    };
  }
}

我的主要应用程序模块的一部分：

代码语言：javascript
运行
复制
@NgModule({
  declarations: [AppComponent],
    imports: [
      ...
      MsalConfigModule.forRoot()
    ],
    providers: [
      DatePipe,
      SlicePipe
    ],
    bootstrap: [AppComponent, MsalRedirectComponent],
})
export class AppModule {}
msal
msal-angular
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-01 19:34:14

解决这一问题的方法是让我添加

代码语言：javascript
运行
复制
 canActivate:[MsalGuard]

守卫我所有的路线。我认为根本的问题是，在我们需要发送令牌之前，拦截器正在寻找一个令牌来发送api请求。添加保护阻止了路由的激活，直到我们通过身份验证，然后一旦激活了该路由，我的api请求就会触发，拦截器就会发送它们的令牌，并且一切都正常。

我想现在的方法是您确实需要添加MsalGuard，仅仅提供拦截器和配置受保护的资源映射是不够的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70886787

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档