Keycloak на iOS -App приводит к белому экрану - PullRequest
0 голосов
/ 14 апреля 2020

У меня есть интерфейсный проект Cordova, Ioni c, Angular, который вызывает keycloak для аутентификации. Он отлично работает в сети. Однако, если я пытаюсь создать приложение для iOS, я получаю только белый экран. Это работает на iOS, если я добавлю setTimeout следующим образом:

setTimeout(() => {
  platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));
}, 1000);

Но так как я сказал, что это не очень хорошая практика кодирования, я хотел бы написать это немного более профессионально, но я не смог найти рабочее решение.

У меня есть app-init.factory.ts:

export function AppInitFactory(keycloakService: KeycloakService): () => Promise<any> {
    return (): Promise<any> => Promise.all([
        KeycloakFactory(keycloakService)
    ]);
}

keycloak.factory.ts:

export function KeycloakFactory(keycloakService: KeycloakService): Promise<any> {
  return new Promise(async (resolve, reject) => {
    try {
      await keycloakService.init({
        config: {
          url: environment.authUrl, 
          realm: environment.realm,
          clientId: environment.clientId
        },
        loadUserProfileAtStartUp: false,
        initOptions: {
          onLoad: 'login-required',
          checkLoginIframe: false
        },
        enableBearerInterceptor: true,
        bearerExcludedUrls: ['/assets']
      }).catch((error) => console.log(error));
      resolve();
    } catch (error) {
      reject(error);
    }
  })
}

main.ts:

if (environment.production) {
  enableProdMode();
}

setTimeout(() => {
  platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.log(err));
}, 1000);

app.module.ts:

@NgModule({
  declarations: [AppComponent, SharePopoverComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    HttpClientModule,
    KeycloakAngularModule,
    PipesModule,
  ],
  providers: [
    AppInitProvider,
    StatusBar,
    SplashScreen,
    AuthGuardService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    RestService,
    File,
    FileOpener,
    SocialSharing,
    Keyboard,
  ],
  exports: [BrowserAnimationsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.provider.ts:

export const AppInitProvider = {
    provide: APP_INITIALIZER,
    useFactory: AppInitFactory,
    deps: [KeycloakService],
    multi: true
  };

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private file: File
  ) {
      this.platform.ready().then(() => {
          this.initializeApp() })
  }

  initializeApp() {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      if(this.platform.is('ios')) {
          environment.fileDirectory = this.file.tempDirectory;
      } else {
          environment.fileDirectory = this.file.externalDataDirectory;
      }


  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...