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:

https://i.stack.imgur.com/nJUTu.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:

https://i.stack.imgur.com/ryYrh.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?

score 10 · Answer 1 · answered Nov 03 '10 at 14:51

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);
}

score 6 · Answer 2 · answered Aug 01 '10 at 05:58

6

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>

answered Aug 01 '10 at 05:58

serg

109,619
77
317
330

That works, but now the user ends up at my canvas URL instead of the application URL with my page in the iframe :s – Brandon Aug 01 '10 at 23:14
1

@Brandon Yep it doesn't want to forward you to app page but rather goes directly to canvas url. When I reached this problem I couldn't find a better solution than to redirect user to app url myself (server side redirect would work now). You can detect whether or not it is redirected call after authorization or regular app call by checking request parameters. If it is authorization redirect it should contain some unique parameters like `auth_token` that are not present in regular call. If you detected those - redirect to app url. – serg Aug 02 '10 at 00:15
Thank you! Spot on with FB lot liking in-frame auth dialog. – Kit Dec 05 '12 at 11:23

score 1 · Answer 3 · answered Mar 27 '12 at 08:25

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");
      }

score 0 · Answer 4 · answered Dec 16 '10 at 18:24

0

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
}

answered Dec 16 '10 at 18:24

w2lame

2,774
6
35
48

this is for a specific application. the general thing will contain the req permissions needed along with the other things. – higherDefender Dec 16 '10 at 18:28

How to authorize Facebook app using redirect in canvas?

4 Answers4

Linked