0

I had simple flask frontend and used social auth, it's work fine. Now I want to moving my frontend to vue+vuetify. If I try call backend function "/facebook_login" I get an error:

Access to XMLHttpRequest at 'https://www.facebook.com/dialog/oauth?response_type=code&client_id=***&redirect_uri=https%3A%2F%2Flocalhost%3A5000%2Ffacebook_authorized&scope=email%2C+' (redirected from 'https://localhost:5000/facebook_login') from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://www.facebook.com/dialog/oauth?response_type=code&client_id=***&redirect_uri=https%3A%2F%2Flocalhost%3A5000%2Ffacebook_authorized&scope=email%2C+ net::ERR_FAILED

Uncaught (in promise) Error: Network Error at createError (createError.js?16d0:16) at XMLHttpRequest.handleError (xhr.js?ec6c:69)

I understand that the error concerns a missing facebook auth window. But I can't how to do this. I believe that transferring authorization to the frontend using using vue-social-auth is not the best choice, although I may be wrong. Please, help what is my mistake in social auth?

login.py

@fapp.route("/facebook_login")
def facebook_login():
    return FacebookSignIn.facebook.authorize(callback=url_for("facebook_authorized",
                                               next=request.args.get('next'),
                                               _external=True)

login.html

<a href="/facebook_login" class="mx-3" role="button"><i class="fab fa-2x fa-facebook-f facebook-color"></i></a>

Login.vue

<v-btn class="mx-2" fab color="black" outlined @click="fb_auth">
    <v-icon>fab fa-facebook-f</v-icon>
</v-btn>

script

fb_auth() {
  axios
  .get('https://localhost:5000/facebook_login')
  .then(response=>console.log(response))
},
Sh1ft
  • 53
  • 5
  • Hey, I think there is a box in the FB Developer tool website that allows you to add authorized URLs. Check out the answer here: https://stackoverflow.com/questions/37449761/where-does-one-set-the-oauth-redirect-uri-for-facebook-apps – ProfessorManhattan Jul 21 '20 at 04:01
  • @ProfessorManhattan, backend sends requests to facebook, everything is configured correctly there. The problem is in the frontend – Sh1ft Jul 21 '20 at 10:17
  • You still might have to whitelist the redirect URL somewhere. Maybe this can provide some insight: https://stackoverflow.com/questions/27716212/facebook-server-side-login-cors – ProfessorManhattan Jul 21 '20 at 18:28

0 Answers0