I have an Ionic/Capacitor project which requires SSO login from an external Federation web page.
I am able to display the login page successfully using the InAppBrowser plugin (I have experimented with the capacitor plugin as well as the "awesome" cordova plugin).
My problem is that when I press the login button on our test ADFS server, the page just refreshes. I don't believe the login call is ever executed.
Note that if I try this with an external browser on the phone it works fine. Also if I try other API links on the in-app browser, that works fine too.
Is there any reason why SSO would not work within an InAppBrowser?
Should I try the Cordova plugin (rather than "awesome" plugin?). I could try the capacitor plugin again, but it does not seem to be as feature-rich on callbacks.
Related
I have created a new Ionic (Capacitor) app and I want to use the native facebook plugin, The plugin documentation says that is supported in the Android, iOS and Browser platforms, but when I run the app in the browser I get a Native: tried calling Facebook.login, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator error.
How can I run the facebook plugin from the browser?
I am building a Progressive web application with IONIC 3. I am following -
https://medium.com/#fraxool/add-facebook-login-to-your-ionic-3-app-the-step-by-step-guide-88879e391a3b
Now the problem is when I am using ionic serve then in the browser when I am clicking on Login with Facebook button,
then it is showing me an error on the console as
Native: tried calling Facebook.login, but Cordova is
not available. Make sure to include cordova.js or run in a
device/simulator cordovaWarn # vendor.js:60197 main.js:1058 Error
logging into Facebook cordova_not_available
I can understand that as I am using the browser, and Ionic serve will never generate Cordova files, so what is the right way to implement the Facebook login in an Ionic progressive web application.
I developed an app in ionic 3. It's working fine for android & iOS. Then I added browser platform but fb & google login not working for it.
Ionic documentation http://ionicframework.com/docs/native/facebook/ says facebook plugin is supported in browser. But it's not working.
Google plus plugin only supports android & iOS.
So how to integrate fb & google login in PWA developed in ionic 3?
I have tried using angular4-social-login module but no luck. Also I tried using javascript sdk but no success.
Facebook with Browser:
After you add the browser platform:
ionic cordova platform add browser
ionic cordova build browser --prod
After that in your facebook develop website settings page, add your server's domain to app domain (or localhost for testing).
You can read more about it here: browser
I'm trying to authorize app-users via google in an ionic app based on angularfire. The complete flow is working fine on my workstation's chrome browser (using ionic serve) but fails when deploying on my android device:
$authWithOAuthPopup, when used on Android (via 'ionic run', i.e. installed as apk) results in browser getting stuck in auth.firebase.com/blank/page.html.
All is working fine in html (via 'ionic serve') so I assume, that firebase and google configuration are fine. cordova.js is included properly.
The cordova inapp browser is installed and can open other urls. I have whitelisted firebase(io) and google domains and also allowed everything else. I am using cordova-plugin-inappbrowser 1.0.2-dev "InAppBrowser" and
cordova-plugin-whitelist 1.0.0 "Whitelist". I have tried older versions of the inappbrowser as well.
I am not using ionic livereload to avoid any potential cross-domain/proxy issues
When remote debugging, no errors are being reported: after $authWithOAuthPopup control gets lost somewhere deep in the minified firebase.js code and never returns to angularfire level
The following traffic is generated (detailed urls below):
1) firebase code calls auth.firebase.com/v2//auth/google, 2) accounts.google.com returns to 3)auth.firebase.com/v2.... which transfers to 4) auth.firebase.com/blank/page.html.
On the blank page I can see cookies.
Thanks for any advice in advance...
Detailed URLs from the webflow:
Initiator: firebase.js:147:
https: //auth.firebase.com/v2/gastrohub/auth/google?&v=js-2.2.6&transport=redirect&suppress_status_codes=true&requestId=p2k757pm4hsjv5531z7045voxcyuelsi0wt3&redirectTo=https%3A%2F%2Fauth.firebase.com%2Fblank%2Fpage.html
https: //accounts.google.com/o/oauth2/auth?response_type=code&redirect_uri=https%3A%2F%2Fauth.firebase.com%2Fv2%2Fgastrohub%2Fauth%2Fgoogle%2Fcallback&scope=%20profile&state=%7B%22firebase%22%3A%22gastrohub%22%2C%22requestId%22%3A%22p2k757pm4hsjv5531z7045voxcyuelsi0wt3%22%2C%22redirectTo%22%3A%22https%3A%2F%2Fauth.firebase.com%2Fblank%2Fpage.html%22%2C%22transport%22%3A%22redirect%22%2C%22v%22%3A%22js-2.2.6%22%7D&client_id=434498505800-p5rjvl6basvlsf4fh3t1ta9ej4pt2i28.apps.googleusercontent.com
https: //auth.firebase.com/v2/gastrohub/auth/google/callback?state=%7B%22firebase%22:%22gastrohub%22,%22requestId%22:%22p2k757pm4hsjv5531z7045voxcyuelsi0wt3%22,%22redirectTo%22:%22https://auth.firebase.com/blank/page.html%22,%22transport%22:%22redirect%22,%22v%22:%22js-2.2.6%22%7D&code=4/vgz4uJ8SgIswewKQHcMiXZbwddU_F9llfWKaRfEhOMI
https: //auth.firebase.com/blank/page.html
I'm trying to implement mobile application using Ionic. I'm following this, but unfortunately logging in doesn't work on real device. It works fine in the browser and the emulator. I did every step from the tutorial, I did the tutorial 2-3 times and still get the same error.
I am logged in successfully on my device but then I see the following screen:
I already have both urls as redirect urls in my application settings in FB.
http://localhost:5000/oauthcallback.html
https://www.facebook.com/connect/login_success.html
I tried to debug OpenFB with alerts. I can see "cordova events" alert but then I have alerts on the first lines of loginWindow_loadStartHandler and loginWindow_exitHandler but they are not executed. I guess that the problem is there but I have no idea how to fix it.
if (runningInCordova) {
alert("cordova events");
loginWindow.addEventListener('loadstart', loginWindow_loadStartHandler);
loginWindow.addEventListener('exit', loginWindow_exitHandler);
}
Also I have some questions about Ionic and Phonegap.
I use Ubuntu and I am trying to build iOS and Android applications.
My application's structure is:
app/
hooks/
platforms/
plugins/
scss/
www/
Also I have InAppBrowser plugin:
cordova plugin add org.apache.cordova.inappbrowser
but this plugin is not part of app/www folder.
I am trying to build a phonegap application in their site. I made a .rar file of the app/www folder content and upload it. Everything seems to be fine. But in Phonegap site when I click PLUGINS, I see This application has no plugins. How should I add inappbrowser to the application, maybe that is the reason why my FB authentication doesn't work. If I build the whole app folder, again I see the same message - This application has no plugins.
So when create an archive file of the content for Phonegap, which folder I should archive - the whole app folder with all subfolders or only app/www? What is the correct flow? Also how crossplatform app should now about added plugins?
I ran into this issue today, if someone is still looking for the solution for this:
loginWindow.addEventListener('loadstart',
loginWindow_loadStartHandler);
is implemented in the js file, but the loadstart event never fires on my Android (but works on WindowsPhone cordova javascript app), instead i added:
loginWindow.addEventListener('loadstop',
loginWindow_loadStartHandler);
,which works on both Android and WP (with InAppBrowser 1.2.0), IOS test is still ahead.