Ionic-native InAppBrowser, pass url parameters to app

Ionic Native
1

Hello,

The particular authentification method that I’m using in my app requires the inAppBrowser to open an external URL which will contain URL parameters that need to be passed into the app.

Does anybody know how to go about this in v2?

Thanks

Claudio

2

So you want to get back URL params from the InAppBrowser back into your app?

3

Precisely :slight_smile:

4

ionViewWillEnter() {

const browser = this.iab.create('google.com', '_blank', {
  location: 'no',
  zoom: 'no',
});

browser.on('loadstop').subscribe(
  data => {
      let url = data.url;
     (here you do whatever you want with the url) alert(url);

)}
}

Dunno if this helps, for me i used it to grab URL and use a condition when the user visited a specific URL to trigger a function. Maybe also you can manipulate the URL and grab the params you need.

1 Like
5

Thank you! I’m going to try it out and see if it works for me.

6

of course you need to declare in your constructor “private iab: InAppBrowser”, and import in your declarations import {InAppBrowser} from “@ionic-native/in-app-browser”

1 Like
7

I have a similar issue, I fetching the url data on loadstop event, and on exit event I am calling a local service where I have to pass that fetched data. But in the exit event I am not able to access the url data. I have no idea why this is happening. Below is my code

public office365Login(){ 
  debugger;

 let browser = new InAppBrowser("https://login.microsoftonline.com/" +SvcConstsService.TENANT_ID+ 
            "/oauth2/authorize?response_type=code&client_id=" + SvcConstsService.CLIENT_ID +
            "&resource=" + SvcConstsService.GRAPH_RESOURCE +
            "&redirect_uri=" + SvcConstsService.REDIRECT_URL,'_blank','location=no');

            browser.on("loadstop").subscribe(function(event){``
        
                 this.code_token=event.url.split('?')[1].split('&')[0].replace('code=','');
                 this.session_state=event.url.split('&')[1].replace('session_state=','');
                 console.log("code_token ",this.code_token);
                 console.log("session state ",this.session_state);
                 browser.close();
          // code_token and session_state is the data I am getting from url
            },err=>console.log(err)
            );
            browser.on("exit").subscribe(()=>{
           // the fetched data is passed to the below method, but not able to access it.
               this.getUserDetails(); 
            });
}
1 Like
8

Hi, do you have found a solution?

9

looks like his loadstop and exit handlers had different ‘this’ references:

.subscribe(()=>{}) vs. .subscribe(function(event){})

1 Like
10

On loadstop() event if you are getting data from the url, then store that in local storage, and on exit event fetch that data from the local storage, and make a service call to the backend. This works for me.

browser.on("loadstop").subscribe(function (event) { localstorage.setItem('foo','foo'); localstorage.setItem('bar','bar'); }

 browser.on("exit").subscribe(() => {

      this.foo = localStorage.getItem('foo');
      this.bar = localStorage.getItem('bar');
     // service call method()

    });

Hope this helps .

1 Like
11

You coul also change the loadstop handler to be an arrow function as on exit (and acually give a variable for the on at exit to make this more consistent):

            browser.on("loadstop").subscribe(event=>{
                 console.log(event);
                 browser.close();
            });
            browser.on("exit").subscribe(event=>{
                 console.log(event);
            });

Then it should be more consistent, as @Justin_H already said.

12

You saved my life, thank you!