Azure msal-angular 无法从 LocalStorage 读取身份验证属性？

Question

我有一个通过 Azure AD 使用身份验证的应用程序，只要它具有“硬编码”clientId、Authority、redirectUri 的属性，它就可以正常工作。我正在尝试将它们存储在数据库中，return 通过调用 webservice 将这些数据保存在 localStorage 中。问题是，当我这样做时，MSAL 无法完成流程，因为所有这些属性都显示为未定义，如下所示

Sorry, but we’re having trouble signing you in.

AADSTS90102: 'redirect_uri' value must be a valid absolute URI.

我是这样调用模块中的属性的：



const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1; const activeDirectory: ActiveDirectory = JSON.parse(localStorage.getItem(Constants.ADKeys.ActiveDirectory))

@NgModule({   declarations: [LoginComponent],   imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    PagesRoutingModule,
    NgbModule,
    MsalModule.forRoot({
      auth: {
        clientId: activeDirectory.clientId,
        authority: activeDirectory.authority,
        redirectUri: activeDirectory.redirectUri,
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // set to true for IE 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        [ activeDirectory.graphUri, ['user.read']]
      ],
      extraQueryParameters: {}
    }),   ],   providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    SecurityService, AuthGuardService] }) export class PagesModule {}```






Angular version is 7 
and msal is @azure/msal-angular": "^1.1.2"

Thanks in advanced

Answer 1

尝试使用APP_INITIALIZER进行配置。

Note config.service.ts, constructor, in this we are not injecting HttpClient, because if you inject HttpClient then angular first resolve all the HTTP_INTERCEPTORS, and when you use MsalInterceptor in app module, this makes angular to load MsalService and other component used by Msalinterceptor load before APP_INITIALIZER. To resolve this issue we need to by pass HTTP_INTERCEPTORS, so for this we can use HttpBackend handler, and then create local instance of HttpClient in config service constructor. This will bypass the HTTP_INTERCEPTORS, while getting config file.

您可以参考here描述中的代码。

Azure msal-angular 无法从 LocalStorage 读取身份验证属性？

Azure msal-angular cannot read auth attributes from LocalStorage?

azure-active-directory

angular7