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
Related
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 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.
I was using Facebook login without a problem.. But mysteriously the next error started to appear in the firebug console, and now I am unable to login.
(new Date).addMonths is not a function
FB.provide('',{getLoginStatus:function...signed_request,code'});return a;}}});
I'm using the Javascript SDK.
<div id='fb-root'></div>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : '205160466168923', // App ID
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
});
//channelUrl : '//www.clasesd.com/channel.html', // Channel File
// 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#**oauth=1**&appId=205160466168923&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
//]]>
</script>
And this is what I use to trigger the login
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
window.location = redirect_url;
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email, offline_access, publish_stream, user_events'});
});
Known issue, see http://developers.facebook.com/bugs/149848578458727
As stated in the comments on that issues, this is a work around:
Place the following code before you call FB.init()
Date.prototype.addMonths = function(n) {
this.setMonth(this.getMonth()+n);
return this;
}
<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