When I use the facebook javascript SDK for authentication it fails on mobile phones and ipad - facebook

Javascript authentication works great on browsers but once I use the website on mobile, I always get this error on the login popup.
Sorry, the application you are using is misconfigured for Facebook integration. Please download the newest version of the application.
Instead of showing the usual login popup, it goes to m.facebook.com and it produces this error. Whats interesting is clicking on the spanish link, makes it work again.
--EDIT--
After doing some research and tinkering, ive nailed it down to this:
<fb:login-button registration-url="http://www.example.com/page#register" onlogin="authenticate.facebookLoginCallBack()"></fb:login-button>
Its possible the pound sign blows it up. I need the pound sign because i dont want to redirect off the page,instead i want to trigger a js registration popup.
My guess is that the # gets into the redirect-url, and then must somehow get transformed again on its way to getting redirect to m.facebook.com and that makes it fail there.
--EDIT--
I thought about redoing the flow by creating my own button and calling FB.login, but there is no way to tell the API to stop at login, and load my own registration. The problem is summed up here Registration flow using FB.login
Realistically it seems we are only provided with one option here:
https://developers.facebook.com/docs/plugins/registration/
Login + Registration Flows
and it doesnt work in my situtation
VISUALS
Typically the user clicks on this button
Then they see this dialog. (Notice it says www.facebook.com in the url)
But they see this dialog on mobile. (This is loading from m.facebook.com)

Related

Third party authentication doesn't work from facebook browser

I have a web application (React js with Kotlin backend) that has normal email + pw (plus PIN) login, and it also supports 3rd party authentication (Google and Facebook). It works on mobile and web, however, when I open my webpage through Facebook app - which opens it's own browser - and try to log in with 3rd party authentication, I can click on that "Continue as me" button, but then the page refreshes and I'm not logged in. I saw the same thing happen on other sites too, e.g. Figma, Pinterest, etc. I thought it's impossible to log in this way anymore, however, I just noticed that you can actually log in to Stackoverflow this way (so facebook app -> facebook browser -> stack overflow -> 3rd party auth and it works).
Has anyone figured it out how it was possible for Stackoverflow to do this?
Ok, I found the solution. The problem was that when a user clicked on 'Login with FB' button on my site, I sent a request to fb to get back a content of a login window and I created a pop up window where I rendered it, I put on a listener on that pop up window and once it was done, then I got the access token and sent it to backend and logged the user in. On a normal browser it works perfect (both pc and mobile) but as I mentioned above it didn't work in an in app browser like facebook app.
The issue was that facebook app opens a website in it's own browser that doesn't handle any pop ups, so after a successful authentication I saw that nothing happened and it was because we were not redirected to the original window where we should have, and it had the token in the url. So the solution was instead of making this pop up window for FB login, just redirect the user to the fb login page (and stay on the same window), and once the login is successful, just handle the token as is.

New Twitter update authentication

I'm making a twitter app on iOS using their api. But they just recently upgraded everything dealing with authentication. Therefore breaking The Swifter library that I am using. My app was working fine before this update. In my apps.twitter.com In the setting section, the first callback url I have is http://MyTweeter ...It wants to me to add another callback, idk why/what so I just added http://google.com. In my app when I call the authentication function, it starts to authenticate and goes to the twitter login page and right after I click the login button it shows me the error in the pic attached below "Safari cannot open the page because the server cannot be found". Does any one have a solution?
So i found the solution. In you app, in the authentication function, your callback url should be something like MyTwitter://success but in apps.twitter.com you have to make it MyTwitter:// without the second part

Issues using Spring Social Quickstart example

I'm trying to use the Spring Social Quickstart app from the Github repo, https://github.com/spring-projects/spring-social-samples. I updated the versions in build.gradle and ran the app.
A simple page was display with a button, "Sign in with Facebook". If I'm not already signed in with Facebook, I get an FB error page telling me to sign in (seems a bit contradictory!). If I sign-in and run the app, I get an error dialog saying:
URL Blocked: This redirect failed because the redirect URI is not
whitelisted in the app's Client OAuth Settings. Make sure Client and
Web OAuth Login are on and add all your app domains as Valid OAuth
Redirect URIs.
When I click on the "Okay" button, another error message pops up saying it "Can't Load URL" (there's more to it, but I figure the first error is the key one). This error keeps popping up every time I hit the "Okay" button.
As far as I know, everything on the Facebook app is configured correctly, but not 100% sure.
One other thing, when the "Sign in ..." button is pushed, the URL opened shows that it's trying to connect using v2.5 of the FB API. Don't know where this is being set, but it is 3 versions behind.
Going through the Spring docs as well, but there are a lot of moving pieces to work through. Any help would be appreciated.
Thanks.
So I discovered after looking more closely at the URL when the error comes up that I had the redirect URL incorrect. Once I corrected that, I was able to login and get the extra permission added.
I'd still like to know about where the version for the API is set.

Facebook redirect_uri error, registration app. not loading

I'm just putting some Facebook functionality on an existing website for comments and such and maybe a few other fun things later but, although all of the other functionality works, the log in button, the comments box and the like button the registration form just won't.
The error I'm getting is exactly as follows:
Unable to load the registration form for
Roundhall_community_ecosystem. You may have previously blocked this
app on Facebook. Go to your Facebook privacy settings to unblock this
app. (Error: Missing 'redirect_uri' query parameter.)
I'm not in sandbox mode and I followed the instructions on the developers' page and replaced the redirect_uri with the url of my site however given that this error is specified I still think this might be what is stopping the registration app. from loading.
The only other time the problem is recorded here: https://stackoverflow.com/questions/12431870/using-facebook-registration-plug-in-iframe-and-getting-error-missing-redirec , the solution given is that a quotation mark is missing but the user doesn't say where.

Blank popup with FB connect

I've implemented the facebook connect using Javascript SDK. The authentication works fine when the user I'm trying to authenticate is not logged into facebook. But when he's already logged into facebook the login popup never closes. The url of the popup starts with "http://static.ak.fbcdn.net/connect/xd_proxy.php#cb=....."
This happens both on Firefox 3.5 and on Chrome.
Any suggestions? Do I need to set any extra parameters while connecting to Facebook?
I've encountered the same error today, with my year old implementation. I've added the channelUrl tag to FB.Init(), without any luck; so I started the login procedure from scratch with the js sdk, oauth2 enabled: with some minor changes, everything started to work misteriously again. I've run my pages through the Facebook debug tool as well, it suggested some changes as well.
To sum up: basically, if Facebook Connect stops working, upgrade your code according to the latest documentation avaliable.
No special parameters are needed. This is probably a browser problem. Maybe you have a setting/plugin somewhere that does not allow Javascript to close a window for you.
The easiest way to test this is to post a link to your implementation so that other people (with other browser setups) can give it a try.