I'm trying to use the Facebook login help guide to put together a script to check whether a user is logged in. I've put together the following based on this guide.
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '303594953085775', // App ID
channelUrl : 'http://mysite.com/pages/account/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
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// 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>
I have no idea what I've done wrong as I copied it exactly. I've copied it four times over and it's still getting errors despite it being exactly what was written on the Facebook site.
I get two errors:
Uncaught SyntaxError: Unexpected token }
Uncaught SyntaxError: Unexpected token .
I don't really know anything about this kind of complex JavaScript as I only know how to do a few basic calls and stuff, this is currently making me want to throw myself off a building.
Can anyone tell me why it's erroring? Is there somewhere I can just get hold of the entire correct script and replace my app ID and domain rather than having to go through this silly Facebook guide?
there exist a syntax error in your code:
window.fbAsyncInit = function() {
FB.init({
appId : '303594953085775', // App ID
channelUrl : 'http://mysite.com/pages/account/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
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
}; **// REMOVE THIS- This one is extra**
You can use Notepad++ or any other good editor to avoid such errors :)
I had this same problem which was caused by copy and pasting the code directly, which somehow put some strange characters in there. I fixed it by physically re-writing it, as opposed to direct copy and paste.
Related
I create a app that use login on Facebook, but I can not capture the user's email address, I know I need to use scope, but do not know how. How can I do this?
This is my code:
window.fbAsyncInit = function() {
FB.init({
appId : '<?= $this->getAppId(); ?>', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.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
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login()
} else {
FB.login()
}
});
}
// 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 + '.');
console.log( response.email);
});
}
You pass in any additional permissions you want as an argument (comma-separated for multiple permissions) to FB.login(). IN your case, you want email:
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
The FB JS SDK Documentation very clearly explains this. Please take the time to read it.
I resolved the problem, when use FB.Event.subscribe, we need put the permissions in html and not in FB.login() function, using this way:
fb:login-button show-faces="true" perms="email,user_birthday" width="200" max-rows="1
Thanks
I am trying to incorporate the facebook login button into my website's homepage. I have connected it with an app, so i have the app id and secret, if the user is already registered.
I have used the JavaScript SDK from facebook but when I press the facebook's login button, after the authorization, nothing happens and my website's homepage is shown again. Does anyone know how to get the user's email from the Javascript SDK? I want to redirect to another page after login, but after login it stays on that page only.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
{
FB.init({
appId : '178124332351909', // App ID
channelUrl : '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
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
alert("connected");
testAPI();
}
else if (response.status === 'not_authorized')
{
alert("nt connected");
FB.login();
}
else
{
alert("else");
FB.login();
}
});
};
// 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()
{
alert("in testapi");
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response)
{
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
Reference : Add the login code
Please help how to redirect to another page.
For asking the permission for email, replace Fb.login()with:
FB.login(function(response)
{
if(response.status == 'connected'){
alert('I am connected')
}
},{scope: 'email'});
For redirecting the user to other page after successful login, simply write the redirection code in the testAPI() function:
function testAPI()
{
alert("in testapi");
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response)
{
console.log('Good to see you, ' + response.name + '.');
});
window.location="http://www.newlocation.com"; // HERE
}
There could be 1 reason:
when you click on the login button>> it tries to open the pop- up window>> if "allow pop up is blocked">> then it will just refresh the page, and user will think that nothing is happening.
If you want to get users email then you can pass it as a "perms" parameter something like this.
<div class="fb-login-button" onclick="fbLoginClick();" perms="email"><div>
I want to create a login system that can also use FB's login. So I've setup the FB object and SDK in my page and then subscribed to the auth.authResponseChange event and added an anonymous function to do stuff if I'm logged, not logged or not authorized.
When I'm logged it works properly. When I'm not logged or not authorized, it does nothing. I think it just doesn't enter into the anonymous function either, because I've put a console.log() before the if and it does nothing.
Here's my code:
// Facebook stuff
window.fbAsyncInit = function()
{
FB.init({
appId : 'my id blabla', // App ID
channelUrl : 'my channel.html bla bla', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
console.log("Running function");
if(response.status === "connected")
{
console.log("Connected and authorized");
}
else if (response.status === 'not_authorized')
{
console.log("Not authorized");
}
else
{
console.log("Not connected");
}
});
};
// 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));
I have the same problem, but for what it's worth if you subscribe to the event 'auth.statusChange' instead of 'authResponseChange' you can know if he is 'connected' to facebook and authorized your app or if he's connected to fb but not authorized.
Also if you use the FB.getLoginStatus, which facebook advise not to, you can know in what of the three states (connected, not_autorized or not_connected) the user is in.
I'm having a hard time getting the Facebook JS API to work as described in http://developers.facebook.com/docs/reference/javascript/
Specifically, the user seems to get asked to log in even if they are already logged in to Facebook. For this I'm doing the following:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3120012412', // App ID goes here
channelURL : '//WWW.qy.ORG/channel.php', // 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) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('Good to see you, ' + response.name + '.');
alert('response' + response);
FB.logout(function(response) {
alert('Logged out.');
});
});
} else {
alert('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>
I also tried:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
}
});
This also fails even when I'm already logged in to Facebook.
What should I do if I want the user to go through the minimum hassle, for just basic access to public information? I understand they have to authorize the basic access, but it shouldn't ask them repeatedly should it?
Your first code chunk is logging the user in, then immediately logging them out again - so you probably aren't logged in if you have been running this a few times. Remove the FB.logout block and try it again to see if it makes a difference.
Another thing to remember (and probably the reason your second example isnt working) is although you are logged into facebook.com, you have to be logged in to your own domain via FB.login. getLoginStatus will check for your fbsr_ cookie and consider you logged in if it is there, but you must already have the cookie, from calling FB.login first.
So I suggest using this:
// Additional initialization code here
FB.login(function(response) {
if (response.authResponse) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('Good to see you, ' + response.name + '.');
alert('response' + response);
});
} else {
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
$.ajax({
url: "http://example.com/fbconnect",
success: function(){
window.location.reload();
}
});
});
};
(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>
<div class="fb-login-button" data-perms="email,user_birthday,user_hometown,user_location">Login with Facebook</div>
It's working with only two cases.
1- when a user is NOT logged in and log in to facebook it triggers.
2- when a user is logged in but didn't authorize the app yet it triggers.
the third scenario which is not working is when a user is logged in and He is already authorized the app the FB.Event.subscribe('auth.login) won't trigger !!!
I encountered the same thing as you and I found a function, "getLoginStatus", that might be of interest for you.
When the user is already logged in and has granted your app all the permissions, then there is no need to log in again and therefore the event won't be triggered.
However, if the response of the "getLoginStatus" is "connected" you can do the stuff you want to do when the user is already logged in and has granted your app all the permissions.
The complete script might look something like this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPID', // App ID
channelUrl : 'CHANNEL_URL', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and connected to 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('/me', function(response) {
if (response.name != undefined ) {
console.log("Welcome, " + response.name);
}
});
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but not connected to the app
} else {
// the user isn't even logged in to Facebook.
}
});
// Additional initialization code here
};
// 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>
Got the exact same issue here and it's driving me nuts. Not liking the Facebook Javascript SDK atm.
It's really complex with the status check in FB.init() and makes it even harder when you put facebook comments on the page...
A workaround I just tested is to have your own login button and use the FB.login() method, there you can hook in to the callback (this replaces your code for the auth.login event).
window.fbAsyncInit = function () {
FB.init({
...
});
$('#fb-login-button-custom').show().click(function () {
var scopeList = $(this).data('scope');
FB.login(function (response) {
alert('FB.login callback');
console.log(response);
document.location.href = document.location.pathname + '?fblogin=1';
}, { scope: scopeList });
});
});
That default login event is actually only triggered when the user authorizes your application. So when loging out the user, you could revoke the authorization. But then every time they log in they have to 'allow' the app.
Using FB.Event.subscribe('auth.statusChange', handleStatusChange); will notify you status changes..
hope it helps