Facebook Login - Problem redirecting after confirming permission for user info

Question

I need help for the last step of my Facebook login function.

The problem is that when a new user signs in for the first time, a popup called 'www.facebook.com/v11.0/dialog/oauth' appears which prompts the new user to confirm that they allow my page to access their information.

The issue is that once that user accepts the terms and confirms by clicking the 'continue as name' button, instead of being booted to my home page like I wish it did, the users is kept on my login page instead. They then need to click a second time on the 'Connect by Facebook' button, which is now able to do its job and redirect my users to the proper page.

Basically I'm looking for a way to tell the Facebook login to prompt the redirect from the inside of the oauth popup and skip the need for a double click.

I have set up my access in JavaScript and my code looks like this:

    $(document).ready(function(){
      $('.login-main').on("click", ".facebook_login_class", function(){
          console.log('FACEBOOK LOGIN OPTION SELECTED');
                FB.getLoginStatus(function(res){
                    if(res.status == "connected" ){
                        console.log('Connected on Facebook');
                        FB.api('/me?fields=email,name,first_name,last_name', function(fbUser) {
                            $.ajax({
                                url:'facebook_login_ajax/',
                                method:'GET',
                                data:{
                                    email:fbUser.email,
                                    code:fbUser.id,
                                },
                                success:function(response){
                                    if (response.Success == true){
                                        window.location.href = '/myhomepage/';
                                    }
                                }
                            });
                        });
                    }else{
                        console.log('NOT CONNECTED!');
                        FB.login();
                    }
                    FB.getLoginStatus(function(response) {
                    });
                });

            });
      });

I figure the magic happens during the FB.login(); part of my function since that is where new users end up before they give me their authorization to use their data. I am still working on my JavaScript skills so I feel like I'm missing something quite simple.

Would any of you have an idea to solve this issue?

Thanks a lot

Answer 1

Oh well, turns out the solution was very simple from the start. I just needed to modify the FB.login(); part like this:

                    FB.login(function(response) {
                       if (response.status == 'connected'){
                        FB.api('/me?fields=email,name,first_name,last_name', function(fbUser) {
                        $.ajax({
                            url:'facebook_login_ajax/',
                            method:'GET',
                            data:{
                                email:fbUser.email,
                                code:fbUser.id,
                            },
                            success:function(response){
                                if (response.Success == true){
                                    window.location.href = '/myhomepage/';
                                }
                            }
                        });
                    });
                       }
                    }, {scope: 'email'});
                }

Which is basically the same function I had from before, only now it follows the FB.login() function.