2017-05-03 141 views
1

我堅持登錄到我的網站使用Facebook,但我一直得到這個問題,當我點擊Facebook登錄按鈕彈出顯示並立即隱藏我如何登錄到我的網站使用Facebook社會登錄

我已經在使用Facebook的文檔代碼Web登錄嘗試

<!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 { 
     // The person is not logged into your app or we are unable to tell. 
     document.getElementById('status').innerHTML = 'Please log ' + 
     'into this app.'; 
    } 
    } 

    // 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> 

我用下面

此鏈接

感謝您的幫助

+0

您好,歡迎StackOverflow上。請花一些時間閱讀幫助頁面,特別是關於[最小,完整和可驗證示例]一節(http://stackoverflow.com/help/mcve) –

回答

0

Facebook社交插件:登錄按鈕的Facebook提供了他們所謂的社交插件的主機。我們感興趣的是登錄按鈕。以下是將按鈕放到網頁上的基本步驟:

您需要爲您的網站安裝Facebook應用程序。轉到https://developers.facebook.com/apps/並點擊「新應用」按鈕。

你的「應用顯示名稱」可以是有意義的。我通常會使用該網站的域名。您也可以在未來將其用於其他目的。 「應用程序名稱空間」需要是不包含任何特殊字符的內容。我通常使用我的應用程序顯示名稱,不含空格,句點等。現在您需要輸入您的「應用程序域」和網站「網站URL」。爲應用程序域輸入您的網站託管的域名。對於網站網址,請輸入您網站的完整網址。例如,如果您的域名是name.com,那麼您的網站網址應該是http://www.your_domain.com。一旦你輸入了正確的信息,保存你的修改。現在您將有一個頁面顯示您的「應用程序ID」和「應用程序祕密」。只需將該頁面保持打開狀態,因爲在將登錄按鈕代碼添加到頁面時,您將需要您的應用程序ID。現在我們需要從Facebook獲取登錄按鈕代碼。轉到http://developers.facebook.com/docs/reference/plugins/login/並單擊「獲取代碼」按鈕。從第一個框中複製HTML5代碼,現在將它放在網頁正文標籤下方。代碼應該是這個樣子:

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID"; 
    fjs.parentNode.insertBefore(js, fjs); 
    } (document, 'script', 'facebook-jssdk')); 
</script> 

在代碼中一定要與你的Facebook應用程序創建的應用程序ID替換APP_ID。現在將第二個框中的代碼粘貼到任何您想要登錄按鈕的地方。該代碼應該是這個樣子:

<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div> 

數據顯示,面孔等於假的,因爲它設置爲true,當用戶登錄註銷按鈕會顯示

相關問題