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.
Related
Following directions here https://developers.facebook.com/docs/javascript/quickstart
I started with a mostly blank HTML page, just the HTML, Body tags, and a simple Hello World.
I copied and pasted directly from the quickstart page but get nothing (but Hello World does Load).
I have an app ID (I wasn't sure if I should include the {} or not, tried both ways, no change.
I added the code from section "Using the SDK to add Social Plugins", "Using the SDK to trigger a Feed dialog" etc and nothing. Running on CentOS/Apache, server is fine. Not sure what I'm missing. Thoughts?
Thank you for your time.
PS page is here to view source: http://nex916.elementfx.com/purity3.html
Maybe something like the following will be of help?
<div id="fb-root"></div>
<!-- Load the Facebook JavaScript SDK -->
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Initialize the Facebook JavaScript SDK
FB.init({
appId: 'YOUR_APP_ID',
xfbml: true,
status: true,
cookie: true,
});
// Check if the current user is logged in and has authorized the app
FB.getLoginStatus(checkLoginStatus);
// Login in the current user via Facebook and ask for email permission
function authUser() {
FB.login(checkLoginStatus, {scope:'email'});
}
// Check the result of the user status and display login button if necessary
function checkLoginStatus(response) {
if(response && response.status == 'connected') {
//alert('User is authorized');
// Hide the login button
document.getElementById('loginButton').style.display = 'none';
// Now Personalize the User Experience
//console.log('Access Token: ' + response.authResponse.accessToken);
} else {
//alert('User is not authorized');
// Display the login button
document.getElementById('loginButton').style.display = 'block';
}
}
FB.ui(
{
method: 'feed',
name: 'The Facebook SDK for Javascript',
caption: 'Bringing Facebook to the desktop and mobile web',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
link: 'https://developers.facebook.com/docs/reference/javascript/',
picture: 'http://www.fbrell.com/public/f8.jpg'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
<input id="loginButton" type="button" value="Ligin with Facebook" onclick="authUser();" /></div>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
You have a syntax error in your JS
SyntaxError: syntax error purity2.html:26
To fix it, remove }; from line 19
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
}; // this
it should be like
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
Now your code should work
I have googled and looked at other similar questions posted on Stackoverflow but none of them seem to work. I need to be able to login using the FB login on my website and then retrieve my friend list. I used the code from FB developer's site and I can login but nothing else executes. In particular I would like to understand two things:
How can I modify this code to turn the login into a logout button once I am logged in?
How can I get the testAPI() function to execute?
Here is my entire code: the login works but I see no output in my JS console.
<html>
<title> Test Title</title>
<body>
<h1> About Test Title </h1>
<p>Random text.</p>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '345435435435', // valid App ID is used here
channelUrl : '//www.my website.com/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
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
console.log('Connected case… ');
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
console.log('Not authorized case… ');
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
console.log('else case… ');
}
});
};
// 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));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked.
Learn more about options for the login button plugin:
/docs/reference/plugins/login/ -->
<fb:login-button autologoutlink="true" show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
oFor the logout, you can use
FB.logout(function(response) {
//console.log(response);
// do something usefull ...
});
and put that on a button. BUT: you are currently logging off the user from Facebook AND from your app, users might find that strange?
Logout on a button as requested:
<a href='#' onClick='doLogout();'>Logout from Facebook</a>
...
function doLogout() {
FB.logout(function(response) {
//console.log(response);
alert("Bye bye...");
});
}
I’m creating a custom share to facebook functionality, which has been more complicated than I originally thought.
I’ve had to create a facebook app and then use It’s ID to get it going.
If you try to share the page on facebook, it gets you login to facebook(if not logged in), then it requests access to your profile(only on your first share), and then proceeds to share dialogue to let you share it.
However I’ve noticed that other sites including youtube and BBC, that they don’t request access to share on facebook, It will take you straight to the share dialogue instead.
Is there a way to achieve this?
Code using is below:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script>
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 : true, // parse XFBML
link : '*LINK*'
});
$('.share-print .facebook > a').click(function(e){
e.preventDefault();
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
facebookSend();
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
FB.login(function(response) {
if (response.authResponse) {
console.log('Logged in');
facebookSend();
} else {
console.log('Not logged in');
}
});
} else {
// the user isn't logged in to Facebook.
FB.login(function(response) {
if (response.authResponse) {
console.log('Logged in');
facebookSend();
} else {
console.log('Not logged in');
}
});
}
});
});
var facebookSend = function() {
console.log('facebookSend started');
FB.ui({
method: 'feed',
display: 'iframe',
link: '*PAGE_LINK*'
});
}
</script>
I am using FB.getLoginStatus() and FB.Login() to log the user into my website using facebook. I first check for the status on page load using FB.getLoginStatus() and save the state in a hidden variable. When the user clicks on my facebook login button, I first check the value in the hidden variable and call FB.Login() only if FB.getLoginStatus() is not connected. If FB.getLoginStatus() returns 'Connected', then I just log the user into my website without FB.Login().
My scenario with issue
*user logs into my accont using facebook
*user logs out of my website
*my website is open in the logged out state
*in another tab, the current facebook user logs out of facebook and a new user logs into facebook
*user comes back to my website and clicks on facebook login button without refreshing the page
*the old facebook user (not the one currently logged into facebook) is logged into my account
How can I identify the most current user in facebook when user clicks the facebook login button?
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
// initialize the library with your Facebook API key
var AppID = '<%=AppID%>';
window.fbAsyncInit = function() {
FB.init({
appId: AppID,
status: true,
cookie: true,
xfbml: true,
channelUrl: 'http://<%=Request.ServerVariables("HTTP_HOST")%>/channel.html'
});
FB.Event.subscribe('auth.login', function(response) {
//alert('logged in');
});
FB.Event.subscribe('auth.logout', function(response) {
//alert('logged out');
});
FB.getLoginStatus(function(response) {
if (response.status === "connected") {
var uid = response.authResponse.userID;
document.getElementById('hdnFBConnected').value = uid;
}
else if (response.status === "not_authorized") {
//alert("Not authorized");
document.getElementById('hdnFBConnected').value = '';
}
else {
//alert("user not logged in to facebook");
document.getElementById('hdnFBConnected').value = '';
}
});
};
</script>
<img src="<%=global_language & "/images/FacebookSmall.gif"%>" />
<script type="text/javascript" language="javascript">
function WindowOpen() {
if (document.getElementById('hdnFBConnected').value != '') //user is connected
{
FB.api('/me', { fields: 'first_name, last_name, locale, email' }, function(result) {
var uid = document.getElementById('hdnFBConnected').value;
//log the user into my site
})
}
else { //user is not connected, so calling FB.Login()
FB.login(function(response) {
if (response.authResponse) {
var access_token = response.authResponse.accessToken;
FB.api('/me', { fields: 'first_name, last_name, locale, email' }, function(result) {
var uid = response.authResponse.userID;
var globalLang = '<%=global_language%>';
//log the user into my site })
}
else {
//alert('User cancelled login or did not fully authorize.');
}
}, { scope: 'email' }
);
}
}
</script>
</body>
What you're describing is normal behavior. The JS SDK is sending the old user's signed_request object which allows the new user to access her account. Since this concerns you, include a logout button on your app's page and let the user know that it's important she clicks that button when she's done using your app. The logout button should call FB.logout like so:
FB.logout(function(response) {
// user is now logged out
});
For extra security, you can create an activity timer that prompts the user to click a button after X minutes of inactivity. If the user doesn't click within, say 1 minute, she is logged out automatically. This is how most banking sites deal with session security.
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.