Here is my current login flow for my Facebook app (see this answer for an explanation). logout() and login() are dummy functions that render the page when the user is logged out or logged in.
window.fbAsyncInit = function() {
FB.init({
appId: '...',
channelUrl: window.location.protocol + '//' + window.location.host + '/channel.html',
status: false,
cookie: true,
xfbml: false,
oauth: true
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
login(response);
} else {
FB.Event.subscribe('auth.login', function(response) {
login(response);
});
logout();
}
});
};
With this login flow, I don't have to reload the page when the user logs in, but I get the silent error:
Blocked a frame with origin "http://www.facebook.com" from accessing a
frame with origin "https://s-static.ak.facebook.com". The frame
requesting access has a protocol of "http", the frame being accessed
has a protocol of "https". Protocols must match.
I assume that reloading the page transfers the iframe holding the app to the https:// protocol, but I don't really understand why or what that means. Why is this error occurring, and is it something to be concerned about?
This is a security issue in most browsers. You cant ajax an https link from a http page
possible duplicate of Facebook gives "Unsafe JavaScript attempt to access frame with URL" error in Chrome
Related
Sorry for my English.
I would like to host my application on facebook heroku.
I followed this tutorial, and managed to create an application.
But how do I add a redirect to login and application permissions? I.e. when the user accesses the URL still-bayou-6120.herokuapp.com or apps.facebook.com/still-bayou-6120
he is redirected to the login screen, and then he "accepts" or "denies" permissions from the user?
In the tutorial above they do not explain how to
redirect user when they deny permission
I searched on google but did not find any article.
In "index.erb", there is a Facebook init() function.
window.fbAsyncInit = function() {
FB.init({
appId : "<%= #app['id'] %>", // App ID
channelUrl : "<%= url_no_scheme('/channel.html') %>", // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Listen to the auth.login which will be called when the user logs in
// using the Login button
FB.Event.subscribe('auth.login', function(response) {
// We want to reload the page now so Ruby can read the cookie that the
// Javascript SDK sat. But we don't want to use
// window.location.reload() because if this is in a canvas there was a
// post made to this page and a reload will trigger a message to the
// user asking if they want to send data again.
window.location = window.location;
});
FB.Canvas.setAutoGrow();
};
So, you can add some code to check if user deny permission or not as following.
window.fbAsyncInit = function() {
FB.init({
appId : "<%= #app['id'] %>", // App ID
channelUrl : "<%= url_no_scheme('/channel.html') %>", // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
//Check Status
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.Event.subscribe('auth.login', function(response) {
window.location = window.location;
});
FB.Canvas.setAutoGrow();
} else {
//Deny permission//
//DO SOMETHING HERE
}
});
};
PS. I don't run this code yet. Also, please check this link for Facebook Login.
The new Facebook graph api has divided friends into Friends & Invitable_friends .
me/friends/ returns my friends who are using the app while me/invitable_friends/ returns only the list of my friends who are not using the app.
But in my app,a user may interact with random users too who may not be on his friend list.
So how do i get user data for those who are using the app but are not on my friend list.
Thanks.
I went through the same issue and solved it like that: when a user starts your app by default you ask for permission to access his public profile information, which includes real ID, name and some other. You simply store the user data (id, name, etc.)in a database. This way you keep track of all the people using your app and they can interact with each other.
JavaScript Example:
window.fbAsyncInit = function () {
FB._https = true;
console.log('here');
FB.init({ appId: 'xxxxxxxxxxxxxxxx', cookie: true, xfbml: true, oauth: true, version : 'v2.0'});
Login();
};
function Login() {
FB.login(function(response) {
if (response.authResponse){
checkUser();
}
else{
console.log('User cancelled login or did not fully authorize.');
}
}
);
}
function checkUser() {
FB.api('/me', function(response) {
$.ajax({
type: "get",
url: "cgi-bin/checkUser.cgi",
cache: false,
data: {"user_name" : response.name, "u_id" : response.id, "link" : response.link},
success: function() //onSuccess,
{
console.log("user " + response.name + " checked!");
},
error: function()
{
console.log("Error with server connection on user checking");
}
});
});
}
I don't know in what language you are writing the app but I believe that in every language you should call the "login" function, which asks the user for permissions and basically gets access to info.
To get details of users who are using the app but are not your friends,call the following
graph.facebook.com/v2.0/
?ids={comma-separated-ids}&access_token=app_access_token&fields=name,picture
access_token is a must else graph-api returns following error-
The global ID xyz is not allowed. Please use the application specific ID instead.
This will work for all users who have authenticated the app no matter their authentication date,but for any non-app user graph-api returns above error message.
I've put together a test site to try and get facebook login working with the following code, but I get two errors showing up in FireBug which doesn't seem to effect the functionality of the web page when I just ignore them and carry on.
HTML:
<div class="fb-login-button" show-faces="true" autologoutlink="true" width="200" max-rows="1"></div>
<div id="FBLogin"><a id="FBLoginLnk" href="#" title="Login with Facebook"><img src="./login-button.png" /></a></div>
Javascript:
$(document).ready(function(){
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: "012345678901234",
status: true, // check login status
channelUrl : '//website.co.uk/bla/channel.php', // Channel File
cookie: true,
xfbml: true, // parse XFBML
oauth: true
});
FB.Event.subscribe('auth.statusChange', function() {
console.timeStamp("Login even")
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
console.log("Connected Event");
// Good to go
} else if (response.status === 'not_authorized') {
console.log("Not Authorized Event");
NotLoggedIn();
}else{
console.log("Not Logged In Event");
NotLoggedIn();
}
});
});
FB.getLoginStatus(function (response) {
console.timeStamp("getLoginStatus")
if (response.status === 'connected') {
console.log("Connected");
} else if (response.status === 'not_authorized') {
console.log("Not authorised");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
} else {
console.log("User not logged in status unknown");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
}
});
});
$('div#FBLogin').click(function(){
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.danthegeek.co.uk/bla';
});
});
function NotLoggedIn(){
console.timeStamp("notLoggedIn Called");
// Reset Website
}
The two errors I'm getting are with xd_arbiter.php?version=27 which seems to get called.
JSON.parse: bad control character in string literal
Line 13
JSON.parse: unexpected non-whitespace character after JSON data
Line 13
As a overview, The intention is to have the page auto-redirect to Facebooks login page (not a pop-up window as this doesn't display correctly on mobile devices). If logged in already, no re-direction happens but user can Log Out which will cause a Login button to be displayed which when clicked goes to the Facebook login page, again no pop-up. This all seems to work fine, but I'm not sure if the code structure is exactly how it should be. I don't believe this to be part of the fault. I really wanted to use the facebook social button to login but couldn't get this to work redirecting to the facebook login page, it only seems to cause a pop-up window which is why I show my own Login with Facebook button.
If it wasn't for firebug halting the code all the time saying there was a error I wouldn't even know there was a problem.
The javascript on my test page is quite complicated but even with everything stripped out and running as above I get this problem.
Any help greatly appreciated.
I have a difficult problem. Difficult means I searched through the net and StackOverflow as well the whole FBJS SDK documentation and haven't find answer.
I am building a Page Tab application where I'd like to let fans to rsvp events. So I have to check if the user is logged in and if it doesn't I have to login. That sounds pretty easy, but FB.getLoginStatus doesn't fires callback function. This is the code excerpt:
FB.init({
appId: window.appID,
status: true,
xfbml: true,
cookie: true,
oauth: true,
channelUrl: 'http://example.com/fb/channel.html'
});
and then I simply - of course after the user clicks on a button - call FB.getLoginStatus, but it seems it doesn't do anything.
I've already checked sandbox mode, FB.init success, URLs in application settings and developing environment. I can call FB.ui, although FB.ui with method: 'oauth' I get an error message saying " The "redirect_uri" parameter cannot be used in conjunction with the "next" parameter, which is deprecated.". Which is very weird because I didn't used "next" parameter. But when I set next to undefined, it works fine, I get the window, but it says "Given URL is not allowed by the Application configuration.". Expect from that, I can login, then I've got the access_token. But in the new window, getLoginStatus still doesn't do anything.
So any advices are welcome.
Thanks,
Tamas
UPDATE:
function onBodyLoad() { //on body onload
FB.init({
appId: window.appID,
status: true,
xfbml: true,
cookie: true,
oauth: true,
channelUrl: 'http://example.com/fb/channel.html'
});
}
...
function getName() { // on button onclick
FB.getLoginStatus(function(response){
if (response.authResponse)
{
window.loggedIn = true;
debugString('Logged in');
} else
{
window.loggedIn=false;
debugString('Not logged in');
}
}, true);
if (window.loggedIn === undefined) {
debugString('getLoginStatus did not exec'); // I always get this message
}
}
UPDATE 2: I created a new App on a different URL, which is configured as a standalone website. There these codes work perfectly, I can getLoginStatus, I can login, etc. Is there any difference working in the context of FB, and in a standalone website, using FB JavaScript SDK?
FB.getLoginStatus does not fire the callback when you are running the website on a different domain than the one that you registered the app with. I usually find myself in this situation when I am developing locally or on a staging server.
For example, if you registered the site with example.com and your staging server is example.mystagingserver.com, the callback wont fire. In this case, you need to create a second application in Facebook and use the Application ID and Secret for the new app.
I just had the same problem, though it only happened to some users.
I finally found out that if your app is sandbox mode, none-developer users can still see your app as a pagetab. But calling getLoginStatus will fail silently (even logging turned on).
Took a while to figure that one out, I hope this can save someone else some time.
I'm using this code, successfully. I'm not quite sure where the differences are.. but I'm using the ASYNC FB Loader.
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXX', //change the appId to your appId
status: true,
cookie: true,
xfbml: true,
oauth: true});
function authEvent(response) {
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user is not connected to your app or logged out
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user cancelled login or did not grant authorization
}
}, {scope:'email,rsvp_event,status_update,publish_stream,user_about_me'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
function login(response, info){
if (response.authResponse) {
accessToken = response.authResponse.accessToken;
userid = info.id;
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name+"<br /> Your Access Token: " + accessToken;
}
}
You can use the following code to check if the user is logged in:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
}
});
From FB JS SDK Documentation.
You can wrap the whole code in jQuery ready :
$('document').ready(function(){
... above code
})
Also you may want to check this question StackOverflow.
I had the same problem. I was working on the facebook login process of our website. During development the "FB.getLoginStatus" did not return a response. I fixed it in the settings of the app on facebook:
-In facebook go to "manage apps"
-Go to the "facebook login" settings of your app
-Add your development url (for example "https://localhost") to the "Valid OAuth Redirect URIs"
(Don't forget to remove the "https://localhost" from the OAuth Redirect URIs when you are finished with developping.)
Something common that causes this is that a browser is blocking cookies, this will cause the event not to fire. Also, make sure that if you or your user have and ad blocker that it is not blocking third party cookies.
Example of warning:
For me after extensive testing can confirm the dialog to log the user will not show unless you use a valid Application ID
These can be found in
https://developers.facebook.com/apps/{{Application__Id}}/settings/
Just make sure you call the api with the correct ID.
This is driving me crazy. A user logs into my Facebook app, does some stuff. Then goes to Facebook and logs out. I've got a little timer that calls FB.getLoginStatus() every once in a while to see if the user is still logged in. But whenever FB.getLoginStatus() gets called it returns a response with a session object. WTF? Shouldn't it return undefined/unknown?
I'm using the absolute most basic call to Facebook evar:
FB.init({
appId: 'MY APP ID',
cookies: false,
status: true,
xfbml: false
});
FB.getLoginStatus(function (response) {
if (response.session) {
console.info("Session exists");
} else {
console.info("Session empty");
}
});
setInterval(function () {
FB.getLoginStatus(function (response) {
if (response.session) {
console.info("Session exists");
} else {
console.info("Session empty");
}
});
}, 10000);
I checked and double checked the permissions that are being requested with the allow. I am only requesting email and sms. So.... any advice?
don't do it in the hard way. This situation has a simple solution, just add a "true" statement as a second parameter from the getLoginStatus method:
FB.getLoginStatus(function (response) {
if (response === undefined || response.status === 'connected') {
// Do something after logout
}
}, true);
Just be careful and aware that every call to this function will make your App to go to Facebook's servers and can give you a considerable amount of network load depending on your implementation. Hope this helps!
I had the same problem using your code.
The only way I got round it so far is to initialise the sdk each time login status is queried:
setInterval(function () {
FB.init({
appId : 'xxxx', // App ID
channelUrl : 'xxxx', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
FB.getLoginStatus(function (response) {
if (response.authResponse) {
console.info("Session exists");
} else {
console.info("Session empty");
}
});
}, 10000);
In this way I always get the correct session status. If there's a more efficient way to do this please let me know!
Try initializating FB with
status: false
So it will work as you expect. It worked for me
Are you sure the session always gets destroyed when the user logs out? Maybe it's just a var inside the session that changes if the users logs in or out....?