oidc-client ionic 4：InAppBrowser在系统浏览器中显示应用程序，而不是在应用程序内部显示

Question

我一直在努力将一个很大的应用程序从ionic 3 + cordova迁移到ionic 4 +电容器。

我们正在使用IdentityServer4，因此我使用npm软件包oidc-client来显示登录弹出窗口。但是，登录页面现在显示在系统的浏览器中，而不是像应用程序由ionic 3供电时那样显示在应用程序内部。

阅读了完整的源代码后，我意识到默认情况下，该软件包是使用应用程序内浏览器而不是系统的浏览器。奇怪的是，我从未告诉InAppBrowser保持系统模式，也从未配置软件包的设置以使用系统的浏览器...

这里是验证码。我不是作者，但我确实在ionic 3上测试了此代码，因此效果很好。

public startAuthentication() {
if (this.app.isApp()) {
 this.manager.signinPopup().then((user) => {
   this.setUserInfo(user);
 }).catch((e) => {
   console.log(e);
 });
} else {
  return this.manager.signinRedirect();
}
}

这是我的AppModule文件

@NgModule({
  declarations: [
    AppComponent,
    VideoChatComponent,
  ],
  imports: [
    CommonModule,
    WorkOrderPageModule,
    DemoPageModule,
    BrowserModule,
    AccuvPageModule,
    AboutPageModule,
    HomePageModule,
    FormsModule,
    IonicModule.forRoot(),
    CoreModule,
    // ReceiveMaterialsPageModule,
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    // IonicAudioModule.forRoot((audioProviderFactory)),
    // PowerBIModule.forRoot(),
    // // AudioNoteModule,
    // SpeechToTextModule,
    // LazyLoadImageModule,
    // DailyFieldReportPageModule,
    // DailyVehicleInspectionPageModule,
    // WorkOrderCONModule,
    // WorkOrderOFModule,
    // DashboardPageModule,
    // PoWorkflowApprovalsPageModule,
    // VideoQaModule,
    // WarehouseCheckInPageModule,
    // ChatEnginePageModule
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    // AppComponent,
    // MainComponent,
    // HomePage,
    // AboutPage,
    // AccuvPage,
    // WorkOrderPage,
    // ReceiveMaterialsPage,
    // DemoPage
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    // IonicAudioModule,
    HttpClient,
    Diagnostic,
    LocationAccuracy,
    ScreenOrientation,
    IonicStorageModule,
    AppCenterAnalytics,
    AndroidPermissions,
    VideoCapturePlus,
    LocalNotifications,
    InAppBrowser,
    // IonicModule
  ]
})
export class AppModule { }
请注意，由于我逐渐将它们集成到新应用程序中，因此对许多模块和服务进行了注释。

我尝试将startAuthentication方法替换为具有'_blank'目标的简单InAppBrowser create（）方法，并且按预期工作。

[我想知道是否有人能理解为什么，因为该插件可以正常工作并且InAppBrowser似乎已正确注入，所以我会在系统的浏览器中看到弹出窗口。

这里是UserManagerSettings对象：

  private _getClientSettings(): UserManagerSettings {
    return {
      authority: this.app.config.identityServerURL,
      checkSessionInterval: 10000000,
      client_id: this.app.config.clientId,
      filterProtocolClaims: this.app.config.filterProtocolClaims,
      iframeNavigator: new CordovaIFrameNavigator(),
      loadUserInfo: this.app.config.loadUserInfo,
      monitorSession: false,
      popupNavigator: new CordovaPopupNavigator(),
      post_logout_redirect_uri: this.app.config.postLogoutRedirectURI,
      redirect_uri: this.app.config.redirectURI,
      response_type: this.app.config.responseType,
      scope: this.app.config.scope
    };
  }

}
我还试图将popupWindowTarget显式设置为'_blank'，但它不起作用。

感谢您阅读我的问题：）

我一直在努力将一个很大的应用程序从ionic 3 + cordova迁移到ionic 4 +电容器。我们正在使用IdentityServer4，因此我使用npm包oidc-client来显示登录弹出窗口。 ...

Answer 1

原来该插件不兼容！我现在正在使用angular-auth-oidc-client，它可以工作。但是，我遇到了重定向uri（本地主机：3000甚至是自定义URL方案）的麻烦。