I am developing a simple web game with my friends. I have integrated facebook login using the javascript sdk provided by FB. Basically, the first page of the web game is main.html, in which I added successfully a Facebook button using the code provided by Facebook:
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
window.location.href = "mode.html";
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.3' // use version 2.3
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
Once login is successful, the page would be directed to another html page. In that html page, I tried to add an Facebook logout button. Trying for some hours, in vain. The most frequent error obtained is something like "FB is underfined".
Finally I decided to download a .png of FB logout button and include this .png as src image to "make" a button by myself, still in vain, rather frustrating.
The code I included in that another html page is as follows.
<script>
// This is called with the results from from FB.getLoginStatus().
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.3' // use version 2.3
});
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function fbLogout() {
FB.logout(function (response) {
//Do what ever you want here when logged out like reloading the page
window.location.reload();
});
}
</script>
<button id="fblogout" onclick="fbLogout();""><img src="src/logout_fb.png"> </button>
The error I retrieved from the Chrome console is "Uncaught ReferenceError: fbLogout is not defined"
Have you tried using the "Enable logout button" at the plugin page: https://developers.facebook.com/docs/plugins/login-button
That will give you a button like this:
<div
class="fb-login-button"
data-max-rows="1"
data-size="medium"
data-show-faces="false"
data-auto-logout-link="true" />
If you use that code, you will either see a Login or Logout button, depending on the state. This can be used with the normal FB SDK for Javascript.
Related
I have searched for this and the answers were VERY unclear and outdated.
So - I am using Facebook Javascript SDK to allow people to log in and out of my site. When they log out, I want them to be able to stay logged in to Facebook.
I am using standard code:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '#######',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.2' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', {fields: 'name,email'}, function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + 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.
-->
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
PERFECT! I figured it out on my own. The answer is two part. You need to revoke access. You do this like this in your javascript:
function logoutFacebook()
{
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api('/'+uid+'/permissions', 'delete', function(response){});
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
}
Then, you add a button to fire off that function:
<button id="logout" onclick="logoutFacebook()">Logout</button>
when Try to login Facebook Canvas App only Developer can't login to App Show following Error
Invalid Scopes: read_friendlists. This message is only shown to
developers. Users of your app will ignore these permissions if
present. Please read the documentation for valid permissions at:
https://developers.facebook.com/docs/facebook-login/permissions
I use Following code inside index.php file and bottom of the code
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo APP_ID;?>',
xfbml : true,
version : 'v2.3'
});
function onLogin(response) {
if (response.status == 'connected') {
FB.api('/me?fields=first_name', function(data) {
var welcomeBlock = document.getElementById('fb-welcome');
welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
});
}
}
FB.getLoginStatus(function(response) {
// Check login status on load, and if the user is
// already logged in, go directly to the welcome message.
if (response.status == 'connected') {
onLogin(response);
} else {
// Otherwise, show Login dialog first.
FB.login(function(response) {
onLogin(response);
}, {scope: 'user_friends,email,read_friendlists'});
}
});
FB.Canvas.setAutoGrow();
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
This happen on 6th of may 2015, before that it works fine..
Check this link and check your api version.
https://developers.facebook.com/docs/facebook-login/permissions/v2.3
As per this link
"If you want to access a person's friends who also use your app, you should use the user_friends permission.
This permission will also not help you invite a person's friends to use your app. To learn more about how to invite friends to an app, please see our FAQs.
This permission also does not give the list of friends who are part of a friendlist. It only gives access to the names of the lists.
This permission was called read_friendlists before v2.3.
Review
If your app requests this permission Facebook will have to review how your app uses it."
So I found a tutorial on Facebook Login Integration at: http://www.excellencemagentoblog.com/facebook-login-integration-website
I followed it step by step and Google Chromes Developer Tools give me an error after clicking Facebook Login saying:
Uncaught TypeError: object is not a function index.php:53
onclick
The button html is like this:
<a class="btn btn-success" href='#' onclick='login();'>
<i class="icon-facebook"></i>
Facebook Login
</a>
The script is as follows, I really can't tell what is wrong because the function is defined within the script.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : ' 163289720517425', // App ID
channelURL : '', // Channel File, not required so leave empty
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : false // parse XFBML
});
};
// logs the user in the application and facebook
function login(){
FB.getLoginStatus(function(r){
if(r.status === 'connected'){
window.location.href = 'php/fbconnect.php';
}else{
FB.login(function(response) {
if(response.authResponse) {
//if (response.perms)
window.location.href = 'php/fbconnect.php';
} else {
// user is not logged in
}
},{scope:'email'}); // which data to access from user profile
}
});
}
// Load the SDK Asynchronously
(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);
}());
</script>
Not too sure of the problem you're having here....cuz even when I boiled it down to just the function with an alert....it still didn't work???? Meaning it had nothing to do with facebook.
Anyways....this is how I would do it....
You're doing a cross domain request...so you have to register your domain....
Also....FB provides a javascript SDK, so no need to use both PHP and Javascript as you were trying...
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '163289720517425', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms!!
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
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
$('.btn-success').click(login);
};
// 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'));
function login(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});}
I'm trying to develop a Windows 8 app and I want to integrate Facebook in it.
I know this can be done without their SDK, but I've seen it can also be done with it and I'd love to go for the SDK.
I have the all.js file downloaded and referenced.
I included the initialization code in default.html:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '*******', // App ID from the app dashboard
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
};
</script>
I'm trying to login using FB.login() when a button is pressed, but it's not working because
FB.getLoginStatus(function (response) {
console.log("entered")
if (response.status === 'connected') {
console.log("connected");
} else {
console.log("connecting");
FB.login(function (response) {
if (response.authResponse) {
console.log("connected");
} else {
console.log("canceled");
}
});
}
});
However, nothing happens when I click the button I attached this function to.
What can it be?
Any help is appreciated,
thanks!
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
alert("hh");
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '197393374008468',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.7' // use version 2.2
});
// Now that we've initialized the SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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 = "https://connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
My App on Facebook uses the JavaScript SDK. When a user navigates to my app page and goes to my app, a popup asks them to authorize the app. This works well.
However, if they authorize the app, then return to it later, another pop-up (which i believe to be another authorization window) will quickly open then close.
What is my code is doing this? Code is below.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '221953271200525', // App ID
channelURL : '//www.vidjahgames.com/fall/channel.html', // 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
});
// Additional initialization code here
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
};
// 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 makes the popup appear, so you should first know if the user is logged in and if not make the login popup appear:
FB.getLoginStatus(function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
FB.api('/me', function(response) {
_userName = response.name;
alert("hello"+_userName);
}.bind(this));
} else {
FB.login(function(response) {
// the rest of your code here...
}
}
});