【问题标题】：Facebook javascript authorization modal dialog with OAuth 2.0带有 OAuth 2.0 的 Facebook javascript 授权模式对话框
【发布时间】：2011-10-19 21:28:59
【问题描述】：

我可以做到老派：

<!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 粉丝页面）。有没有办法做到这一点？提前致谢！

更新：

似乎我已经设法以非弹出方式实现授权对话框。授权对话框在同一窗口中打开，无需用户交互（不是模式对话框），并且不会被浏览器阻止。用户授权该应用程序后，他将被重定向到他刚刚来自的 facebook fanpage 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>

【问题讨论】：

我正在寻找这个。让我试试！！

标签： facebook facebook-graph-api modal-dialog oauth-2.0 facebook-javascript-sdk

【解决方案1】：

我不久前已经更新了我的问题。到目前为止，我很确定没有办法再使用FB.ui、JQueryUI 对话框或类似的东西在模式层中显示授权对话框。

【讨论】：