CODEWITHSUNDEEP
facebookfacebook-graph-apimodal-dialogoauth-2.0facebook-javascript-sdk
borisdiakur
borisdiakur

Reputation: 12142

Facebook javascript authorization modal dialog with OAuth 2.0

I can do it oldschool:

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

Switching to OAuth 2 gets me stuck. I tried the following:

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

This code turns my modal dialog authorization into a popup dialogue authorization and without user interaction the popup gets blocked by the browser. I would like the authorization dialogue come up unblocked without user interaction and stay on the current page (my facebook fanpage). Is there a way to do that? Thanks in advance!

UPDATE:

Seems I've managed to implement the authorization dialog the non-pop-up-way. The authorization dialog opens without user interaction in the same window (not as a modal dialog) and doesn't get blocked by the browser. After the user has authorized the app he gets redirected to the same tab in the facebook fanpage iframe where he just came from. The app then recognizes that the user is connected. If the user cancels the authorization he gets redirected to the wall of the fanpage. And now the code:

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>

and if you are wondering what the channel.html is all about - here it is:

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

Upvotes: 2

Views: 6189

Answers (1)

borisdiakur
borisdiakur

Reputation: 12142

I updated my question already a while ago. By now I am quite certain that there is no way to show the authorization dialog in a modal layer anymore by using FB.ui, JQueryUI Dialog or anything similar.

Upvotes: 2

Related Questions