Flask Facebook Login using Oauthlib - redirect problem

Question

I would like to implement Facebook login using Flask. Here is the function which is called to request service from Facebook

@users_view.route('/facebook/')
def facebook():
    credentials = current_app.config['OAUTH_CREDENTIALS']['facebook']
    f_client = WebApplicationClient(credentials['id'])
    authorization_endpoint = 'https://www.facebook.com/dialog/oauth'

    request_uri = f_client.prepare_request_uri(
        authorization_endpoint,
        redirect_uri=request.base_url + "/auth",
        scope=["email"],
        auth_type = "reauthenticate",
    )
    print("REQUEST: {}".format(request_uri))
    return redirect(request_uri)

@users_view.route("/facebook/auth")
def facebook_callback():
    credentials = current_app.config['OAUTH_CREDENTIALS']['facebook']
    f_client = WebApplicationClient(credentials['id'])
    token_endpoint = 'https://graph.facebook.com/oauth/access_token'
    code = request.args.get("code")

    token_url, headers, body = f_client.prepare_token_request(
    token_endpoint,
    authorization_response=request.url,
    redirect_url=request.base_url,
    code=code   
    )
    print("ALL: url:{} headers:{} url:{} ".format(token_url, headers, body))

Which forwards me to this URL:

https://www.facebook.com/dialog/oauth?response_type=code&client_id=5453357158093262&redirect_uri=https%3A%2F%2F127.0.0.1%3A5000%2Fuser%2Ffacebook%2F%2Fauth&scope=email&auth_type=reauthenticate&ret=login&fbapp_pres=0&logger_id=1cc03c7d-9a19-43ba-978c-4ed8cb7aa559&tp=unspecified&cbt=1663931173196&ext=1663941992&hash=AeaYsntT-4HEQj4ZtfI

That throws the following Error:

In my Facebook developers account, I have following redirect URL configuration:

Kindly, advice how can I fix this issue.

Answer 1

Facebook API is expecting the requester to use HTTPS as you've set in your Facebook Developer Account.

Probably you are running your flask app using HTTP protocol (not HTTPS) while on your Facebook Developer account you did white-list only HTTPS, but since you didn't specify HTTP it will be rejected.

A) Try to allow HTTP(without S) from Facebook Panel:
http://localhost:5000/whatever_you_need/ AND http://127.0.0.1:5000/whatever_you_need/
even if localhost and 127.0.0.1 are synonymous, add them both.

--- OR ---

B) Install pyOpenSSL

pip3 install pyOpenSSL

Create ssl_my_app.py and run with ssl_context:

from flaskr import create_app
from flask import current_app, g
import sqlite3 # if using databases

app = create_app()

with app.app_context():
    g.db = sqlite3.connect(
        current_app.config['DATABASE'],
        detect_types=sqlite3.PARSE_DECLTYPES
    )

    g.db.row_factory = sqlite3.Row

    with current_app.open_resource('schema.sql') as f:
        g.db.executescript(f.read().decode('utf-8'))

app.run(ssl_context='adhoc')

run the app using ssl_my_app.py:

python3 ssl_my_app.py

This will run the app using HTTPS (self-signed certificate). So when you call Facebook API your application's request will be in the white-list.