I have a working Facebook-Login procedure using the PHP SDK. Now Facebook is requiring me to update my login flow since I apparently "violate the Facebook Platform Policies". According to them my "Login button doesn't properly reference Facebook." They suggest that "To fix this issue, you should always use our official SDK for Login." I suspect (but don't know for sure) this is because the login is not opened in a popup but rather in a new window using the PHP SDK getLoginUrl() method. Thus, I'm trying to update my Facebook Login flow.
In trying to combine the Javascript SDK (to render the official button and popup) with the PHP SDK (to handle the responses) I'm using the following approach (Source: https://developers.facebook.com/docs/php/howto/example_access_token_from_javascript)
<html>
<body>
<p>Log In with the JavaScript SDK</p>
<script>
logInWithFacebook = function() {
FB.login(function(response) {
if (response.authResponse) {
alert('You are logged in & cookie set!');
// Now you can redirect the user or do an AJAX request to
// a PHP script that grabs the signed request from the cookie.
} else {
alert('User cancelled login or did not fully authorize.');
}
});
return false;
};
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id',
cookie: true, // This is important, it's not enabled by default
version: 'v3.2'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
When clicking the Login-Button a popup will show, as expected, to log me in. But...
...before I even enter my FB credentials the code alerts 'User cancelled login or did not fully authorize'.
...after entering my credentials the popup remains open with a blank white page.
...when I click the button while already being logged in to Facebook I will only see a blank white page in the popup.
...there's no redirect (which I suppose has to be handled in the if (response.authResponse) part)
Related
The website I'm working on has a Facebook login option, but recently a user reported it wasn't working for them. I disabled my extensions etc, I got this error in my console:
Blocked a frame with origin "https://www.facebook.com" from accessing a frame
with origin "http://static.ak.facebook.com". The frame requesting access has
a protocol of "https", the frame being accessed has a protocol of "http".
Protocols must match.
Is there an option I can feed to the API that will get it to work on the same protocols? FYI, the primary website runs on HTTP (no S).
It is especially odd because it seems like it stopped working all of a sudden (but it is possible this was always a problem as I am new and am learning this system).
I have this code at the foot of my page:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ..., // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channel: '//...mychannel.../channel'
});
FB.Event.subscribe('auth.authResponseChange', function(fbResponse) {
// function that logs in user
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
If you are not loading the javascript sdk async, you could see this error a lot.
refer to: https://developers.facebook.com/docs/javascript/quickstart
in addition, if you are using any Facebook plugins via the iframe code, be sure the src url protocol matches.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I had the same issue on my development environment.
Steps to solve (not sure which one did it):
Log out of the application.
Delete all cookies from the browser.
Log in to FB as the intended user (not to the developer page but to the user app permissions page).
Delete the app permission from the FB permissions page.
Log out of FB.
Reload the app and try to log in.
I would not have answered in such a voodoo answer unless I had spent some hours on it, and would value any sort of witchcraft to get me out of it.
i've been with this problem...
my solution:
move your facebook call to static page...
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=IDDDD";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
set a ajax callback:
try{setTimeout(FB.XFBML.parse);}catch(e){}
happy :)
jquery example:
$(document).ajaxComplete(function(){
try{
setTimeout(FB.XFBML.parse);
}catch(ex){}
});
For what it's worth, I managed to fix this issue by converting to HTTPS (which is what I should have been doing anyway).
i have created a page tab app for which i have set all the parameters under Auth Dialog in the app settings.
Now when i send a friend request through my app, and my friend clicks on the app request, he is able to see the authentication box describing the app and the permissions requested etc.
But if anyone visits my page on which i have added the app, and clicks on the app from there, it directly takes the user to the page tab without displaying the auth box.
Is this how it is supposed to work from a page? is it possible to display the auth box for a user coming to the app from a page?
Secondly, i have added a multi friend selector which opens by default in a popup as it is supposed to.
Is it possible to display it in the page itself instead of a popup?
I tried adding the display: 'page' option but it din work.
I have used the same code from : https://developers.facebook.com/docs/reference/dialogs/requests/
...
<body>
<div id="fb-root"></div>
<p>
<input type="button"
onclick="sendRequestToRecipients(); return false;"
value="Send Request to Users Directly" />
<input type="text" value="User ID" name="user_ids" />
</p>
<p>
<input type="button"
onclick="sendRequestViaMultiFriendSelector(); return false;"
value="Send Request to Many Users with MFS" />
</p>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : XXXXXXXXXXX,
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script>
function sendRequestToRecipients() {
var user_ids = document.getElementsByName("user_ids")[0].value;
FB.ui({method: 'apprequests',
message: 'My Great Request',
to: user_ids,
}, requestCallback);
}
function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'My Great Request'
}, requestCallback);
}
function requestCallback(response) {
// Handle callback here
}
</script>
...
Any help in this regard would be very much appreciated.
Is this how it is supposed to work from a page?
Yes. Authenticated referrals don’t work when the app is accessed from a page directly.
is it possible to display the auth box for a user coming to the app from a page?
Of course – analyze the signed_request parameter, and react accordingly (meaning, display the auth dialog yourself, server- or client-side).
I have the following simple test page and trying to add a FB login button. This will be part of a stand along web site and not a canvas application. If the current user is already logged in on FB, then the list of friends using the application is displayed, but there is no login button. If the current user is not logged in on FB then I get nothing.
Any ideas?
Here is my page... I'm currently running it under localhost.
<body>
<div id="fb-root">
</div>
<!-- Loading of FB SDK -->
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '319067848117743', // App ID
channelUrl: 'http://localhost/TestApp/channel.aspx', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<!-- Display FB Login Button -->
<script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=319067848117743";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-show-faces="true" data-max-rows="2" data-scope="user_about_me,publish_stream,read_stream">
</div>
</body>
first you don't really need to put in the async js loader twice, just redundant code is all. Secondly, I don't know how that code could list friends, I don't see the code for it.
1) You say you're expecting a log-in button even though the person is already logged in? The login button plugin you're using doesn't work that way. It will only show login if the user is not logged into your application. See the note saying "Note: If the user is already logged in, no login button is shown." on https://developers.facebook.com/docs/reference/plugins/login/
2) You also say you cannot see any login button when the user is logged out of Facebook. This is odd, but without seeing all the code I don't know what to help with that part of your question.
Is your app on sandbox mode? Try disabling sandbox mode from app facebook config.
I am using the following code to rendered the facebook login button
<div id="facebook-login">
<script>
FB.init({
appId:"appid", cookie:true,
status:true, xfbml:true
});
FB.Event.subscribe("auth.login", function(response) {
window.location = "http://xxx"; // redirect if user has logged in
});
</script>
<fb:login-button perms="publish_stream"><?php print 'Login with Facebook'; ?></fb:login-button>
</div>
But it no longer works today, and I think it is related to the oauth2.
So I tried to update the code as suggested in Facebook's developer docs.
The new code:
<div id="facebook-login">
<script>
window.fbAsyncInit = function() {
FB.init({
appId:"appid", cookie:true,
status:true, xfbml:true, oauth:true, xfbml: true, channelUrl: '//mydomain/channel.php'
});
FB.Event.subscribe("auth.login", function(response) {
window.location = "http://xxx"; // redirect if user has logged in
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<fb:login-button scope="publish_stream"><?php print 'Login with Facebook'; ?></fb:login-button>
</div>
Now whenever I click the facebook login button, the chrome console keeps throwing the following error
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/login.php?...
I think it is a js cross domain issue, but I have setup the channel url. Any idea on how to solve this problem?
Thanks.
Regards,
Kit
Be sure to replace the code to the new oAuth 2.0
param => scope
response.session => response.authResponse
response.session.access_token => response.authResponse.accessToken
FB.getSession().uid => FB.getAuthResponse().userID
link:
https://developers.facebook.com/blog/post/525/
Finally i found the answer. the get_facebook_cookie() no longer works for OAuth 2.0. we need the facebook php-sdk as mentioned in Facebook Developers – Facebook for Websites
You can also tried the example in Facebook Javascript SDK – A Simple Login Page with OAuth 2.0
I'm setting up a rails app and trying to implement login via Facebook JS SDK. Missing Omniauth already... :(
Anyway, what happens is that the dialog pops up, the user provides the login info, but then it redirects to https://www.facebook.com/connect/window_comm.php?_id=some-string&_relation=opener&auth_token=some-big-string, a blank screen. The pop-up doesn't close.
If I close it manually, though, and then refresh my page, I can see the login happened.
A curious thing is that on the first login, when permissions are asked for, everything works as expected, with the pop-up closing after permissions are granted or denied.
Tested on Chrome, FF, Safari and Opera. Consistent behaviour.
If I debug the blank redirect page on Chrome, there are two errors:
1) Unsafe JavaScript attempt to access frame with URL http://something from frame with URL https://something. Domains, protocols and ports must match. (note http x https...)
2) window_comm.php:7Uncaught TypeError: Cannot call method '_recv' of undefined
Here's the relevant code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',
status : true,
channelURL : 'http://localhost:3000/channel.html',
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js"
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" perms="offline_access"></div>
Thanks a lot for any light on this... Driving me nuts! =(
Edit: Can it be a bug on Facebook, since it is redirecting from http to https?
This answers Q.1) only. Facebook new requirements:-
switching to Oauth2.0 to fetch token_access
using SSL (ie: https://) to authenticate (hence the cross domain issues)
Also, I'd generally start with the code below to figure out the possible user state during the login process. That means clicking on anything and everything during testing phase.
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});