Facebook第三方登錄（JavaScript SDK）

利用 JavaScript SDK 部署網頁版“Facebook 登錄”  官方文檔

詳細demo下載

本demo示例利用JavaScript SDK實現了Facebook、google、LinkedIn第三方登錄，可以獲取用戶的基本信息，並且同時包括官方登錄按鈕和自定義登錄按鈕代碼示例。

1.選擇您的應用設置

在應用面板中選擇您的應用。然後選擇是否允許通過郵箱和短信登錄，併爲您的應用選擇安全設置。有關選擇訪問口令設置的詳細信息，請參閱訪問口令，有關選擇應用密鑰設置的信息，請參閱使用圖譜 API。

2.輸入跳轉網址

在應用面板中選擇您的應用，然後前往產品 > Facebook 登錄 > 設置。在 OAuth 客戶端授權設置下的有效 OAuth 跳轉網址字段中輸入您的跳轉網址以獲得成功授權。

3.檢查登錄狀態

首先加載Facebook SDK

(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 = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
	FB.init({
		appId      : '1234567890',
		cookie     : true,  // 啓用cookie
		xfbml      : true,  // 解析此頁面上的社交插件
		version    : 'v2.8' // 使用圖形api 2.8版本
	});
};

appId就是創建的應用的應用編號

加載網頁時應採取的第一步是檢查用戶是否已使用 Facebook 登錄功能登錄您的應用。 調用 FB.getLoginStatus即可開始此流程。 此函數會觸發 Facebook 調用，獲取登錄狀態，並調用包含結果的回調函數。

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

提供給回調的 response 對象包括許多字段：

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

status 表示應用用戶的登錄狀態。狀態可以是以下某個值：

• connected。用戶登錄了 Facebook 和您的應用。
• not_authorized。用戶登錄了 Facebook，但未登錄您的應用。
• unknown。用戶未登錄 Facebook，所以無法知道他們是否登錄了您的應用。或者已經調用 FB.logout()，因此無法連接至 Facebook。
• 如果狀態爲 authResponse，則響應對象將包括 connected，分爲以下部分：
• accessToken。包括應用用戶的訪問口令。
• expiresIn。表示口令到期且需要更新的 UNIX 時間。
• signedRequest。經簽名的參數，其中包括應用用戶的信息。
• userID 是應用用戶的編號。

4.讓用戶登錄

這裏只寫自定義登錄按鈕，如需使用官方按鈕請查看文檔。

<button id="logina" type="button">FaceBook登錄</button>

<script>
document.getElementById('logina').onclick = function(){//登錄
	FB.login(function(response) {
		if (response.status === 'connected') {
			FB.api('/me', function(response) {
		      console.log('Successful login for: ' + response.name);
		    });
		} else {
			console.log('該用戶沒有登錄');
		}
	}, {scope: 'public_profile,email'});
};
</script>

還可以選擇隨此函數調用傳遞可選的 scope 參數，此參數是要嚮應用用戶請求的一系列以逗號分隔的權限。 以下是調用包含 FB.login()（與“登錄”按鈕中使用的相同）的 scope 的方法。 在本示例中，請求的是用戶的電子郵箱和也在使用應用的好友列表

5.讓用戶退出

<button type="button" id="signout" >退出</button>

<script>
document.getElementById('signout').onclick = function(){
	FB.logout(function(response) {
		console.log("用戶已退出");
	});
};
</script>

詳細demo下載

本demo示例利用JavaScript SDK實現了Facebook、google、LinkedIn第三方登錄，可以獲取用戶的基本信息，並且同時包括官方登錄按鈕和自定義登錄按鈕代碼示例。