第三方登陸實踐之基於OAuth的FACEBOOK Web Login（最新版）
Facebook 登錄簡介
Facebook 登錄是在多個平台供用戶創建帳戶並登錄應用的便捷方式。它可用於 iOS、Android、Web、Windows Phone、桌面應用和智能電視、物聯網對象等設備。
Facebook 登錄功能可打造以下體驗：
-
創建帳戶
Facebook登錄讓用戶能夠快速輕松地在應用內創建帳戶，無需設置密碼，避免今后忘記密碼的麻煩。這一簡單方便的體驗可以產生更高的轉化量。用戶在一個平台上創建帳戶后，通常只需輕輕一點就可以在所有其他平台上登錄應用。獲得有效的郵箱信息意味着您可以在今后聯系相關用戶，重新吸引他們使用應用。 -
個性化
對於用戶來說，個性化體驗更具吸引力，因而能夠產生更高的留存率。使用 Facebook登錄功能，您可以獲得難以通過注冊表單收集或收集起來很麻煩的信息。即便只是將 Facebook 頭像導入應用，也會加強用戶對應用的歸屬感。 -
社交
許多用戶留存率高的應用都讓用戶能夠與他們的好友建立聯系，促進應用內體驗的分享。通過 Facebook登錄功能，您可以了解哪些應用用戶相互之間也是 Facebook 好友，以便連接用戶，創造價值。
眾多在應用中部署了 Facebook 登錄的開發者實現了卓越成效，包括應用登錄人數大增，參與度提升，使用 Facebook 登錄的用戶數量持續增長。
本文主要介紹利用 JavaScript SDK 部署網頁版“Facebook 登錄”，將Facebook登陸應用於Web網頁。
Facebook登陸實踐
1.首先，登陸Facebook開發者平台注冊賬號。
官網鏈接已經給出，注冊一個開發者賬號即可。
2.然后，新建應用APP
創建好新應用后可以看到自己的應用編號和應用密鑰，后面寫代碼需要用。
在APP基本設置里面，填寫必要的信息，聯系郵箱、應用域名、隱私權政策網址、商業用途和類別、以及Web網站的地址，如果是本地開發環境，可以這樣填：http://localhost:XXXX/XXXX
隱私權政策網址當時試了幾個URL都沒成功，后來發現填這個是可以的：http://wp4fb.com/how-to-add-a-privacy-policy-to-your-apps/
3.在應用APP中的產品（PRODUCTS）添加Facebook登陸（Facebook Login）
Facebook登陸設置里面，填寫必要的信息，然后發布應用APP。
有一點需要注意，Facebook規定自2018 年 10 月 6 日起，所有應用都需要使用 HTTPS（HTTPS協議更加的安全）。即對跳轉 URI 和 JavaScript SDK 強制使用 HTTPS。
如果你是在本地開發環境下工作，那么需要給localhost添加SSL證書並實現HTTPS，此篇就不會詳細介紹了。
APP上線成功如下圖所示。
4.部署網頁版Facebook 登錄
通過采用 JavaScript 版 Facebook SDK 的“Facebook 登錄”，用戶可以使用 Facebook 登錄信息登錄您的網頁。
實施登陸功能步驟
- 輸入跳轉網址，讓用戶跳轉到 successful-login 頁面。
- 檢查登錄狀態，了解用戶是否已登錄您的應用。
- 通過“登錄”按鈕或“登錄”對話框讓用戶登錄，並請求一系列數據權限。 讓用戶退出，允許用戶離開應用。
①輸入跳轉網址
在應用面板中選擇您的應用，然后前往產品 > Facebook 登錄 > 設置。在 OAuth 客戶端授權設置下的有效 OAuth 跳轉網址字段中輸入您的跳轉網址以獲得成功授權。
②檢查登錄狀態
調用 FB.getLoginStatus檢查登錄狀態，此函數會觸發 Facebook 調用，獲取登錄狀態，並調用包含結果的回調函數。
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
提供給回調的 response 對象包括許多字段：
{
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
reauthorize_required_in:'...'
signedRequest:'...',
userID:'...'
}
}
status 表示應用用戶的登錄狀態。status 可以是下列之一：
- connected — 用戶登錄了 Facebook 和您的應用。
- not_authorized — 用戶登錄了 Facebook，但未登錄您的應用。
- unknown — 用戶未登錄 Facebook，所以無法知道他們是否登錄了您的應用。或者已經調用 FB.logout()，因此無法連接至 Facebook。
- 如果狀態為 connected，則響應對象將包括 authResponse，分為以下部分：
accessToken — 包括應用用戶的訪問口令。
expiresIn — 表示口令到期且需要更新的 UNIX 時間。
reauthorize_required_in - 登錄過期和請求重新授權之前的時長（以秒為單位）。
signedRequest — 經簽名的參數，其中包括應用用戶的信息。 userID — 應用用戶的編號。
③讓用戶登錄
提示用戶登錄的兩種方式：
- 使用“登錄”按鈕。
- 使用 JavaScript SDK 中的 FB.login()
FB.login(function(response){
// Handle the response object, like in statusChangeCallback() in our demo
// code.
});
④讓用戶退出
可以向按鈕或鏈接添加 JavaScript SDK 函數 FB.logout，讓用戶可以退出應用
FB.logout(function(response) {
// Person is now logged out
});
SpringBoot配置好了HTTPS,並實現HTTP訪問自動轉HTTPS訪問，自己也通過OpenSSL給localhost 添加 SSL 證書，在本地開發環境中實現了HTTPS，但由於並非官方CA簽發的證書，所以chrome依然認為本網址是不安全的，在這里點擊繼續前往localhost即可。
點擊FACEBOOK登陸。
完成登陸，重定向到網頁地址，返回當前狀態。We are connected.
登陸成功后就可以獲取用戶信息，可以是用戶名、頭像、朋友列表等等， 可以很容易地在HTML中的function getInfo()函數里面設置，本文只獲取了response id。
5.源代碼
Controller中添加Login Controller
@RequestMapping("/login")
public String login() {
return "Facebook.html";
}
HTML代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
// initialize and setup facebook js sdk
window.fbAsyncInit = function() {
FB.init({
appId : '279184756036492',
cookie : true,
xfbml : true,
version : 'v3.2'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
});
};
(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'));
// login with facebook with extra permissions
function login() {
FB.login(function(response) {
if (response.status === 'connected') {
document.getElementById('status').innerHTML = 'We are connected.';
document.getElementById('login').style.visibility = 'hidden';
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'We are not logged in.'
} else {
document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
}
}, {scope: 'email'});
}
// getting basic user info
function getInfo() {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) {
document.getElementById('status').innerHTML = response.id;
});
}
</script>
<div id="status"></div>
<button onclick="getInfo()">Get Info</button>
<button onclick="login()" id="login">Login</button>
</body>
</html>
總結
本文主要介紹了利用 JavaScript SDK將Facebook登陸應用於Web網頁，希望能對大家有所幫助~ 有問題歡迎留言交流，不足之處還請多多指正。