facebook開發者平台https://developers.facebook.com/
利用 JavaScript SDK 部署網頁版“Facebook 登錄”
通過采用 Javascript 版 Facebook SDK 的“Facebook 登錄”，用戶可以使用 Facebook 憑據登錄您的網頁。即使您因為一些原因而無法使用我們的 JavaScript SDK，也一樣可以實施“Facebook 登錄”。 要在不使用 JavaScript SDK 的情況下實施“Facebook 登錄”，請參閱手動構建登錄流程。
要在不使用 JavaScript SDK 的情況下實施“Facebook 登錄”，您首先需要有一個 Facebook 應用編號。該編號可以在應用面板中創建和檢索。您還需要有一個托管 HTML 文件的位置。
按照以下步驟實施登錄：
- 檢查登錄狀態，了解用戶是否已登錄您的應用。 執行此步驟期間，您還應該檢查用戶是否在之前登錄過您的應用，但目前未登錄。
- 通過“登錄”按鈕或“登錄”對話框讓用戶登錄，並請求一系列數據權限。
- 讓用戶退出。
另請參閱本主題末尾的完整代碼示例。
1.檢查登錄狀態
加載網頁時應采取的第一步是檢查用戶是否已使用 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是應用用戶的編號。
知道用戶的登錄狀態后，應用就可以執行以下操作之一：
-
如果用戶登錄了 Facebook 和您的應用，可將他們重定向至應用的登錄后體驗。
-
如果用戶未登錄您的應用，或未登錄 Facebook，則可以通過
FB.login()呈現“登錄”對話框提示他們登錄，或展示“登錄”按鈕。
2.讓用戶登錄
如果使用應用的用戶未登錄應用，或未登錄 Facebook，則可以使用“登錄”對話框提示他們登錄應用和 Facebook 兩者。各種版本的對話框見下文。
如果用戶未登錄 Facebook，系統就會提示他們首先登錄 Facebook，然后再登錄您的應用。JavaScript SDK 會自動檢測這種情況，您無需執行任何額外的操作即可啟用此行為。
下面是提示用戶登錄的兩種方式：
-
使用“登錄”按鈕。
-
使用 JavaScript SDK 中的
FB.login()。
 |
 |
A.讓用戶通過“登錄”按鈕登錄
您可以輕松地在自己的頁面中添加“登錄”按鈕。 有關自定義“登錄”按鈕的信息，請參閱“登錄”按鈕。要獲取基礎按鈕的代碼，在以下配置器中輸入所需的值，並點擊獲取代碼。
插件配置器
注意，在本主題末尾的示例中，我們使用按鈕的 onlogin 屬性設置了一個 JavaScript 回調，用於檢查登錄狀態，了解用戶是否成功登錄：
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button>
回調如下所示。 它將調用 FB.getLoginStatus() 來獲取最新的登錄狀態。（statusChangeCallback() 是一個函數，屬於處理響應的示例的一部分。）
function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }
B.讓用戶通過從 JavaScript SDK 調用的“登錄”對話框登錄
對於想要使用專屬按鈕的應用，您只需調用 FB.login()，即可調用“登錄”對話框：
FB.login(function(response){ // Handle the response object, like in statusChangeCallback() in our demo // code. });
正如參考文檔所述，此函數會生成一個展示“登錄”對話框的彈窗，所以應只在用戶點擊 HTML 按鈕后調用此函數（這樣可以防止彈窗被瀏覽器阻止）。
還可以選擇隨此函數調用傳遞可選的 scope 參數，此參數是要向應用用戶請求的一系列以逗號分隔的權限。 以下是調用包含 FB.login()（與“登錄”按鈕中使用的相同）的 scope 的方法。 在本示例中，請求的是用戶的電子郵箱和也在使用應用的好友列表：
FB.login(function(response) { // handle the response }, {scope: 'public_profile,email'});
處理“登錄”對話框響應
在登錄流程的這一階段，您的應用會展示“登錄”對話框，用戶可以選擇是取消登錄還是允許應用訪問他們的數據。
無論用戶的選擇是什么，瀏覽器都會返回給應用，表明用戶是連接還是取消狀態的響應數據會發送到應用。當為應用使用 JavaScript SDK 時，會向調用 FB.login() 時指定的回調返回 authResponse 對象：
此響應可在 FB.login 調用內檢測和處理，如下所示：
FB.login(function(response) { if (response.status === 'connected') { // Logged into your app and Facebook. } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. } });
3.讓用戶退出
您可以向按鈕或鏈接添加 JavaScript SDK 函數 FB.logout，讓用戶可以退出應用，如下所示：
FB.logout(function(response) { // Person is now logged out });
注意： 調用此函數還可能會讓用戶退出 Facebook。 請考慮下列 3 種情形：
- 用戶先登錄 Facebook，然后再登錄您的應用。當用戶退出您的應用時，他的 Facebook 帳戶仍為登錄狀態。
- 用戶登錄您的應用，並在該登錄流程中登錄 Facebook。當該用戶退出您的應用時，同時也將退出 Facebook。
- 用戶登錄了另一應用，並在該應用的登錄流程中登錄 Facebook，然后再登錄您的應用。當該用戶退出任一應用時，同時也將退出 Facebook。
此外，退出與撤銷登錄權限（刪除之前認可的驗證）不同，撤銷登錄權限可單獨執行。因此，構建應用時，不能設置為自動強制已退出的用戶返回“登錄”對話框。
完整代碼示例
下面的代碼會在 HTML 頁面中加載和初始化 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}', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.8' // use graph api version 2.8 }); // Now that we've initialized the JavaScript SDK, we call // FB.getLoginStatus(). This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide. They can be: // // 1. Logged into your app ('connected') // 2. Logged into Facebook, but not your app ('not_authorized') // 3. Not logged into Facebook and can't tell if they are logged into // your app or not. // // 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> <!-- Below we include the Login Button social plugin. This button uses the JavaScript SDK to present a graphical Login button that triggers the FB.login() function when clicked. --> <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button> <div id="status"> </div> </body> </html>
現在，您可以前往上傳此 HTML 的網址測試應用。打開 JavaScript 控制台，您就會看見控制台日志中的 testAPI() 函數顯示包括您姓名的消息。
恭喜，您已經實際創建了一個包含“Facebook 登錄”的真實基本頁面。您可以將此頁面用作應用的起點，但請繼續閱讀下文，了解上述代碼的具體作用，這將為您帶來巨大幫助。