Facebook canvas app in Flask - problems with iFrame and redirect

Question

I am fairly new to python and web development, trying to make a Facebook app with flask.

Used code from this website to get started:

http://ryaneshea.com/facebook-authentication-for-flask-apps

I was able to get the app working when I ran it outside of Facebook (from my webserver), but when I ran it embedded in Facebook (which was the point) new users could not authenticate because of this message (seen in the browser developer console) :

"Refused to display 'https://www.facebook.com/dialog/oauth?scope=email%2C+&redirect_uri=https%3A…F%2Fmywebpage%2Ffacebook_authorized&client_id=1421921424687222' in a frame because it set 'X-Frame-Options' to 'DENY'."

Then I tried to change my template so that website would be open in a Facebook accepted way by adding this code: <script>top.location="/facebook_login";</script>. That kind of worked, but now my application regularly breaks out of Facebook and is shown on the webserver instead.

I guess what should be done is to only show https://www.facebook.com/dialog/oauth?scope=email%2C+&redirect_uri=https%3A…F%2Fmywebpage%2Ffacebook_authorized&client_id=1421921424687222 in top.location=, but am not certain how this can be done without breaking the app.

Do I need to make a new route that refers to this url? Can I make a new if-else statement in the facebook_authorized(resp) method to redirect to the url if some specific condition is true? If so, how can this be done?

I found this older thread which is related to my problem, but there are no python/flask specific solutions in it: Overcoming "Display forbidden by X-Frame-Options".

Any suggestion would be greatly appreciated!

Here is the relevant python code:

oauth = OAuth()

facebook = oauth.remote_app('facebook',
                            base_url='https://graph.facebook.com/',
                            request_token_url=None,
#                            access_token_url='/oauth/access_token',
                            access_token_url='/oauth/access_token',
                            authorize_url='https://www.facebook.com/dialog/oauth',
                            consumer_key=FACEBOOK_APP_ID,
                            consumer_secret=FACEBOOK_APP_SECRET,
                            request_token_params={'scope': 'email, '}
)

app = Flask(__name__)

@facebook.tokengetter
def get_facebook_token():
    return session.get('facebook_token')

def pop_login_session():
    session.pop('logged_in', None)
    session.pop('facebook_token', None)

@app.route("/", methods=['GET', 'POST'])
def index():
    return render_template('index.html')

@app.route("/facebook_login", methods=['GET', 'POST'])
def facebook_login():
    return facebook.authorize(callback=url_for('facebook_authorized',
                                               next=request.args.get('next'), _external=True))

@app.route("/facebook_authorized", methods=['GET', 'POST'])
@facebook.authorized_handler
def facebook_authorized(resp):
    next_url = request.args.get('next') or url_for('index')
    if resp is None or 'access_token' not in resp:
        return redirect(next_url)

    session['logged_in'] = True
    session['facebook_token'] = (resp['access_token'], '')
    return redirect(next_url)

Here are the relevant parts of the template:

<html lang="en">
  <head>
    {% block head %}
    <title>MY_NEW_APP{% block title %}{% endblock %}</title>
    <body>

    {% block navbar %}
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
              <a class="brand" href="#">MY_NEW_APP</a>
              <div class="nav-collapse">
              {% block navbar_right %}
                <ul class="nav pull-right">
                        {% if not session.logged_in %}
                        <li><a href="/facebook_login">Login or Signup</a></li>
                        <!-- <script>top.location="/facebook_login";</script>-->
                        {% else %}
                        <li><a href="/logout">Logout</a></li>
                        {% endif %}
                </ul>
                {% endblock %}
              </div><!--/.nav-collapse -->
            </div>
          </div>
    </div>
    {% endblock %}
  </head>
</html>

Facebook canvas app in Flask - problems with iFrame and redirect

0 Answers0