2

我老校友做到這一點:Facebook的JavaScript的授權模式對話框使用OAuth 2.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 

    <body> 

    <div id="fb-root"></div> 
    <script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script> 

    <script type="text/javascript"> 

     function init(){ 
      FB.init({ 
       appId : 'MY_APP_ID', 
       status : true, // check login status 
       cookie : true, // enable cookies to allow the server to access the session 
       xfbml : true, // parse XFBML 
       channelUrl : 'http://MY_WEBSPACE/facebook-iframe/channel.html' // custom channel 
      }); 
      setupApp(); 
     } 

     function setupApp() { 

      FB.getLoginStatus(
       function(response) { 
        if (!response.session) { 
         FB.ui({method: "permissions.request", "perms": ''} , getUserId); 
        } else { 
         // the user previously authorized the app 
         getUserId(response); 
         window.location = "fanAuthorized.php"; 
        } 
       }); 
      return false; 
     } 

     function getUserId(data){ 
      if(data.status !== 'notConnected' || data.session !== null){ 
       // the user has just authorized the app 
       userId = data.session.uid; 
       accessToken = data.session.access_token; 
       window.location = "fanAuthorized.php"; 
      } else { 
       // the user has just denied to authorize the app 
       window.location = "fanUnauthorized.php"; 
      } 
     } 

     init(); 

    </script> 

</body> 

</html> 

切換到OAuth 2讓我卡住了。我試過如下:

<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml"> 
    <head> 
    </head> 
<body> 

    <div id="fb-root"></div> 

    <script> 
    window.fbAsyncInit = function() { 
     FB.init({ appId: 'MY_APP_ID', 
      status: true, 
      cookie: true, 
      xfbml: true, 
      oauth: true 
     }); 

     function updatePage(response) { 

      if (response.authResponse) { 
       // user is already logged in and connected 
       window.location = "fanAuthorized.php"; 
      } else { 
       // user is not connected or logged out 
       FB.login(function(response) { 
        if (response.authResponse) { 
         window.location = "fanAuthorized.php"; 
        } else { 
         // user has just cancelled login or denied permission 
         window.location = "fanUnauthorized.php"; 
        } 
       }, {scope:''}); 
      } 
     } 

     // run once with current status and whenever the status changes 
     FB.getLoginStatus(updatePage); 
     FB.Event.subscribe('auth.statusChange', updatePage);  
    }; 

    (function() { 
     var e = document.createElement('script'); e.async = true; 
     e.src = document.location.protocol 
     + '//connect.facebook.net/de_DE/all.js'; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 

    </script> 

</body> 
</html> 

此代碼打開我的模態對話框授權進入一個彈出對話授權,而無需用戶交互彈出被封鎖的瀏覽器。我希望授權對話在沒有用戶交互的情況下暢通無阻,並保留在當前頁面上(我的Facebook粉絲頁面)。有沒有辦法做到這一點?提前致謝!

UPDATE:

我似乎已經成功地實現了授權對話框非彈出路。授權對話框在同一個窗口(不作爲模式對話框)而沒有用戶交互的情況下打開,並且不會被瀏覽器阻止。在用戶授權應用程序後,他被重定向到他剛纔來自的Facebook粉絲頁iframe中的同一個標籤。該應用程序然後認識到用戶已連接。如果用戶取消授權,他將被重定向到粉絲頁面的牆上。而現在的代碼:

fanPage.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 

    <!-- Initialize Facebook authorization dialogue --> 
    <?php $app_id = "MY_APP_ID"; ?> 

    <div id="fb-root"></div> 
    <script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script> 

    <script type="text/javascript"> 
     <!-- 

     function init(){ 
      FB.init({ 
       appId : '<?php echo $app_id; ?>', 
       status : true, // check login status 
       cookie : true, // enable cookies to allow the server to access the session 
       xfbml : true, // parse XFBML 
       channelUrl : 'http://MY_WEBSPACE/facebook-iframe/channel.html', // custom channel 
       oauth : true // enable OAuth 
      }); 

      FB.getLoginStatus(function(response) { 
       if (response.status !== 'connected') { 

        var api_key = "<?php echo $app_id; ?>"; 
        var canvas_page = escape("http://apps.facebook.com/MY_APP/"); 

        var redirect = 'https://www.facebook.com/login.php?api_key=' + api_key 
         + '&extern=1&fbconnect=1&v=1.0' 
         + '&next=' + canvas_page + 'fanAuthorized.php' 
         + '&cancel_url=' + canvas_page + 'fanUnauthorized.php'; 
        self.parent.location = redirect; 
       } else { 
        window.alert("You are connected!"); 
       } 
      }); 
     } 

     init(); 

     //--> 
    </script> 

</body> 

</html> 

fanUnauthorized.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

</head> 

    <script type="text/javascript"> 
     <!-- 
      top.location.href='http://www.facebook.com/pages/MY_FANPAGE_NAME/MY_FANPAGE_ID'; 
     //--> 
    </script> 

<body> 
</body> 
</html> 

fanAuthorized.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
</head> 

    <script type="text/javascript"> 
     <!-- 
      top.location.href='http://www.facebook.com/pages/MY_PAGE_NAME/MY_PAGE_ID?sk=app_MY_APP_ID; 
     //--> 
    </script> 

<body> 
</body> 
</html> 

,如果你想知道的channel.html是什麼所有關於 - 這裏是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US"> 
    <head> 
     <title> </title> 
    </head> 
    <body> 
     <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
    </body> 
</html> 
+0

我正在尋找這個。讓我嘗試!! –

回答

2

前段時間我更新了我的問題。現在我相當肯定,通過使用FB.ui,JQueryUI對話框或類似的東西,沒有辦法在模式層顯示授權對話框。