Facebook OAuth login for iframe canvas apps displays a logo image and a Go to Facebook.com caption instead of logging in

Question

I'm trying to set up my (iframe) Facebook application to use OAuth for authentication. I used the python-sdk from Facebook, but I'm not really satisfied by the result, yet.

The problem is that when I redirect a user that never accessed my application to the login page, my iframe diplays an ugly intermediate page, such as the following one:

If the user clicks on "Go to Facebook.com" link, she is then redirected to the standard "Request for Permission" page.

Is there any way to avoid the first page and lead the user straight to the second one?

This problem happens on the first access for users that haven't granted any permission to my application yet.

The login code is based on the OAuth example in the Python SDK:

class LoginHandler(BaseHandler):
    def get(self):
        verification_code = self.request.get("code")
        args = dict(client_id=FACEBOOK_APP_ID, redirect_uri=self.request.path_url)
        if self.request.get("code"):
            args["client_secret"] = FACEBOOK_APP_SECRET
            args["code"] = self.request.get("code")
            raw_response = urllib.urlopen(
                "https://graph.facebook.com/oauth/access_token?" +
                urllib.urlencode(args)).read()
            logging.debug("access_token raw response " + raw_response)
            response = cgi.parse_qs(raw_response)
            access_token = response["access_token"][-1]

            # Download the user profile and cache a local instance of the
            # basic profile info
            graph = facebook.GraphAPI(access_token)
            profile = graph.get_object("me")

            user = User.get_by_key_name(profile["id"])
            if not user:
                user = User(key_name=str(profile["id"]),
                                id=str(profile["id"]),
                                name=profile["name"],
                                firstname=profile["first_name"],
                                profile_url=profile["link"],
                                access_token=access_token)
                user.put()
            elif user.access_token != access_token:
                # we already know this user, but we need to update
                user.access_token = access_token
                user.put()

            set_cookie(self.response, "fb_user", str(profile["id"]),
                       expires=time.time() + 30 * 86400)

            self.response.headers["P3P"] = 'CP="IDC CURa ADMa OUR IND PHY ONL COM STA"'
            self.redirect("/")
        else:
            self.redirect(
                "https://graph.facebook.com/oauth/authorize?" +
                urllib.urlencode(args))

Solution 1

The issue is caused to the code Facebook uses to bust out of iframes. A bug has been filed on Facebook's bugzilla: http://bugs.developers.facebook.net/show_bug.cgi?id=11326

The only known solution to this problem is to do the first redirect to https://graph.facebook.com/oauth/authorize? from the client side (i.e. Via JavaScript), using

 <script type='text/javascript'>
 top.location.href="https://graph.facebook.com/oauth/authorize?.......
 </script>

This can be triggered when the user clicks on some element (e.g. a login button) or whenever a specific page is visited (just include it in the HTML head).

Solution 2

This happens, apparently due to a bug in the Facebook side... I found this solution.

<script type="text/javascript"> 
  top.location.href = '<?php echo $loginUrl ?>';
</script>

$loginUrl = your URL

Could work this way:

<script type="text/javascript"> 
  top.location.href = 'http://www.yourappUrl.com';
</script>

always use this code in script tags...

Solution 3

yes, top.location.href should do the trick. If you get the problem that the app breaks out the iframe, make sure you use the canvas PAGE url in your redirect, in stead of canvas url (in your app settings)