Facebook application on the application engine displaying a blank page on iframe canvas

I am trying to get an FB application to display it on the application page on facebook, but the iFrame just doesn't work. The application works fine on localhost and appspot, but nothing happens when loading inside facebook.

If I look at the source of the iframe, nothing appears, but if I refresh this page, will all the code display normally?

I also tried the sandbox, and I have two separate application settings for localhost and appspot. Both are doing the same.

This is my main application code.

import cgi import datetime import urllib import wsgiref.handlers import os import facebook import os.path from google.appengine.ext import db from google.appengine.api import users from google.appengine.ext import webapp from google.appengine.ext.webapp import util from google.appengine.ext.webapp import template from google.appengine.ext.webapp.util import run_wsgi_app #local FACEBOOK_APP_ID = "----------------" FACEBOOK_APP_SECRET = "---------------" #live #FACEBOOK_APP_ID = "--------" #FACEBOOK_APP_SECRET = "--------------" class User(db.Model): id = db.StringProperty(required=True) created = db.DateTimeProperty(auto_now_add=True) updated = db.DateTimeProperty(auto_now=True) name = db.StringProperty(required=True) location = db.StringProperty(required=False) profile_url = db.StringProperty(required=True) access_token = db.StringProperty(required=True) user_has_logged_in = db.BooleanProperty(required=True) class PageModel: def __init__(self, user, friends): self.user = user self.friends = friends #self.length = self.friends['data'].__len__() class BaseHandler(webapp.RequestHandler): """Provides access to the active Facebook user in self.current_user The property is lazy-loaded on first access, using the cookie saved by the Facebook JavaScript SDK to determine the user ID of the active user. See http://developers.facebook.com/docs/authentication/ for more information. """ @property def current_user(self): if not hasattr(self, "_current_user"): self._current_user = None cookie = facebook.get_user_from_cookie( self.request.cookies, FACEBOOK_APP_ID, FACEBOOK_APP_SECRET) #if logged in if cookie: # get user from db user = User.get_by_key_name(cookie["uid"]) # Store a local instance of the user data so we don't need # a round-trip to Facebook on every request if not user: graph = facebook.GraphAPI(cookie["access_token"]) profile = graph.get_object("me") user = User(key_name=str(profile["id"]), id=str(profile["id"]), name=profile["name"], location=profile["location"]["name"], profile_url=profile["link"], access_token=cookie["access_token"], user_has_logged_in = True) user.put() #else if we do have a user, but their cookie access token #is out of date in the db, update it elif user.access_token != cookie["access_token"]: user.access_token = cookie["access_token"] user.put() self._current_user = user #user = facebook.get_user_from_cookie(self.request.cookies, FACEBOOK_APP_ID, FACEBOOK_APP_SECRET) friends = "chris" pageModel = PageModel(self._current_user, friends) return pageModel return self._current_user class Index(BaseHandler): def get(self): path = os.path.join(os.path.dirname(__file__), "index.html") #args = dict(current_user=self.current_user, # facebook_app_id=FACEBOOK_APP_ID) args = dict(pageModel=self.current_user, facebook_app_id=FACEBOOK_APP_ID) self.response.out.write(template.render(path, args)) application = webapp.WSGIApplication([ ('/', Index), ('/savemyaddress', SaveMyAddress) ], debug=True) def main(): run_wsgi_app(application) #util.run_wsgi_app(webapp.WSGIApplication([(r"/", HomeHandler)], debug=True)) if __name__ == '__main__': main() 

and my JS download on the main page

 <script> window.fbAsyncInit = function() { FB.init({appId: '{{ facebook_app_id }}', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('{% if pageModel.user %}auth.logout{% else %}auth.login{% endif %}', function(response) { window.location.reload(); }); }; (function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script> 
+4
source share
1 answer

The problem was that the first request from facebook comes as an email request,

// the initial facebook request comes as a POST with signed_request

 if u'signed_request' in self.request.POST: facebook.load_signed_request(self.request.get('signed_request')) 

http://developers.facebook.com/docs/samples/canvas/

So just get a mail request and everything should be in order.

+3
source

All Articles