How to authorize Facebook app using redirect in canvas?

Question

I'm trying to get into making Facebook apps but I'm having trouble getting authorization working in a redirect scheme inside the canvas.

Using the javascript api, I got it working pretty easily in a popup scheme:

$("#loginButton").click(function(e) {
    FB.login(function(response) {
        if (response.perms) {
            perms();
        }
}, {perms : 'publish_stream'});

But the popup should be an unnecessary extra click, because every other application I see requests the authorization before even showing you the landing page. Like this:

http://i.imgur.com/yBGzL.png

I figure they're simply using a redirect scheme. So I spent the entire day trying the different ways I could find:

header("Location: https://graph.facebook.com/oauth/authorize?client_id=" . $gAppId . "&redirect_uri=" . urlencode($gUrl) . "&perms=publish_stream");

header("Location: http://www.facebook.com/login.php?v=1.0&api_key=" . $gApiKey . "&next=" . urlencode($gUrl) . "&canvas=");

header("Location: http://www.facebook.com/connect/uiserver.php?app_id=" . $gAppId . "&next=" . urlencode($gUrl) . "&return_session=0&fbconnect=0&canvas=1&legacy_return=1&method=permissions.request");

But all of them, instead of showing the authorization request stuff, show a link like this:

http://i.imgur.com/bLwPQ.png

Hilariously, if I open the iframe's address in a new tab, I get the authorization request like I wanted. But I want it to display immediately, without an extra click, like every other app.

Here's an example of an app that is doing authorization and requesting permissions all in one go, in redirect form, before even displaying the landing page:

www.facebook.com/send.fortune.cookies

How are they doing it?

Answer 1

I know that this is months old now... but this is what you should do to add permission checking to your canvas.

if ($session) {
  try {
    $uid = $facebook->getUser();
    $me = $facebook->api('/me');
    $accesstoken=$session['access_token'];
  } catch (FacebookApiException $e) {
    error_log($e);
  }
} 

if($me)
{
   // do what you have to do
}else {
    $loginUrl = $facebook->getLoginUrl(
        array(
            'canvas' => 1,
            'fbconnect' => 0,
            'req_perms' => 'publish_stream'
        )
    );
    echo '<script>top.location="'.$loginUrl.'";</script>';
    //echo '<fb:redirect url="' . $loginUrl . '" />';
   //header('Location: '.$loginUrl);
}

Answer 2

The problem is that server side redirection is only redirecting your inner app frame instead of redirecting the whole page, and Facebook doesn't like displaying their system dialogs inside frames.

You would need some client side redirection, probably something along those lines:

<script>
    <?php 
        if($doRedirect) {
            echo 'top.location="http://redirect_url";';
        }
    ?>
</script>

Answer 3

Using FB Javascript SDK, it can be done something like --

FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
         loggedIn(response);
      } else {
        top.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_APP_URI&response_type=token");
      }

Answer 4

Maybe this helps :

    if(!$facebook->api_client->users_isAppUser())
{
    ?>
    <fb:redirect url="http://www.facebook.com/login.php?v=1.0&api_key=111111111111&next=http%3A%2F%2Fapps.facebook.com%2Fapp_name%2F&canvas=&req_perms=publish_stream"/>
    <?php
}