[ionic-native] Subscribing to InAppBrowserEvent

Ionic Framework ionic-v3
1

I’d like to create an Promise that can subscribe to an InAppBrowserEvent. I use InAppBrowser to pass credentials from a login page to secure storage using localStorage as the surrogate, but what I would love to do is let the end user consume a Promise once the browser has ended (exit event), so the call would be something like:

this.auth.authenticate().then(() =>).catch(() =>);

I have the following, and don’t know how to wrap it correctly to return a Promise:

public authenticate() {
    let authEndpoint = [this.endpoint, '/#', this.appIdentifier].join('');
    this.browser = new InAppBrowser(authEndpoint, "_blank", Configuration.INAPPBROWSER_OPTIONS);
        
    // How can I return a Promise resolve when 'exit' is completed?
    let exit = this.browser.on("exit").subscribe(event => this.handleOnExit(event));

    let loadstart = this.browser.on("loadstart").subscribe(event => this.handleOnLoadStart(event));
    let loadstop = this.browser.on("loadstop").subscribe(event => this.handleOnLoadStop(event));
}

private handleOnExit(event: InAppBrowserEvent, callback: Function) {
	return callback();
}

/**
 *
 */
private handleOnLoadStart(event: InAppBrowserEvent) {

}

/**
 *
 */
private handleOnLoadStop(event: InAppBrowserEvent) 
        this.browser.executeScript({ code: `localStorage.removeItem("${Configuration.AUTH_KEY}");` });
	this.browser.show();

	let poll = setInterval(() => {
                this.browser.executeScript({ code: `localStorage.getItem("${Configuration.AUTH_KEY}");` })
		.then(args => {
			if (args[0]) {
				clearInterval(poll);
				this._tokens = JSON.stringify(args[0]);
				this.browser.executeScript({ code: `localStorage.removeItem("${Configuration.AUTH_KEY}");` });
				this.browser.close();
			}
		});
    }, 300);

}

Any place to start would help out and would be appreciated.

2 
public authenticate() {
    return new Promise((resolve, reject) => {
        let authEndpoint = [this.endpoint, '/#', this.appIdentifier].join('');
        this.browser = new InAppBrowser(authEndpoint, "_blank", Configuration.INAPPBROWSER_OPTIONS);
    
        // How can I return a Promise resolve when 'exit' is completed?
        let exit = this.browser.on("exit")
                           .subscribe(event =>  resolve(this.handleOnExit(event)));

        let loadstart = this.browser.on("loadstart")
                                     .subscribe(event => this.handleOnLoadStart(event));
        let loadstop = this.browser.on("loadstop")
                                    .subscribe(event => this.handleOnLoadStop(event));
    }
}
1 Like
3

Oh. My. God.

I can’t believe it was that simple! It was just one of those things I’d been thinking about for so long that I couldn’t look back and see the simplicity of what the solution was. It’s embarrassing, really!

The only portion that didn’t work was .subscribe(event => resolve(this.handleOnExit(event)));. It was tossing errors that I had to return a PromiseLike or void on resolve so I just went with .subscribe(event => resolve()); since I wasn’t doing anything in there anyway.

Thanks again, completely fixed my issue!

4

Sometimes it is just another pair of eyes taking a look

1 Like
5

Hello Aaronksaunders,

How about get the json result of the InAppBrowser, it seems I could not get using the document.body from executescript,

Thanks