Third Party URL not logging in to account in Ionic iOS

Question

I am using Cordova Plugin Advance HTTP to fetch the user token from my server and then create a url from that token to let my current user sign in to his account profile. My code is as below:

teetime.page.ts

ionViewWillEnter(){
    this.callCloudFunction().then( data => {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
    this.canRender = true;
    });
}

async callCloudFunction() {
    var memberTokenUrl = 'https://www.example.com/WebResAPI/Api/User/GetNewUserTokenByMemberNumber?authToken=&userToken=' + token + '&clubFriendlyName=MyClub&memberNumber='

    var memberToken = await this.getMemberToken(memberTokenUrl);
    console.log("Member Token: " + memberToken);

    //Create Login URL
    this.url = 'https://www.example.com/WebRes/Club/MyClub/LoginWithToken/' + memberToken;
    console.log("Login URL: " + this.url);

    //Hide Loading Container
    await this.loading.dismiss();

    return this.url;
}

//Get Member Token
getMemberToken(memberTokenUrl){
    return new Promise((resolve, reject) => {
    this.http.get(memberTokenUrl, {}, {})
    .then(data => {
        var memberTok = JSON.parse(data.data).Value ;
        resolve(memberTok);
    })
    .catch(error => {
        console.log(error.error);
    });
    });
}

teetimes.page.html

<ion-content>
  <div style="overflow:auto;-webkit-overflow-scrolling:touch" *ngIf="canRender">
      <iframe [src]="urlSafe" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
    </div>
</ion-content>

ios console log

[Log] Member Token: 4PHZjQUkGETmF4M9lm7TppjoMhwqHudyhjRGZmyBxY7gCTEgazGIKWekRRLo (cordova.98fc7fcb7c020c1504f6.js, line 1) [Log] Login URL: https://www.example.com/WebRes/Club/MyClub/LoginWithToken/4PHZjQUkGETmF4M9lm7TppjoMhwqHudyhjRGZmyBxY7gCTEgazGIKWekRRLo (cordova.98fc7fcb7c020c1504f6.js, line 1)

I am able to successfully get the token from my server and am able to form the URL as well successfully but the problem here is this formed URL with user token logs me in perfectly in my android device but it is not opening my user account in iOS. I am able to see all logs perfectly in iOS and I am able to get the token and form the url but what it does is, it takes me to the logged out home page instead of showing me my logged in account.

However, if I click on the login URL from my console log, it does takes me to my logged in user account in Safari.

Any idea what am I doing wrong here? It does works perfectly in Android though and it does log me in automatically to my user account but this is not working in iOS and it takes me to homepage of my website instead.

Answer 1

Why don't you use instead of iframe, InAppBrowser native plugin to open websites without leaving the app?

In App Browser - Tutorial

Commands installation:

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

Screenshot:

Why InAppBrowser instead of iFrames?

From Cordova docs: The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content , instead of loading that into the main Cordova webview. The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.

NOTE: Plugin is implemented via iframe.