I am using nuxt for frontend which uses vue-social-auth for social login and laravel for backend which is socialite. It works perfectly well for normal browsers but doesn't work in messanger and Facebook browser. Have anyone come with similar problem.
Any lead is much appreciated.
This has been resolved. If anyone faces this problem then please remove vue-social-auth. The problem was that the Facebook and messenger browsers doesn't close the popup given by vue-social-auth and doesn't redirect to the callback.
So the solution would be removing the vue-social-auth package and do it manually on the frontend and in the backend use the socialite stateless method to return JSON response for API calls.
I developed an application that uses the Google + API to authenticate the user using the following code snippet:
<div class="g-signin"
data-callback="loginFinishedCallback"
data-clientid="{My Client ID}"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
data-cookiepolicy="single_host_origin"
>
</div>
This basically displays a Google Sign in button and when the user clicks on it, another window opens and they sign in. In desktop browsers everything works great but in mobile devices the second window opens and after the user logs in, Google doesn't close the login window so the user ends up staring at an empty page. In other words the callback function never gets called because the mobile browser doesn't close the new (login) window. Is there a way to work around this issue?
This is the javascript file Google provides:
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
Cannot comment--however I would like to see an answer for this question. I am having the same problem with Google login redirecting mobile devices to blank page. Desktop Google login works perfectly fine. I am using OAuth2.0.
EDIT:
I solved this problem for my own framework. After tracing through and using a ton of var dumps I realized where google's redirect was dying out. The problem was that when the page redirected from my site's control to Google's authentication control, my $_SESSION redirect was lost. My other social logins (FB and LinkedIn) work with this method, however I had to add a catch for google specific redirect. I checked if the redirect was set and if not, made sure to set it there.
I hope this helps with your problem.
I am developing a cocoa app for Mac OSX. It's a basic browser application and I use webview component.
In the page I want to connect, there is standard Login with Google Account button in order to login with my existing Google Account. When I clicked on this button nothing happens.
The same functionality works properly when I visited the same page by using Safari or any other browser but there is no reaction on webview component.
I've checked the action behind the Google's login button and here is the JS code.
onclick="return Dialog.Login.loginWithGoogle(false, 'https://www.mywebsite.com/-/oauth2callback', 'https://www.mywebsite.com/')"
As a part of the standard oauth process the process also has many redirections after this URL is called and normally should be completed at my site's login screen as expected. However, webview doesn't handle this.
Please note that the web site I am trying to connect in my webview is not belong to me and I have no control on it.
I checked many solutions on the web for 2 days but nothing helped.
Any help/hint will be appreciated.
I want to make a webpage, that works as an APP (in facebook, iframe) and as a usual webpage too.
How can I accomplish this in a proper way?
Right now, I'm connecting to facebook as an APP with the PHP SDK: getLoginUrl(), then redirect the user to this url, blabla. Works fine if I'm in facebook, and using it as an app.
Problem is if the session is outdated, and I'm not looking this on facebook, this redirecting gets annoying, also: very unprofessional in my opinion...
Thanks in advance!
SOLVED: here's the solution for my specific problem:
It took me 1 change of line in the code, which is the following:
$canvaseurl = ($_SERVER['HTTP_REFERER'] == "https://apps.facebook.com/APPNAME/") ? "https://apps.facebook.com/APPNAME/": "https://MYWEBPAGE.hu/app/";
So I simply redirect to the url, where the user came from.
Pretty simple. :)
Once the person authorizes the application, you will be able to use either the iframe or the website, just so long as you don't force it to go back to the application page. I have used the Facebook PHP SDK and noticed that if you enter the actual location that is loading into the iframe it will stay on that page outside of the apps.facebook.com. However this is dependant on the settings you use. Try experimenting with it and see if that helps you.
My implementation of Facebook Connect (just a simple login button, fb:login-button) works perfectly on Firefox and IE.
But the same button is not showing up in Safari/Chrome (Webkit).
Here's what's ironic. In my debugging effort, I saved the page (that contains fb:login-button) up as a static page and then load it in Safari. And the button shows up, everything works!
The exact same page (with the exact same HTML source) rendered by my PHP has no way for bringing up the button.
I'm trying hard to support Webkit here but I'm close to giving up. Can anybody help?
I found one more way this can occur (the blame-myself-for-being-stupid way); it's probably not common, but in the event is saves anyone else the hassle, here it is:
This symptom can also be caused by various security tools blocking facebook resources.
In my case, I'd installed Facebook Disconnect ages ago in Chrome as a plugin and forgotten all about it being installed. I also had a second installation of Chrome that was seemingly identical (but did not have Facebook Disconnect). The first would properly load the fb:login-button, and the other would not; took me ages before I looked at the plugins, because Facebook Disconnect didn't have an icon and so its presence was pretty easy for me to miss.
Here's what you'll see if some sort of security plugin is preventing facebook resources from loading. Just look at the html that renders in the browser using developer tools.
In a normal chrome session you'll end up with something like this:
<fb:login-button><a class="fb_button fb_button_medium"><span class="fb_button_text">Your text here</span></a></fb:login-button>
But in the version with facebook's resources disabled you'll end up with this:
<fb:login-button>Your text here</fb:login-button>
Like I said, pretty obvious in retrospect.
Had the same problem but it was not related to anything like a plugin or malformed content. It seems if you enable country filtering on your facebook page it has an issue with the like button, this should be fairly obvious. Facebook gets your location from your profile and not your IP address.
Make sure to disable country locking if you plan on using the social plugins.
This can be due to having ClickToFlash installed. Either disable it, or check "Automatically load invisible Flash views" in the ClickToFlash settings.
What we found out is that Safari (and maybe some older versions of Chrome or other WebKIT browsers) have a problem with Facebook's code using the innerHTML JS function if your page arrives with an XHTML response header (application/xhtml+xml).
Using text/html solves the issue.
In case of JSF2, which we use, the implementing the fix was as simple as wrapping the FB button like this:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:f="http://java.sun.com/jsf/core">
...
<f:view contentType="text/html">
<fb:login-button>Login using Facebook</fb:login-button>
</f:view>
Facebook bug report here:
http://bugs.developers.facebook.net/show_bug.cgi?id=5545
I had this problem with the Facebook button not showing at all and it took me forever to figure out what it was. Luckily after days of hair pulling I will now share the answer with everyone. In my situation I simply didn't have xfbml enabled. In my FB.init I had it set to false:
FB.init({
appId : 'app_id', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false, // parse XFBML
oauth : true // enable OAuth 2.0
});
I changed this to "true" (xfbml) and the login buttons works great now! :P Good luck!
This happened when I had the wrong domain in callback_url in config/facebooker.yml. Apparently it uses that to load the js files.
I had the same problem but I resolved it by making sure the URL in my app settings was exactly the same as the one for my site (i.e. it didn't work when I accessed my site without the www.).
I have tried every suggested solution here and it didn't work for me. But now I finally found the solution.
Facebook requires now a secured (https) for Canvas (Secure Canvas URL). The unsecured one will be deprecated soon.
Here is the main difference, Chrome doesn't like https connections with invalid certifications. On a localhost, it is very likely you have stunnel installed to allow https connection for the localhost. Firefox is ok with the self created SSL certificate and allows you to add an exception when trying to access that site. Chrome doesn't allow it out of the box.
When I load my app in Chrome the page is blank and I dont see any login button.
Click F12 and click the Netwrok tab in Chrome:
You see that the post request to your localhost is cancelled. DOUBLE Click on it.
Now you would see that chrome is blocking the localhost because of the certificate:
click on proceed anyway.
Now to back to your other tab and reload the page:
Chrome works now like Firefox and shows the login button.