任何人都可以给我一个最好的示例网站网址,使用facebook connect或facebook注册到我的网站或用asp.net网站登录facebook?
实际上我的要求是,当我在那时使用facebook注册到我的asp.net网站时,我们想要从facebook获得facebook用户的用户名(emailid),并且使用用户图像获得名字和姓氏。
答案 0 :(得分:6)
使用facebook javascript SDK因为使用javascript SDK你可以轻松地在facebook上做任何事情。 我给你一些代码示例来做这个
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root">
</div>
<script type="text/javascript">
FB.init({
appId: '012341352533212',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
channelUrl: 'http://www.xyz.com/channel.html', // channel.html file
oauth: true // enable OAuth 2.0
});
</script>
此代码调用您的Facebook应用程序
<script type="text/javascript">
function facebookLogin() {
FB.login(function (response) {
if (response.authResponse) {
FB.api('/me', function (response) {
jQuery('#txtFirstName').val(response.first_name);
jQuery('#txtLastName').val(response.last_name);
jQuery('#txtEmail').val(response.email);
jQuery('#hdfUID').val(response.id);
// FB.logout(function (response) {
// });
});
} else {
jQuery('#txtFirstName').val('');
jQuery('#txtLastName').val('');
jQuery('#txtEmail').val('');
jQuery('#hdfUID').val('');
}
}, { scope: 'email' });
return false;
}
</script>
这个代码调用facebook的登录页面,它回复用户ID,名字。特定用户的姓氏和电子邮件,并使用jquery将这些值保存在文本框或隐藏字段中,并在服务器端代码页上获取这些值。
答案 1 :(得分:4)
在这里,我将为此逐步编写程序。
写下您所需应用程序的名称,如登录,测试等,您可以从下面的屏幕截图中看到它
填写必要的文本框值,请参阅屏幕截图, 现在你完成了在开发者帐户上创建登录应用程序的步骤,打开visual studio并在visual studio中创建一个asp.net扩展名为aspx的页面。
将javascript代码复制并粘贴到您网页的主页部分。
<script>
// 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));
// Init the SDK upon load
window.fbAsyncInit = function () {
FB.init({
appId: '155578484623690', // Write your own application id
channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
scope: 'id,name,gender,user_birthday,email',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function (response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";
FB.api('/me', function (me) {
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
document.getElementById('Email').innerHTML = me.email;
document.getElementById('BD').innerHTML = me.birthday;
document.getElementById('profileImg').src = uid;
document.getElementById('Gender').innerHTML = me.gender;
}
})
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedin').style.display = 'block';
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
document.getElementById('auth-loggedin').style.display = 'none';
}
});
$("#auth-logoutlink").click(function () { FB.logout(function () { window.location.reload(); }); });
}
</script>
在html页面的正文部分中的html下面复制并粘贴
<div style="height: 500px; margin-left: 23px;">
<h1>
Facebook Login Authentication Example</h1>
<div id="auth-status">
<div id="auth-loggedout">
<div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">
Login with Facebook</div>
</div>
<div id="auth-loggedin" style="display: none">
Hi, <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>)
<br />
Email: <span id="Email"></span><br/> Ammar's Birthday <span id="BD"></span><br/>
Gender :<span id="Gender"></span><br/>
<br />
Profile Image:
<img id="profileImg" />
</div>
</div>
</div>
现在运行您的asp.net页面,您将获得所需的信息。 在这里,我有显示名称,生日,电子邮件地址,性别和图像
查看最终屏幕截图并以自己的方式享受:)
答案 2 :(得分:0)
您可能希望在此处查找能够满足您需求的开源项目:
http://www.codeplex.com/site/search?query=facebook%20api&ac=3
答案 3 :(得分:0)
您可以使用网页上的Javascript SDK执行此操作。
以下解决方案使用此处提供的xocialCore插件。实际上,你可以从这个插件中提取前两个函数,因为它们为此提供了必要的功能。
https://github.com/xocialhost/jquery.xocialCore.js/blob/master/jquery.xocialCore.js
首先,您需要创建和配置Facebook应用程序。请务必使用您的网址/域名填写网站信息。
在您的注册页面上确保您已包含jQuery,然后包含上述插件。
在页面上创建一个按钮,如:
<button id="fbLoginButton">Login</button>
然后实现以下代码:
$.xcInitFacebook({appId:'yourFBappId',callback:function(){
$('#fbLoginButton').click(function(event){
event.preventDefault();
$.xcFbLogin({permissions:'manage_pages, offline_access, email',callback:function(){
FB.getLoginStatus(function(response) {
var fbUrl='https://graph.facebook.com/'+response.authResponse.userID+
'?fields=email,first_name,last_name,picture'+
'&access_token='+response.authResponse.accessToken;
$.getJSON(fbUrl,function(data){
//Pass the return data information to your Registration/Login system
});
});
} });
});
} });
Facebook服务器的响应应该是:
{
"email": "emailid\u0040domain.com",
"first_name": "fName",
"last_name": "lName",
"id": "12345",
"picture": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/49860_12345_8441_q.jpg"
}
你显然想要更进一步,你要检查用户是否已经登录,然后显示登录按钮,但这应该可以获得所请求的用户信息。