I'm building a full-screen iPhone optimized web app. It gets launched from the homepage like a native app and behaves like a standalone app via the following directive, but it's just plain HTML/CSS/JavaScript, no PhoneGap involved.
<meta name="apple-mobile web-app-capable" content="yes" />
When trying to authenticate over OAuth, the redirect to Twitter (or any other OAuth provider) takes me out of my full-screen web app and into Mobile Safari. Once the Twitter auth completes, the redirect back to my app does not launch my homepage app, instead just redirects within Mobile Safari. Is it possible to do OAuth inside an iPhone homepage web app? Short of that, can I get the OAuth callback to re-launch my homepage web app?
I've had a similar problem recently, and found that if you set the URL in Javascript with a window.location.href="http://example.com/whatever" then iOS doesn't switch to Safari. I've managed to get PayPal checkout and Facebook login working in standalone web apps without switching to safari using this method! If you're submitting a form, do that via JS too and get the redirect URL from the response then set the location. As for handing back to your app afterwards, it depends on how the external service works.
If that's no good, you could do a pop-up alert('You will be passed to Safari for authentication. Reload this app afterwards.') before they get switched to Safari. Not great, but better than surprising them with automatically switching apps!
I´m assuming that you have a "manifest" meta tag to reference manifest.json file.
I suggest you to do the following workaround. It works perfect on ios safari web app:
https://stackoverflow.com/a/52286655/8390589
Related
so i have a meteor app, and i'm using facebook login (and google etc) for user authentication.
and i'm using MeteorRider which is basically "hijacking" the DOM from my meteor app, this way i get also a phonegap app.
So when using web and clicking on the facebook login, its working great.
but when using the phonegap app, its not working. its making an ouath call (opening a browser and do all the process but does not automatically close the browser and bring up my app) but then redirect to my app in the browser.
i'm still trying to figure how the two works with each other.
do i need to do this authentication using phonegap api or should i handle it using meteor api?
I use this for any oauth requirements in phonegap. https://github.com/oauth-io/oauth-phonegap
It handles closing of the browser etc.
I just released a package to fix this. It uses the InAppBrowser plugin to load the popup, listens for the auth token, closes the popup and logs in/creates account.
https://atmosphere.meteor.com/package/phonegap-oauth
We have a post on a FB wall. It points to http://tinyurl.com/{something}.
When the link is clicked in a non-mobile web browser, it works fine: TinyURL redirects the user to our web site using the appropriate URI including a special querystring.
When the link is clicked in a mobile web browser on my Android, it fails with the error in the title of this question.
When the link is clicked in the FB native app for iPad and in Safari on the iPad, it works fine.
I have tried adding our URL to the Mobile Web setting in the Basic Settings tab of the FB App configuration. That results in all links pointing directly to the root of our web site with a funky set of parameters in a querystring -- in other words, it doesn't follow the TinyURL in that particular case. The funky parameters include "refid", "ref", and "ft".
So primarily my question is: Why, when I specify the URL in the Mobile Web setting as described in the previous paragraph, does it redirect to our main URL instead of the TinyURL link originally called for?
I think this is something Facebook broke very recently (perhaps even today?). When a user clicks on any links to our app from inside the Facebook native iOS app, they get this error "Either this application has not configured its Mobile Web URL or the URL could not be verified as owned by the application. Unable to redirect." We had never set a Mobile Web URL previously, and everything had been fine since we launched the app over a year ago. We sent all mobile clicks to the same URL's as desktop browsers and handled the mobile rendering server-side. We have not changed our application domain inside the App Settings or anything like that.
In the App Settings, can set a Mobile Web URL to our homepage and the link works (and the error message goes away) but that's not the desired behavior at all - it would mean that all links end up at the same Mobile Web URL regardless of what the link was!
Was this change made on purpose by Facebook and if so why? There's been no mention of this whatsoever on the Developer Blog.
Update 3/21 8:10am PST:
I've since found this to be a widespread problem, not just for a few apps. Just by clicking around I've seen this error on posts to weather.com, youtube, msn.com and a dozen others. It happens on both clicks from the Timeline as well as the News Feed (although strangely sometimes the same post works on one, but not the other!), and from the m.facebook.com mobile web app as well as the native iOS app.
I commented on http://developers.facebook.com/bugs/302635863137683 but no word from Facebook yet. I can't believe more people aren't talking about this right now, this is a major bug.
In your app, go to Settings -> Add platform -> Website
Add both, Website URL and Moblie Website (Yes, you need these both), then your app will be able to be opened from facebook native app.
You will also need the FB Canvas.
Same here, I recently noted that all links of items shared with our Adroid or iPhone app are broken. This only happens with the mobile version of Facebook the Desktop web version is still working. What is actually wrong on the mobile version is that the original shared url is replaced with a m.facebook url that ends with "?ref=unknown&refid=0&ft=fbid.332036910178718%3Ainterface.m_touch%3Ac.m" When user click on it Facebook is redirecting the user to the App's "Mobile Web URL" + "?ref=unknown&refid=0&ft=fbid.332036910178718%3Ainterface.m_touch%3Ac.m" instead of the original shared url.
My opinion is that this is an issue of Facebook that is redirecting the url to the wrong location, "Mobile Web URL" instead of the original post url.
Ok not working. What is going on, 1st directed to something about itunes url. I am on an Android not an Iphone. Sad state when an disabled person is unable to gain access the same as others. This is bad for all users.
The application i'm working on requires me to launch the application from any webpage so it can rip the text from that webpage via stringByEvaluatingJavascriptFromString (which requires the url).
How do you launch an application from mobile safari from any webpage?
In addition would it be possible to access the url of the current webpage from the app whilst doing this?
The current method i'm using requires one to copy/paste the url directly into the app.
From what I've seen so far it can be done via bookmarks but i'm not sure about how the code would work.
You can register your app to a custom URL scheme (See: How to register an app to respond to a custom URL scheme opening request?). When a URL with this scheme is opened in Mobile Safari, your app delegates application:didFinishLaunchingWithOptions: method will be called. The URL will be passed in the options dictionary as UIApplicationLaunchOptionsURLKey.
Now you can create a bookmark in Mobile Safari, which opens your app and passes the URL along:
javascript:window.location="yourAppURLScheme://?url="+window.location
I'm a bit confused about the difference between a facebook canvas application and a facebook mobile web application. Here is the context of my confusion..
I have a canvas application, let us call its namespace as myfbapp, and I basically can access it from https://apps.facebook.com/myfbapp and after I login to FB it opens up with in Facebook. I'm using java (apache / tomcat) for my server side implementation and for simplicity sake let us say I just have an index.html and a authenticationfilter.java (which implements Filter) in my web application. I don't have any Facebook specific Javascript API (no FB.init() javascript or anything like that ) or code in my index.html. Whenever user accesses my canvas application I first get a request to my web application where I get the signed_request , oauth_token , FB user ID etc which I can use for my internal authentication, session creation etc. I have absolutely no issues with this canvas application and every thing works fine. Please note that when user accesses this app the request I get from the browser to my app server has the signed_request , user_id etc.
Now I wanted to make this app available on mobile devices as well and I thought, oh well all I need to do is add the mobile URL for this app in the mobile web app section in Facebook for the same myfbapp. I did that and as expected when I login to facebook from my android phone myfbapp is listed under the apps section, so far so good. The problem starts when I click on the app. I get the request on my app server but it doesn't contain the signed_request , user_id etc.. ????? I was expecting the mobile app to work the same way as the canvas app but apparently it doesn't or I'm doing some thing wrong.
Then I started reading more about facebook mobile app at http://developers.facebook.com/docs/guides/mobile/web/#register where it talks about adding various Facebook Javascript API's in the index.html (I never did anything like that in my canvas app) and then I started thinking , may be then mobile web app is more (or exactly) like a regular web app with FB connect and not like canvas application (meaning it doesn't really load with in Facebook) , is this true?
On mobile facebook you can not see any custom pages/tabs. They are apparently wokring on that at the moment.
So it will be different to a canvas app. Your mobile app will be a completely seperate site and page not in an iFrame on Facebook.
Some behaviour i discovered recently with Facebook Canvas / Page Tabs on mobile devices.
Maybe this helps to understand a little bit better how facebook behaves in mobile context.
Mobile Browser
Access App URL
Example URL http://apps.facebook.com/myapp/
Redirects to the configured mobile website under Settings > Website > Mobile Site URL and adds additional params /?ref=web_canvas&code=<signed_request_code_field>
About the signed_request code field
An OAuth Code which can be exchanged for a valid user access token via a subsequent server-side request
Access App Center
There is no way to access the Facebook App Center via the mobile browser.
Access Page Tab
Example URL http://facebook.com/a_facebook_page/custom_page_tab_url
Custom Page Tabs are not visible via the mobile browser.
Facebook Open Graph Search
Searching for myapp returns the link to the Facebook Canvas.
Same behaviour like Access App URL via Mobile Browser
Mobile Facebook Client
Access App URL
There is no way to access this url directly.
Access App Center
There is no way to access the Facebook App Center.
Access Page Tab
Example URL http://facebook.com/a_facebook_page/custom_page_tab_url
Custom Page Tabs are not visible via the mobile facebook client.
Facebook Open Graph Search
It says that this app is not compatible with this devices.
You need to register an iOS / Android App and send the user to this app to get rid of this error. Probably it helps the user if you add the link to the standalone application to the Facebook description of the app. Which should then be visible there.
I'm building an iPhone webapp (using JQTouch at the moment). It's a fullscreen app, you know, the ones installed on the home screen without the Safari chrome. If you tap a normal link (without AJAX that is) the link opens in Safari, taking you out of the webapp.
Is there a way to build non-AJAX webapps for iPhone?
The problem is AJAX isn't always a feasible solution. I would like to implement OpenID for this particular webapp for example but it means you have to redirect to an OpenID provider which links back to your URL but... without AJAX off course...
PS: I know you can build "real" apps with PhoneGap (and others) and I even built native apps before but, to be honest, I'm tired of paying €70/year for building free apps (it's for a hobby project, nothing professionally).
I think you can open OpenID links in iframe. OAuth, Facebook Connect, etc, all can work in that way.