ionic3 open external url without address bar and toolbar and close button

Question

My app needs a login page from external url.

The login logic that I thought is :

Steps

1. Open external url when ionic is launched
2. Once user logged in, move back to internal app using deep link (ex : myapp://main)

I tested step 2 which is deep link. Works well.

So, I have to make step 1 now.

First, I tested with iframe. And got Refused to display 'https:....' in a frame because it set 'X-Frame-Options' to 'deny'. error. Seems this needs a server-side configuration. But anyway we don't want to use this way. iframe feels like a hack.

Second, I tried location.href = this.loginUrl;. Worked well in chrome browser but when I built in iOS simulator, I see address bar, tool bar, and close button. I don't like this because I don't want user to close login page or to change url address.

Third, tried window.open(this.loginUrl, '_self', 'location=no'). Same result as second.

Fourth, tried to use ionic version of in-app-browserplugin. But the result is same as second and third. It still opens a browser with address bar, tool bar even it shows 'back to myApp'. So user would feel this is out of app. Check here, people are looking for the solution still.

After spending a day, I don't even know if there is option I can try.

Answer 1

I could resolve by doing this. But in real device. Xcode iPhone emulators don't have open in-app-browser but built-in browser.

browser:any;

this.platform.ready().then(() => {
        this.browser = this.iab.create(this.loginUrl, '_blank', 'location=no,toolbar=no'); 
    });

Answer 2

You can solve this by installing a cordova plugin called cordova-plugin-inappbrowser. Execute the following commands:

ionic plugin add cordova-plugin-inappbrowser
npm install --save @ionic-native/in-app-browser

On your app.module.ts add

import { InAppBrowser } from '@ionic-native/in-app-browser';

and also add the following to your providers in app.module.ts

    providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

Then on your home.ts add

import { InAppBrowser } from '@ionic-native/in-app-browser';

and inject it into the constructor like this

    constructor(public navCtrl: NavController, private iab: InAppBrowser) {

  }

then add the following method

 ionViewDidLoad(){
    this.iab.create('url', '_self', { location: 'no' }); }

Check the different options you have for this plugin here

For removing the address bar just use the option:

location: Set to yes or no to turn the InAppBrowser's location bar on or off.