I am add login button as shown below,but something go wrong. First two times I get facebook login window,but then something fails. When login window starts open it closed.When I step by step trace functions invoking I find thet onConnect() function is not invoking.Any ideas?
my View:
<script type="text/javascript">
$(document).ready(function () {
if (document.getElementById('fb-root') != undefined) {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
});
window.fbAsyncInit = function () {
FB.init({ appId: '455724271129246', status: true, cookie: false, xfbml: true, oauth: true });
};
function onConnect() {
FB.getLoginStatus(function (response) {
if (response.session) {
window.location = "../LogOn/FbLogin?token=" + response.session.access_token;
} else {
// if user cancel
}
});
};
</script>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<fb:login-button perms="email,user_checkins"
onlogin="onConnect();" autologoutlink="false">
</fb:login-button>
</body>
my controller:
public ActionResult FbLogin(string token)
{
WebClient client = new WebClient();
string JsonResult = client.DownloadString(string.Concat("https://graph.facebook.com/me?access_token=", token));
JObject jsonUserInfo = JObject.Parse(JsonResult);
UInt64 facebook_userID = jsonUserInfo.Value<UInt64>("id");
string username = jsonUserInfo.Value<string>("username");
string email = jsonUserInfo.Value<string>("email");
ViewData["email"] = email;
return View();
}
Try adding a subscribe event:
FB.Event.subscribe('auth.login', function (response) {
//do whatever
login();
// or onConnect();
});
FB.Event.subscribe('auth.logout', function (response) {
//do whatever
logout();
});
Related
I would like to login to my website by facebook connect but I have problem with facebook connect BUTTON. When I click in this button, i'm login but then the page is multi-refresh.
This is my code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxyyyxxxx',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
window.top.location = 'http://mystite.pl/login.php?mode=fb_login';
}
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/pl_PL/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Where is problem?
As far as I am concerned, there is a page refresh after logging in to fb via js sdk (not 100% sure).
And you have there another refresh
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
window.top.location = 'http://mystite.pl/login.php?mode=fb_login';
}
});
window.fbAsyncInit = function () {
FB.init({
appId: '#',
status: true,
cookie: true,
xfbml: true,
oauth: true
})
FB.getLoginStatus(function (response) {
if(response.status === 'connected') {
var uid = response.authResponse.userID;
alert(uid);
FB.api('/' + uid, {
fields: 'name,email,id,picture'
}, function (result) {
//Code
})
}
})
FB.Event.subscribe('auth.login', function (response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function (response) {
logout();
});
FB.getLoginStatus(function (response) {
if(response.session) {
// logged in and connected user, someone you know
login();
}
});
};
function login() {
FB.getLoginStatus(function (response) {
if(response.status === 'connected') {
var uid = response.authResponse.userID;
// alert(uid);
FB.api('/' + uid, {
fields: 'name,email,id,picture'
}, function (result) {
//code
})
}
})
}
function logout() {
//code
}
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_GB/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
I use the <div class="fb-login-button">Sign in with Facebook</div> for the login button to appear.
I have put this script in a JS file and i'm using it on my JSP.
I get a login authentication screen in firefox and chrome, but somehow the button doesn't show in IE 7,8,9
Idk if this is your problem or not, but you might try adding:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
To your html document
An explanation here:
http://www.zolton.org/2011/04/facebook-fbml-tags-fail-to-load-in-ie/
Can anyone help me with this code and tell me what is wrong?
My code is not working anymore with the new Facebook API and I am getting the below errors!
Uncaught Error: OAuth2 specification states that 'perms' should now be called
'scope'. Please update.
Error is in http://connect.facebook.net/en_US/all.js line 23
And even if I changed it, it still does not work at all!
//THIS FUNCTION WILL INITIALIZE THE FACEBOOK API AND WILL ADD NEW FACEBOOK ACCOUNTS.
var apikey = $("#apikey").val();
//var tuittingID = $("#tuittingID").val();
FB.init({ apiKey: apikey, status : true, cookie : true, oauth: true });
FB.getLoginStatus(handleSessionResponse);
$('#FBlogin').live('click', function() {
FB.login(handleSessionResponse, {
scope:'manage_pages, publish_stream, offline_access, user_status,
read_insights'
});
return false;
});
function handleSessionResponse(response) {
if (!response.session || String(response.scope) == '') {
return;
}
else
var tuittingID = $.cookie("tuittingID");
$('#AccessToken').val(response.session.access_token);
$("#loader").show();
$.post("tuitting/facebook_lib/fbadd.php",
{ tuittingID: tuittingID, uid: FB.getSession().uid, usid:
FB.getSession().session_key, accesstoken: response.session.access_token },
function(data){
reloadAccounts();
$("#loader").hide();
FB.logout(function(response) {
}); //END LOGOUT FROM FACEBOOK AFTER SUCCESSFULL ACTION
}
); //END AJAX POST FUNCTION DATA
}
Did you make the changes needed to support Oauth 2? it's been mandatory since Oct 1st but the SDKs were only forced onto Oauth 2 yesterday (December 13 2012)
See https://developers.facebook.com/docs/oauth2-https-migration/ - there's a summary of what changed and links to the announcing blog posts - the authentication and javascript docs are the docs you're most likely to need to check if you're making changes as this is where the changes were
We were also affected by this change and we made the following changes to make it work.
FB.init() was required as coded below with oauth set as true.
FB.init({
appId: 1234567890123,
oauth: true
})
And now there is no more session, response.session becomes response.authResponse and response.session.uid becomes response.authResponse.userID
FB.login(function(response) {
if (response.authResponse) {
var postData = {
FBID: response.authResponse.userID,
Access_Token: response.authResponse.accessToken
};
Link with additional information on js changes required
https://developers.facebook.com/blog/post/525/
Also make sure you're using FB.getAuthResponse() instead of FB.getSession().
http://developers.facebook.com/docs/reference/javascript/FB.getAuthResponse/
http://developers.facebook.com/blog/post/525/
This is the Oauth 1.0 code:
html
<div id="fb-root"></div>
<div class="fb-login-button" scope="email,user_birthday"
onlogin="afterFacebookConnect();" autologoutlink="false">Login con Facebook</div>
javascript
window.fbAsyncInit = function () {
FB.init({
appId: 'id_of_app',
status: true,
cookie: true,
xfbml: true });
};
if (document.getElementById('fb-root') != undefined) {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/es_ES/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}
function afterFacebookConnect() {
FB.getLoginStatus(function (response) {
if (response.session) {
window.location = "/facebook/login?token=" + response.session.accessToken;
} else {
// user clicked Cancel
}
});
}
Changes I made to adapt to Oauth 2.0:
window.fbAsyncInit = function () {
FB.init({
appId: 'id_of_app',
status: true,
cookie: true,
xfbml: true,
oauth:true // additional parameter
});
};
function afterFacebookConnect() {
FB.getLoginStatus(function (response) {
if (response.authResponse) {
window.location = "/facebook/login?token="
+ response.authResponse.accessToken;
} else {
// user clicked Cancel
}
});
}
Additional: Here is the code that handles the response (ASP.NET MVC, C#):
using Newtonsoft.Json.Linq;
[RequireHttps]
public ActionResult login(string token)
{
WebClient client = new WebClient();
string JsonResult = client.DownloadString(string.Concat(
"https://graph.facebook.com/me?access_token=", token));
JObject jsonUserInfo = JObject.Parse(JsonResult);
string nombre = jsonUserInfo.Value<string>("first_name");
string segundo_apellido = jsonUserInfo.Value<string>("last_name");
string nombre_completo = jsonUserInfo.Value<string>("name");
string genero = jsonUserInfo.Value<string>("gender");
string email = jsonUserInfo.Value<string>("email");
string birthday = jsonUserInfo.Value<string>("birthday");
// here you do your logic to login the user
// otherwise you can send user to the registration
// form and fill in some data you received from facebook
}
I am using JavaScript API to create my app for Facebook. The problem is, it's returning
email = undefined.
I don't know why? And if I use Facebook login/logout button on my app then the alert shows correct email id of the user but I don't want to do that.
What am I missing?
Here is my code:
<p><fb:login-button autologoutlink="true" perms="user_about_me,email"></fb:login-button></p>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: '250180631699888', status: true, cookie: true,
xfbml: true
});
FB.getLoginStatus(function (response) {
if (response.session) {
greet();
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
function greet() {
FB.api('/me', function (response) {
alert('Welcome, ' + response.name + "!");
alert('Your email id is : '+ response.email);
});
}
</script>
// https://developers.facebook.com/docs/javascript/reference/FB.api/
// v2.4
FB.api('/me', { locale: 'en_US', fields: 'name, email' },
function(response) {
console.log(response.email);
}
);
here is example how i retrieve user name and e-mail:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
$(function() {
FB.init({
appId : 'APP_ID',
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') {
getCurrentUserInfo(response)
} else {
FB.login(function(response) {
if (response.authResponse){
getCurrentUserInfo(response)
} else {
console.log('Auth cancelled.')
}
}, { scope: 'email' });
}
});
function getCurrentUserInfo() {
FB.api('/me', function(userInfo) {
console.log(userInfo.name + ': ' + userInfo.email);
});
}
});
</script>
According to the latest info on the facebook page you should use 'scope' instead of perms.
https://developers.facebook.com/docs/reference/javascript/FB.login/
If you visit
https://developers.facebook.com/tools/console/
and use the fb-api -> user-info example as a starting point, then logout and back in again, it should ask you for email perms and you can see your email being printed. It is done using response.email as you mention in your post.
<button id="fb-login">Login & Permissions</button>
<script>
document.getElementById('fb-login').onclick = function() {
var cb = function(response) {
Log.info('FB.login callback', response);
if (response.status === 'connected') {
Log.info('User logged in');
} else {
Log.info('User is logged out');
}
};
FB.login(cb, { scope: 'email' });
};
</script>
Use this to for extra permission
for more details visit :
https://www.fbrell.com/examples/
In this code i have get user data form facebook and store into my database using ajax
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me?fields=email,name,first_name,last_name', function(response)
{
FB.api(
"/"+response.id+"/picture?height=100",
function (responses) {
//console.log(responses.data.url)
response['profile_pic']=responses.data.url;
$.ajax({
type:"POST",
url:'<?php echo base_url(); ?>'+'home/facebook_get_signup',
data:response,
success:function(res)
{
if(res=='success')
{
window.location='<?php echo base_url(); ?>';
}
if(res=='exists')
{
window.location='<?php echo base_url(); ?>';
}
}
});
}
)
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
// handle the response
}, {scope: 'email,user_likes'});
There are a couple of things wrong with your solution. First of all you are using the old authentication scheme. You should use the new one described here :
https://developers.facebook.com/docs/reference/javascript/
You need to add the oauth:true to your init function, and make sure that your getLoginStatus looks for the new type of response.
When that is said you need to make sure you have the right permissions to see the users e-mail. You can see the required permissions here:
http://developers.facebook.com/docs/reference/api/user/
You get those by using the FB.login function as described by TommyBs in another answer.
Once you have those options you can use the FB.api function to get the e-mail.
My FB.ui stream.share and stream.publish work perfectly but when I call the Callback funcion, it always returns as error, even though the story is published on my Facebook profile.
[script] <div id="fb-root<?php the_ID();?>"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '151136734905815', status: true, cookie: true, xfbml: true});
};
(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<?php the_ID();?>').appendChild(e);
}());
function fb_share (url, title){
var share = {
method: 'stream.share',
display: 'dialog',
u: url,
t: title
};
FB.ui(share, function(response) {
if (response && response.post_id) {
alert(response.post_id);
} else {
alert('Error: Post was not published due to some error. Please try again later.');
}
});
}
</script>[/script]
It always returns Error: Post was not published due to some error. Please try again later. even though the story is in facebook successfully. Any help on this?
$('#share').bind('click', function(e){
var share = {
method: 'stream.share',
u: 'http://your/share/url/with/id/123'
};
FB.ui(share, function(){
$.post("/log_shares.php", {"id": 123});
});
e.preventDefault();
});