I am trying to use OAuth simple login from Firebase on mobile devices using Intel appMobi.
<button onclick="authClient.login('twitter');">
<button onclick="authClient.login('facebook');">
<button onclick="authClient.login('github');">
<button onclick="authClient.login('persona');">
When working on a web site the Firebase simple login works fine for Facebook, Twitter and etc. The user gets a pop-up window to allow login.
When using the appMobi emulator the pop-up window will show up outside the device being emulated and nothing shows up when when the software is loaded onto a mobile device.
Is there a way to get this to work on mobile devices using Javascript?
Firebase Simple Login currently requires fully-fledged pop-ups to be enabled in the browser environment, which is why you're not able to use it in appMobi. While I'm not fully familiar with appMobi, I suspect that it does not allow opening arbitrary windows via window.open and then permitting cross-frame communication via postmessage to the opener.
Redirect-based flows are on the roadmap for Firebase Simple Login which would be a suitable workaround provided there were a way to redirect the user from a foreign page back to your application, but I don't have a timeline on that feature. As an alternative, check out the third-party service Singly, which offers a native integration with Firebase.
Related
I'm succesfully using Facebook share method on my webapp like so using the FB JS SDK.
FB.ui({
method: 'share',
href: 'https://myapp.com',
})
However if a user access my webapp using mobile device it requires them to login to facebook through browser even if they have the main facebook app installed on the device. Is it possible to launch share dialog using native facebook app with intent if available and if not fallback to facebook in browser to share.
Facebook has url schemes which have worked in the past on iOS; I don't have a device to test on, but I suspect some of them likely still work.
Similar schemes exist for Android, and just like on iOS, they seem to become disabled and replaced with other tricks / techniques on occasion.
In Javascript, you can check the OS name. I would check for Android or iOS, and then attempt to trigger a url scheme for whichever you find, if either.
in addition to above answer,
chrome 61 onwards you can use share api. This will work same as android intents, with all possible user-installed-native-apps showing in tray, including facebook.
navigator.share({
title,
url,
})
We have several problems with using the FB JS SDK, and popup blockers or Native App Web Views.
FB App has a setting to open websites inside of Facebook app as a webview. - this seems to have a blanket popup ban... so FB.Login() just does nothing.
iOS has a default setting blocking all POPUPs - Chrome/Android also has this but its not default.
I find it hard to believe that Facebook is not aware and has a solution to this, as it seems the most-case these days.
Journeys affected.
FB Native app user clicks link to our site. Opens in FB WebView - Can't login with Facebook.
Safari user has iOS popup blocker turned on - FB JS SDK just doesn't work.
PC/Laptop Chrome, as popup blocker turned on - FB Login won't work.
The only way we can see to make this work in a modern mobile landscape is to implement the full Oauth redirect flow.
Surely this is now true FOR ALL Mobile or responsive websites - any of your users could be viewing your site through a Native App Facebook, Twitter, Gmail, Slack, LinkedIn, or any other.
Use the redirect flows as specified in the FB Advanced section.
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow
Its the only way to reliably login or set permissions with FB and Twitter on todays mobile landscape with a myriad of in native-app 'webviews' to display webpages and sites.
I'd like to have a single 'Get App' link that auto-detects the user's device type and browser and directs to the appropriate location (iTunes, Google Play, or website sign-up). I am currently using Onelink.to, but it has the following limitations:
if you're on iOS using a non-Safari browser (like Chrome) you end up looking at a bunch of raw JSON because it doesn't know to launch the App Store app. In this case, I'd prefer to direct to the iTunes website or better yet, deep link into the App Store app.
if using the link on your own site and a user is on a device that redirects to a different page of your own website, it complicates setting up event-based goals in Google Analytics
Are there any good JavaScript solutions that handle the App Store redirect while excluding this action on browsers that don't support the iTunes headers?
Thanks!
You can use javascript navigator.userAgent and parse it to detect the device. Then just generate the link according to it.
Here is an example for ios detection:
Detect if device is iOS
I'm trying to develop a web site (outside of Facebook) that all users will reach from within Facebook native apps.
currently when I publish a URL: http://mysite.com and a user clicks on it from within Facebook native app (galaxy 3+ and iphone 4+), the site is opened in the uiwebview of the application. I want it to be opened always in the default browser of the device.
is this possible? Thanks
I have been implementing PayPal Digital Goods Express Checkout in my (HTML5) web app to enable the 'in-app' purchase of extra app content. In my desktop browsers (Chrome, Safari, Firefox) the digital goods flow works without problems. In that flow popup windows are opened at some points, for instance when the user clicks the login button or the button to pay with his creditcard (i.e. without having a paypal account). The popups are no problem for the desktop browsers. However, in Mobile Safari on my iPad 2 popup windows are always opened as (new) tabs, even if a property string containing width, height, etc. is passed to a JavaScript window.open() command. This makes it impossible to implement PayPal Digital Goods Express Checkout and have a good user experience in both desktop browsers and Mobile Safari. When the web app is run full-screen on the iPad (using an icon on the home screen) opening the popups becomes even more problematic (or impossible).
In trying to solve my problem I came up with the following options, none of which has yet led to satisfying results:
Customize the payment flow. Of course this is possible to some point, but after having redirected the user to the 'incontext' Express Checkout page that forces the user to login to PayPal, customization is out of my hands (as far as I know). For instance, I cannot customize the login process itself and make it work in an iframe (instead of a popup window) instead. It would be cool if there were some advanced API commands that I could use server-side to make the user login to PayPal myself, using my own (iframed) login form, but this seems too far-fetched.
Make popup windows work like expected in Mobile Safari, preferably also when a web app is run full-screen. I don't think it strange that Mobile Safari opens new windows as tabs (there are other browsers that do this). I do think it is strange that popup windows that are opened from JavaScript, using window.open and a property string that defines the window's position and dimensions, are opened as tabs. Does anyone know how to make Mobile Safari open such popup windows normally without requiring the users to change some browser setting?
To demonstrate my problem (and show that I am not the only one facing it, though this site's owner probably doesn't know it ;-), go to digitalmagazine.autosport.com with your iPad and click the 'Pay with PayPal' button at the top-left of the page. Click the login button in the PayPal iframe. The site disappears and the login page (that is supposed to be opened in a popup window for an 'in-app' experience) opens full page.
I have also looked at the client side (JavaScript) techniques that are used by similar in-app payment systems, but those (understandably) also use popup windows. Therefore I would prefer the second solution that I have described above. That one will also involve much less work.
While PayPal supports the mobile platform, you will need to make some changes to fully implement it for iOS and other mobile operating systems. You will find the PayPal Mobile overview here: https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_api_ECOnMobileDevices
The process starts with changing the redirect command in Express Checkout flow to _expresscheckout-mobile, and then steps through a list of additional requirements for full implementation. Read the documentation carefully, as it can be a bit picky when it comes to supported NVP fields.