Facebook帳號一鍵登錄

Facebook帳號一鍵登錄

公司最近做的一個項目要求使用Facebook實現一鍵登錄的功能。所謂的Facebook登錄就是獲取用戶在Facebook的資料，通過這些資料（郵箱等）登錄或者註冊目標網站。這中間Facebook提供了相應的接口，通過這個接口獲取用戶授權就能拿到相應的用戶資料。雖然整個過程完成下來還算比較順利。這邊還是要做一下記錄。

申請應用及配置

在使用之前，需要先在Facebook開發者平臺註冊帳號，新建應用，然後獲取新建應用的編號APPID。相應的流程開發平臺寫的還是相對比較清楚的，這裡就不一一贅述。其中要注意的是：有效 OAuth 跳轉 URL要填寫正確。

還有一個是隱私政策網站的填寫。這個關乎應用能不能的公開發布。找到開發平臺的控制面板下面有個設置->基本。在隱私權政策網址裡可以填http://wp4fb.com/how-to-add-a-privacy-policy-to-your-apps/（這個不是唯一的，填寫的地址有效即可）。然後保存更改。

然後就可以點擊應用發布開關，彈窗提示點擊確定即可。最後效果是這樣的：

相關代碼1. 檢查登錄狀態

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

下面是將在頁面加載期間運行以檢查用戶登錄狀態的部分代碼：

1
2
3

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

提供給回調的response對象包括的欄位：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

知道用戶的登錄狀態後，應用就可以執行以下操作之一：

2. 使用JavaScript SDK提供的登錄按鈕

代碼

1
2
3
4
5
6
7
8

<div id="fb-root"></div>
<script>(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/zh_CN/sdk.js#xfbml=1&version=v3.2&appId=申請的應用編號&autoLogAppEvents=1';
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

按鈕

1

<div class="fb-login-button" data-size="large" data-button-type="continue_with" data-auto-logout-link="false" data-use-continue-as="false"></div>

3. 獲取用戶信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
function fb_login() {
FB.login(function(response) {
if (response.status === 'connected') {
               
FB.api('/me?fields=id,email,first_name,last_name,gender', function(response) {
       
        console.log(response);
});
} else {
alert('login fail');
}
}, {scope: 'public_profile,email'});
}
</script>

4. 完整實例代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<script>
window.fbAsyncInit = function() {
FB.init({
appId: '',  
cookie: true,
xfbml: true,
version: 'v3.2'
});
FB.AppEvents.logPageView();
};

(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'));
</script>

<script>
function fb_login() {
FB.login(function(response) {
if (response.status === 'connected') {
FB.api('/me?fields=id,email,first_name,last_name,gender', function(response) {
   
});
} else {
alert('login fail');
}
}, {scope: 'public_profile,email'});
}
</script>
<div class="login-btn-box" >
       <button  onclick="fb_login();">Login with Facebook</button>
</div>
</div>

總結

Facebook JavaScript SDK在最新的3.2版本中跳轉 URI 和 JavaScript SDK 強制使用 HTTPS。Facebook是使用標準的 OAuth 客戶埠令流程。其授權過程跟其他OAuth沒什麼區別，按照官網的流程走一般都能成功。