|
Hi Suman,
It is the way suggested by Facebook, of course it is a security threat.
S Ravi Kumar
|
|
|
|
|
This article was very good. and current. The big problem is stupid facebook keeps changing their interface so this tutorial (unless constantly updated every other month) is eventually going to have different screenshots than the real site
Anyways I just wanted to add some advice to people who (like me) wanted to populate ASP.NET SERVER SIDE controls, and not just fill a few <span> tags:
in the LoadValues Function, change it to look like this...
<pre lang="Javascript">
//This method will load the values to the labels
function LoadValues(me) {
if (me.name) {
document.getElementById('displayname').innerHTML = me.name;
document.getElementById('FBId').innerHTML = me.id;
document.getElementById('DisplayEmail').innerHTML = me.email;
document.getElementById('Gender').innerHTML = me.gender;
document.getElementById('DOB').innerHTML = me.birthday;
document.getElementById('auth-loggedin').style.display = 'block';
//the difference begins here. I added 3 ASP.NEt controls.
//I also commented out the clicking of a button
//THE CONTROLS CAN ONLY BE A TEXTBOX OR an <asp:Hidden> FIELD!!!!!!!
//NO LABELS OR ANYTHING ELSE!!!!!
//you can set the textbox style="display:none" or width="0"
document.getElementById("txtFbName").value = me.name;
document.getElementById("txtFbID").value = me.id;
document.getElementById("txtFbEmail").value = me.email;
//If you want it to automatically click an ASP.NET button
//on login, you use this (obviously you uncomment it though).
// document.getElementById("btnDummy").click();
//difference ends here
}
}
</pre>
then on the same page but inside your ASP.NET <form> tags, make your ASP.NET controls but make sure their CLIENT ID IS STATIC. this prevents asp.net from changing the name of the control to
ctl_00txtFbName
or whatever. Just be careful because this means if you have ANY OTHER elements that ARENT asp.net, you need to make sure they don't have the same name.
<pre lang="HTML">
You are currently logged in as: <asp:TextBox ID="txtFbName" runat="server" ClientIDMode="Static"></asp:TextBox> <br />
Your FacebookID is: <asp:TextBox ID="txtFbID" runat="server" ClientIDMode="Static"></asp:TextBox> <br />
Your email is: <asp:TextBox ID="txtFbEmail" runat="server" ClientIDMode="Static"></asp:TextBox> <br />
</pre>
now if you want a button to get clicked on login, you need to add the button to the ASPX page BUT put it in an update panel:
<pre lang="HTML">
<asp:UpdatePanel ID="updaterix" runat="server">
<ContentTemplate>
<asp:Button ID="btnAddReplyInFB" runat="server"
ClientIDMode="Static" onclick="btnTestGo_Click"
Text="Add Reply in FB" style="display: none;" />
</ContentTemplate>
</asp:UpdatePanel>
</pre>
notice the style="display:none;" on the button. this is going to be an INVISIBLE button that gets clicked on FB login. You can add whatever button click code to this in the C# / VB net code click event.
lastly, I was noticing that the code was executing on both LOGIN and LOGOUT, so I changed this method:
<pre lang="Javascript">
// This method will be called after the user login into facebook.
function OnLogin(response) {
if (response.authResponse) {
FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
}
}
</pre>
To This Method:
<pre lang="Javascript">
//I changed the method name so I don't actually
//replace the method in case I need to
//revert back. you can do whaterver you want
function getLoginStatus(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;
//show whatever controls you need to show
//now that the user has successfully logged in!
document.getElementById("btnAddReplyInFB").style.display = 'block';
document.getElementById("pnlReplyPanel").style.display = 'block';
FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
//hide reply button for facebok users
document.getElementById("btnAddReplyInFB").style.display = 'none';
document.getElementById("pnlReplyPanel").style.display = 'none';
} else {
// the user isn't logged in to Facebook.
//hide reply button for facebok users
document.getElementById("btnAddReplyInFB").style.display = 'none';
document.getElementById("pnlReplyPanel").style.display = 'none';
}
};
</pre>
obviously if you change the method so you dont delete the old method, you need to change
//old method
FB.Event.subscribe('auth.statusChange', OnLogin);
to
//new mthod
FB.Event.subscribe('auth.statusChange', getLoginStatus);
This is still a work in progress for me, but all of that should work so far I Think. I havent actually tested that last "else" condition in the code block above yet. but everything else is working fine for me.
I hope this helps someone because it took me a while to figure out.
one final thought YOU CANT TEST THIS ON LOCALHOST! I know this is answered like 10 times in the other commentso n this page but it keeps coming up. YOU CAN ONLY GET FB USER INFO WHEN YOU TEST IT ON A LIVE SERVER!
Thanks.
Hopefully you'll be able to see this in my site live in my site
http://www.WhoPostsThisStuff.com
some time after january 2013
It's not a bug it's a f- oh wait... no..It's a bug.
|
|
|
|
|
hi roger_27,
i test your code and it work very well but i have problem with master page.
i can't access to the control like this
document.getElementById("txtFbName").value = me.name;
do you have a solution?
tanks,
Gianluca
|
|
|
|
|
it sounds like you didnt put
ClientIDMode = "Static"
for the textbox property.
document.getElementById("ASP.NETCONTROLNAME").value = me.name;
will ALWAYS WORK if you have clientIDMode set to static. masterpages or not.
please take a look at the instructions again and read the text between the code
from there you test the control. does
document.getElementById("ASP.NETCONTROLNAME").value = "wow";
work?
is so then the problem might be with the FB getting.
It's not a bug it's a f- oh wait... no..It's a bug.
|
|
|
|
|
I have undestand why it don't work with my application.
I'm using asp.net 2.0 and ClientIDMode = "Static" is a framework 4.0 function ))
I must still use this framework.
Do you have an idea for bypass this problem?
Tanks
|
|
|
|
|
I'm pretty sure you already figured it out. but if you can't get the STATIC ID from code, you have to RUN your application, then do EDIT -> VIEW SOURCE, look for that particular control, and it will give you the client ID of the control. should be something like
ctl_001_txtName
or something wierd like that
when using master pages, or custom user controls for the that matter, the controls get a special name so that they are unique. in previous versions of .NET you had to "go get" the name yourself by "View Source".
Hope this helps.
It's not a bug it's a f- oh wait... no..It's a bug.
|
|
|
|
|
What I usually do is for each asp.net control I use with Master pages, I add tag
ClientIDMode="Static" to
<asp:textbox id="txtFbName" clientidmode="Static" etc,="" etc.
this="" forces="" an="" like="" txtmyname="" to="" stay="" that="" way,="" instead="" of="" ctl$100="" junk="" in="" front="" control="" name.
otherwise="" you="" have="" use=""
document.getelementbyid('<%="txtFbName.ClientID" %="">').value = me.name;
Tom Psillas
|
|
|
|
|
As promised, giving five for scope parameter explanation
|
|
|
|
|
Hi there,
I am new about this article. I download the code and edit it to change app id. Then i run it to see result. I click the Login with facebook and opens a popup to login. i wreate my mail and password and click login. After popup closed i can not see the result in a div which's id is "auth-loggedin"
What is the problem i can not understand. Can anyone help me? And here is all of my code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPFBIntegration.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>ASP.Net Facebook Integration</title>
<script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="scripts/all.js" type="text/javascript"></script>
<script type="text/javascript">
$("document").ready(function () {
FB.init({
appId: '122121467946612',
channelUrl: '//' + window.location.hostname + '/channel',
scope: 'id,name,gender,user_birthday,email',
status: true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('auth.statusChange', OnLogin);
});
function OnLogin(response) {
if (response.authResponse) {
FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
}
}
function LoadValues(me) {
if (me.name) {
document.getElementById('displayname').innerHTML = me.name;
document.getElementById('FBId').innerHTML = me.id;
document.getElementById('DisplayEmail').innerHTML = me.email;
document.getElementById('Gender').innerHTML = me.gender;
document.getElementById('DOB').innerHTML = me.birthday;
document.getElementById('auth-loggedin').style.display = 'block';
}
}
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="fb-login-button" autologoutlink="true" scope="user_birthday,email" >
Login with Facebook
</div>
<div id="auth-status">
<div id="auth-loggedin" style="display: none">
Hi, <span id="displayname"></span><br/>
Your Facebook ID : <span id="FBId"></span><br/>
Your Email : <span id="DisplayEmail"></span><br/>
Your Sex:, <span id="Gender"></span><br/>
Your Date of Birth :, <span id="DOB"></span><br/>
</div>
</div>
</body>
</html>
|
|
|
|
|
Hi,
Have you set your return URL (you teat App URL) in the Facebook App web site. If not then please refer to the article for doing the same. Rest of your code seems fine.
Thanks
S Ravi Kumar
|
|
|
|
|
Nice article.. But Fb.event.subscribe event not fire... so unable to get facebook information like id,name,dob... Do you know the reason? thanks!!
|
|
|
|
|
The primary reason for Fb.Event.Subscribe doesn't work is that your FB Javascript Library is not being loaded, you will have to directly download the JS SDK from facebook site on your local machine and then reference it from there or if you are working in a secured environment the use the https link.
Let me know if you still face any issues.
Thanks
S Ravi Kumar
|
|
|
|
|
Thanks Ravikumar..
FB javascript library loaded correctly.. FB.Event.Subscribe('auth.login') doesn't work.. past one week i am facing this issue... Yesterday only i find the solution. The exact reason is I never set Site url into my facebook application settings... I was read lot of articles regarding this issue. But no body tells this point.. If we set our domain name into the site url field then all the events working perfectly..
Thanks & Regards
Safiyullah
|
|
|
|
|
Hi Safiyullah,
I am glad that your problem is solved. Altough ff you read the step no 4 of above article, it's clearly mentioned that you need to register your website in order to get values from Facebook.
Thanks
S Ravi Kumar
|
|
|
|
|
Thanks Ravi. Yes, I have seen.. You clearly explain that point.
Can you inbox me your mail-id for future. (safiyullah.mhd@gmail.com)
Regards
Safiyullah
|
|
|
|
|
Hi RaviKumar,
As you mentioned your article FB Login button and FB Like button works perfectly in firefox and chrome. But IE8 having problem in login authentication popup. When we click login button in IE8 the authentication popup window openend, after we click login in popup window its throw the below error.
Please let me know if you have any solution.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
Timestamp: Tue, 18 Sep 2012 04:37:47 UTC
Message: 'closed' is null or not an object
Line: 1
Char: 784
Code: 0
URI: https://www.facebook.com/plugins/close_popup.php?reload=https%3A%2F%2Fwww.facebook.com%2Fplugins%2Flogin_button.php%3Fapi_key%3D182435891891124%26auto_logout_link%3Dtrue%26channel%3Dhttp%253A%252F%252Fstatic.ak.facebook.com%252Fconnect%252Fxd_arbiter.php%253Fversion%253D11%2523cb%253Df3dfc14eb8962b8%2526origin%253Dhttp%25253A%25252F%25252Flocalhost%25252Ff2d56a5c19f6774%2526domain%253Dlocalhost%2526relation%253Dparent.parent%26locale%3Den_US%26login_text%3DLogin%2Bwith%2BFacebook%2B%26scope%3Duser_birthday%252Cemail%26sdk%3Djoey%26ret%3Dperms%26hash%3DAQDonIMY4vUvZS0f&perms=user_birthday%2Cemail&selected_profiles=100001481973936
Thanks & Regards
Safiyullah
|
|
|
|
|
Hi Safiyullah,
I tried this on my local as well as a few other machine, This works fine there, can you share the code where you are getting this issue if possible.
Thanks
Ravi
|
|
|
|
|
Thanks RaviKumar,
Here i have mentioned my test page.. with like button.. when i click like button it works in firfox and chrome.. but ie throws some errors.. Please let me know what should i do?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FBLikeTest.aspx.cs" Inherits="FBLikeTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ASP.Net Facebook Integration</title>
<script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="scripts/all.js" type="text/javascript"></script>
<script type="text/javascript">
$("document").ready(function () {
FB.init({
appId: '182435891891124',
channelUrl: '//' + window.location.hostname + '/channel',
scope: 'id,name,gender,user_birthday,email',
status: true,
cookie: true,
xfbml: true
});
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
console.log('connected');
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
var rdurl = 'https://www.facebook.com/logout.php?next=' + document.URL + '&access_token=' + response.authResponse.accessToken;
window.location = rdurl;
}
});
FB.Event.subscribe('edge.create', function (response) {
console.log('edge.create');
});
});
</script>
</head>
<body>
<div id="fb-root">
</div>
<fb:like href="https://www.facebook.com/accesshealthcareindia" send="false" width="450"
show_faces="false">
</fb:like>
</body>
</html>
Thanks & Regards
Safiyullah
|
|
|
|
|
Hi Safiyullah,
The same code is working fine on all the browsers in my pc, seems like your IE version is outdated please check the same.
Thanks
S Ravi Kumar
|
|
|
|
|
I have the same problem.
Can you please specify what should be entered in "Site URL" (print screens are too small, i can't see clear enough)
- full path from which login is called (www.mysite.com/facebook/Login.aspx)
- only domain/folder (www.mysite.com/facebook) or
- just domain (www.mysite.com)
?
Can it be tested on localhost? (Cassini)
or it should be deployed on onlie server?
FB icon is working OK Login/Logout, but no data is displayed,
i tried adding alerts for debugging purpose, and no action was fired in "OnLogin"
Thank you.
|
|
|
|
|
In site URL you will have to write the path of return URL i.e. full path from which login is called. Yes this can be tested in localhost provided you system is connected to internet. I myself tested the code first time that way only.
Don't try this on chrome browser as it has some issues, I came to know about that later on.
Regards
S Ravi Kumar
|
|
|
|
|
Good article.
Ill give 5 if you explain the "scope" parameter in facebook call.
|
|
|
|
|
The scope parameter is used for access to the details we want back from facebook, which includes user details, user friends details etc you can refer to second referance link given in the article.
|
|
|
|
|
|