如何在离子应用程序中从电容器浏览器回调时正确检索重定向网址

Question

我正在尝试使用离子电容器浏览器插件进行 oauth 流程，但浏览器返回一个空对象，而不是来自 auth 服务器的预期令牌或代码字符串。

我曾尝试使用自定义 urlscheme。预期的结果是插件应该返回一个对象 url，其中应该包含“代码”但没有返回任何内容

    async openPage(){
        App.addListener('appUrlOpen', (data) => {
        console.log('Data: '+JSON.stringify(data));
        })
        await Browser.open({url: myUrl})

        this.addRedirectListener();
     }

    private async addRedirectListener() {
       App.addListener('appUrlOpen', async (data: any) => {
       console.debug('AppComponent - constructor - appUrlOpen');
       if(data.url.indexOf('callback#')!=-1) {
       let regEx = /(callback#access_token=)(.*)/g;
       let code = regEx.exec(data.url)[2];
       console.log(code);
       }
      await Browser.close();
      });
  }

返回一个空对象，而不是应该是令牌或代码字符串的预期对象。我曾尝试使用应用程序插件在触发重定向 uri 时跟踪事件。

我希望返回一个带有令牌或代码字符串的对象，但返回一个空对象

Answer 1

使用 Cordova 插件和 Ionic Native

我在 AppBrowser 插件中使用了 cordova 和电容器。工作绝对正常。我们可以使用一些 cordova 插件和电容器

请阅读这个

https://capacitorjs.com/docs/v2/cordova/using-cordova-plugins

第 1 步：安装带有电容器的 cordova inappbrowser 插件

npm install cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser
ionic cap sync
npm install --save @ionic-native/core

第2步：在app.module.ts上导入模块文件并将其添加到providers中

第 3 步：使用此演示代码

async openBrowser() {
const options: InAppBrowserOptions = {
  location: 'no',
  clearcache: 'yes',
  zoom: 'yes',
  toolbar: 'yes',
  closebuttoncaption: 'close'
};
const browser = this.iab.create('https://google.com', '_blank', options);
console.log('opended');
console.log('browser=>');
this.util.errorToast('Opened');
browser.on('loadstop').subscribe(event => {
  console.log('event?;>11', event);
  this.util.errorToast(event.url);
  const navUrl = event.url;
  console.log(navUrl.includes('facebook'), navUrl.includes('instagram'));
  if (navUrl.includes('facebook') || navUrl.includes('instagram') || navUrl.includes('checkout')) {
    console.log('close');
    this.util.errorToast('Closed ddddd');
    browser.close();
  }
});
console.log('browser=> end');

}