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

Question

我一直在致力于将一个相当大的应用程序从ionic 3+ cordova迁移到ionic 4+ capacitor。

我们使用的是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 { }

请注意，由于我逐渐将它们集成到新应用程序中，因此对许多模块和服务进行了注释。

我尝试用'_blank‘目标将startAuthentication方法替换为一个简单的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'，但它不起作用。

感谢您阅读我的问题:)

Answer 1

原来这个插件是不兼容的！我现在使用的是angular-auth-oidc-client，它可以正常工作。但是，我遇到了重定向url (localhost:3000甚至是自定义url方案)问题。

我将为这个主题打开另一个问题，因为capacitor的服务器似乎运行在capacitor://localhost上。

更新:插件不兼容。平台插件检查(platform.is(xxx)返回false。也就是说，登录重定向被执行，而不是登录弹出窗口。

然后，我确保检查ipad上无法工作的platform.is(‘cordova’)，而不是cordova.is(‘ios’)。

抱歉，格式不正确。我在打电话。

确保已触发登录弹出功能。

伪：

if(platform.is(cordova)) oidc.signinpopup() else oidc.signinRedirect()

和平

如果使用电容器，请使用platform.is(电容器)