2011-09-03 128 views
27

我做了一些研究,我似乎无法完全不知道如何整合Facebook登录与您的网站。如何将Facebook登录与您的网站进行整合?

我试图做一个老式的php店,直到现在,不使用任何类型的登录,但只有一个会话,允许用户浏览页面和添加项目到购物车。

我在这里读到了stackoverflow,你需要一个数据库中的表来保存用户的邮件地址和facebook_id。那么在此之后,我可以与我的数据库中的其他表连接,以便为每个用户提供信息和更多信息?

是否有其他方法可以轻松地将您的网站与facebook &谷歌账户整合?我读了一些关于OpenID的内容,但并没有真正了解它的用途:)

所以这就是为什么我要求你们让我跟踪:)。我对此非常感兴趣,任何建议,最佳实践等都将不胜感激!

谢谢!

回答

24

Facebook登录背后的想法很简单:用户转到Facebook页面,在那里登录,Facebook担心细节,最终只是给你(你的服务器)一个大拇指和一个ID,意思是“我们有肯定确认了此用户的身份,它是用户174264384“。然后,您的服务器可以自由地做任何喜欢的信息。如果你想通过多次访问跟踪用户,那么你可能想要将该号码与任何附加信息一起存储在数据库中。下次Facebook告诉你用户174264384已经登录时,你可以从数据库中获取任何关联的信息。

希望能帮助我们做出30,000英尺的概述。有关Facebook如何安全认证用户并将这些信息传回服务器的详细信息最好由PHP SDK处理。如果您想了解详情,请阅读。

OpenID基本上做同样的事情,只有技术细节不同,它不是特定于Facebook。 Oauth是另一种非常相似的技术。

+1

我有一个问题,有关当用户在facebook上签名againg时得到有关用户的旧信息。我使用PHP从我的数据库中获取旧信息。但是安全呢?如果我只使用facebook id,任何人都可以使用facebook id来获取信息。 – tasomaniac

2

这种类型的技术(称为OpenConnect,如果我没有弄错,并且他们正在切换到OAuth)与OpenID有些相同。

Google确实使用openID,我不确定它们是如何工作的。

对于FacebookConnect,您可以通过脸书(https://developers.facebook.com/apps)注册您的应用程序,您可以在这里找到关于验证码https://developers.facebook.com/docs/authentication/的详细信息。

这个想法是,你将得到一个授权码,你发送回Facebook并获得一个access_token,这意味着你的用户与你的网站被认证。您可以将它存储在$ _SESSION var我认为...没有必要存储任何数据库,但在您的特定设置中,您可以使用userID作为唯一的用户标识符。

-2

在Outh/OpenID之前,我们使用我们的网站向用户提供用户名和密码,以尊敬的网站,如Facebook,谷歌。然后使用Curl,我们代表我们的用户从这些社交网站获取数据。然后,这些数据就成为我们注册表格数据的来源。例如,可以跳过注册表格中的姓名,电子邮件,性别等。

由于用户可能会担心给每个站点的用户名和密码,因此需要Outh。现在我们只需将用户重定向到Facebook,Facebook要求输入用户密码。并通过url附加auth令牌将用户重定向回我们的网站。我们可以通过$ _GET获得访问权限。使用这个令牌,我们可以查询Facebook与该用户相关的翻译,因此可以再次跳过注册表单。这些数据存储在注册表字段存储的表格中。

(这只是一个概述还有其他步骤,很好地照顾过)

2

我以为它会帮助你,如果你想使用JavaScript SDK为此请复制此代码:

<DOCTYPE html> 

<html> 

<head> 

<title>Facebook Login JavaScript Example</title> 

<meta charset=”UTF-8″> 

</head> 

<body> 

<script> 

// This is called with the results from from FB.getLoginStatus(). 

function statusChangeCallback(response) { 

console.log(‘statusChangeCallback’); 

console.log(response); 

// The response object is returned with a status field that lets the 

// app know the current login status of the person. 

// Full docs on the response object can be found in the documentation 

// for FB.getLoginStatus(). 

if (response.status === ‘connected’) { 

// Logged into your app and Facebook. 

testAPI(); 

} else if (response.status === ‘not_authorized’) { 

// The person is logged into Facebook, but not your app. 

document.getElementById(‘status’).innerHTML = ‘Please log ‘ + 

‘into this app.'; 

} else { 

// The person is not logged into Facebook, so we’re not sure if 

// they are logged into this app or not. 

document.getElementById(‘status’).innerHTML = ‘Please log ‘ + 

‘into Facebook.'; 

} 

} 
// This function is called when someone finishes with the Login 

// Button. See the onlogin handler attached to it in the sample 

// code below. 

function checkLoginState() { 

FB.getLoginStatus(function(response) { 

statusChangeCallback(response); 

}); 

} 
window.fbAsyncInit = function() { 

FB.init({ 

appId : ‘{your-app-id}’,// plaste your app id 

cookie : true, // enable cookies to allow the server to access 

// the session 

xfbml : true, // parse social plugins on this page 

version : ‘v2.1′ // use version 2.1 

}); 

// These three cases are handled in the callback function. 
FB.getLoginStatus(function(response) { 

statusChangeCallback(response); 

}); 
}; 
// Load the SDK asynchronously 

(function(d, s, id) { 

var js, fjs = d.getElementsByTagName(s)[0]; 

if (d.getElementById(id)) return; 

js = d.createElement(s); js.id = id; 

js.src = “//connect.facebook.net/en_US/sdk.js”; 

fjs.parentNode.insertBefore(js, fjs); 

}(document, ‘script’, ‘facebook-jssdk’)); 
// Here we run a very simple test of the Graph API after login is 

// successful. See statusChangeCallback() for when this call is made. 

function testAPI() { 

console.log(‘Welcome! Fetching your information…. ‘); 

FB.api(‘/me’, function(response) { 

console.log(‘Successful login for: ‘ + response.name); 

document.getElementById(‘status’).innerHTML = 

‘Thanks for logging in, ‘ + response.name + ‘!'; 

}); 

} 

</script> 

<fb:login-button scope=”public_profile,email” onlogin=”checkLoginState();”> 

</fb:login-button> 
<div id=”status”> 

</div> 
</body> 

</html> 

我发现从AU脚本seful教程,如果你正在考虑编辑这个答案,请参阅本教程Facebook Login Integration with website