How to use Facebook OAuth 2.0 authentication like Zynga and other use it?

Question

I want to display the "Request for Permission" box directly when the user enters http://apps.facebook.com/myfancyapp. The Facebook Authentication documentation is pretty clear on how the URL have to look like

https://graph.facebook.com/oauth/authorize?client_id=[APPID]&redirect_uri=http://www.myfancyapp.com/&scope=user_photos,user_videos,publish_stream

Pasting this URL directly into the browser works like it should. What I want is to redirect the user via JavaScript (or something else) from the application URL

http://apps.facebook.com/myfancyapp

to the authentication box URL above.

I thought something like this would work:

   <script type="text/javascript">
   <!--
      window.location = "https://graph.facebook.com/oauth/authorize?client_id=[APPID]&amp;redirect_uri=http://www.myfancyapp.com/&amp;scope=user_photos,user_videos,publish_stream"
   //-->
   </script>

This redirects me to a page with a body that looks like this

Clicking on the image/test then redirects to the authentication box.

How can I directly redirect to the "Request for Permission" box. I know it works somehow as other developers (Zynga for example) already do it.

Answer 1

Doing this with PHP is a cinch.

On the backend

$facebook = new Facebook( array(
    'appId'  => '<FB_APP_ID>'
  , 'secret' => '<FB_APP_SECRET>'
  , 'cookie' => true
));

$fbSession = $facebook->getSession();
if ( !$fbSession )
{
  $url = $facebook->getLoginUrl( array(
      'canvas'     => 1
    , 'fbconnect'  => 0
    , 'display'    => 'page'
    , 'cancel_url' => null
    , 'req_perms'  => 'user_photos,user_videos,publish_stream'
  ) );
}

And then, on the frontend

<script type="text/javascript">
  top.location.href = '<?php echo $url; ?>';
</script>
<p>
Not being redirected? <a href="<?php echo $url; ?>" target="_top">Click Here.</a>
</p>

Answer 2

Hey check out a small tutorial i made for Oauth 2.0 authentication for canvas apps.

http://kartiklad.com/oauth-2-0-and-graph-api-for-facebook-canvas-applications/

hope this helps

Answer 3

I'm doing the same thing as the asker, only instead of window.location, use top.location.href = "https://graph....."

Like:

<script type="text/javascript">
top.location.href = "https://graph.facebook.com/oauth/authorize?client_id=[APPID]&amp;scope=email&amp;redirect_uri=http://apps.facebook.com/myfancyapp/";
</script>

Prompts for login if needed, and then permissions. Then redirects to the app.