Django - 如何在投入生產之前設置和測試Facebook登錄？

Question

所以我想添加Facebook登錄到我的頁面，但我有一些困難。我試圖弄清楚在開始生產之前如何在開發中測試這些功能，但我並不完全明白如何去做。

我跟着facebook api指令，所以我想我應該有一些工作，但我無法測試。該代碼如下：

<script> 
    function fb_login() { 
    FB.login(function() {}, { scope: 'email,public_profile' }); 
    } 

    // 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  : '************', 
    cookie  : true, // enable cookies to allow the server to access 
         // the session 
    xfbml  : true, // parse social plugins on this page 
    version : 'v2.2' // use version 2.2 
    }); 

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

我的應用程序ID在我的應用程序中是正確的。

這裏是我的登錄按鈕：

<a href="#" onclick="fb_login();"><img src="../../static/textchange/facebookloginbutton.png" border="0" alt="" height="42px;"></a> 
     </div> 

我做我自己，所以我可以選擇其他圖像。

所以，現在當我嘗試登錄我得到這個錯誤：

「鑑於網址不被應用程序配置允許的：一個或多個指定的網址不被應用的設置允許它必須匹配網站網址或Canvas網址，或者該網域必須是其中一個應用網域的子網域。「

所以我相信我必須選擇另一個域來測試它？但我不明白我應該選擇什麼？我必須開始「託管」才能使用真正的域名嗎？我可以在本地做嗎？

我會感謝任何幫助推動我在正確的方向。

謝謝。

Answer 1

您可以在Facebook開發人員儀表板中的客戶端OAuth設置下配置您的有效OAuth重定向URI，以允許您在本地使用的任何URL。或者將網站網址設置爲使用您的本地網址。

Answer 2

您的網站網址應該是http://localhost:8000/。我認爲http://事項

$scope.login = function() { 
    FB.login(function(resp) { 
     var args = { signed_request: resp.authResponse.signedRequest }; 
     $http.get('/auth/facebook/callback', args).then(function(resp) { 
     // handle success 
     }); 
    }, {scope: 'email,user_friends,user_location'}); 
    };