2011-09-03 90 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