How to pass postMessage data to my Ionic 6 app using InAppBrowser?

Question

I have an Ionic 6 application that opens a url using InAppBrowser and I need to capture a token that this website generates. Searching the internet I found the window.postMessage, I put this function on my website to send the token to my application

window.postMessage(token, 'https://my-url.net');

Now in my Ionic app, I do the following to try to receive this token

  const browser = this.iab.create(environment.checkoutUrl, '_blank')
  browser.show();

  browser.on('message').subscribe((event) => {
    console.log('test')
    console.log(event)
  })

And I never got the token in my message event. Can anyone help me to solve this problem?

score 0 · Answer 1 · answered Mar 10 '23 at 08:37

You need to save the token and send it to your application as a message.

You will have to do something like this:

browser.on('loadstop').subscribe(event => {
  browser.executeScript({
    code: "var message = YOUR_TOKEN;\
      var messageObj = {message: message};\
      var stringifiedMessageObj = JSON.stringify(messageObj);\
      webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);"
  });
});

browser.on('message').subscribe((value)=>{
  let externalData = JSON.parse(value.data.message);
  browser.close();
});

Maybe instead of using the 'loadstop' event you have to use one of the other available events:

'loadstart' | 'loadstop' | 'beforeload'

How to pass postMessage data to my Ionic 6 app using InAppBrowser?

1 Answers1