第三方登陸實踐之基於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登陸實踐
官網連結已經給出，註冊一個開發者賬號即可。
2.然後，新建應用APP
建立好新應用後可以看到自己的應用編號和應用金鑰，後面寫程式碼需要用。
在APP基本設定裡面，填寫必要的資訊，聯絡郵箱、應用域名、隱私權政策網址、商業用途和類別、以及Web網站的地址，如果是本地開發環境，可以這樣填：
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網頁，希望能對大家有所幫助~ 有問題歡迎留言交流，不足之處還請多多指正。