Question

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

我尝试使用自定义urlscheme。预期的结果是，该插件应返回一个对象网址，该网址应包含“代码”，但不会返回任何内容

    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

我使用了带有电容器的cordova inAppBrowser插件。工作得很好。我们可以使用一些cordova插件和电容

请阅读本文

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

第一步：在appbrowser插件中安装cordova与电容

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 上导入 Modules 文件并将其添加到 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');

}

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

1 个答案: