Search code examples
angularjsnode.jsfacebookrestifysatellizer

what should be implemented in the facebook redirect uri?


I have an angular 1.5.0-rc0 application with satellizer in order to login to facebook.

the website connects to a nodejs server at https://myalcoholist.com:8888

the website is https://myalcoholist.com

to configure satellizer with facebook i have the following code:

app.config(function($authProvider) {

        $authProvider.facebook({
            clientId: '226393057557099',
            url: 'https://myalcoholist.com:8888/auth/facebook',
            redirectUri: 'https://myalcoholist.com'
        });
    });

and my angular login controller code:

(function () {
angular.module('myalcoholist').controller('LoginController',['$scope','$auth','$location', 'toastr',function ($scope,$auth,$location,toastr) {
    $scope.authenticate = function (provider) {
        $auth.authenticate(provider).then(function () {
                toastr.success('You have successfully signed in with ' + provider + '!');
                $location.path('/');
            })
            .catch(function (error) {
                    if (error.error) {
                        // Popup error - invalid redirect_uri, pressed cancel button, etc.
                        toastr.error(error.error);
                    } else if (error.data) {
                        toastr.error(error.data.message, error.status);
                    } else {
                        toastr.error(error);
                    }
                }
            )
    }
}]);
})();

my nodejs application uses restify framework for handling the requests and i configured it to route:

server.post('/auth/:provider', function (req,res,next) {
    require(post_commands_dir + 'auth.js')(req,res,next);
})

and auth.js contains

var FB = require('fb');

function auth(req, res, next) {
var clientId = req.params.clientId;
var code = req.params.code;
var provider = req.params.provider;

FB.api('oauth/access_token', {
    client_id: '<CLIENT_ID>',
    client_secret: '<CLIENT_SECRET>',
    redirect_uri: 'https://myalcoholist.com',
    code: code
}, function (response) {
    if(!response || response.error) {
        console.log(!response ? 'error occurred' : response.error);
        return;
    }

    var accessToken = response.access_token;
    res.send(JSON.stringify({token:accessToken}));
 //       var expires = response.expires ? response.expires : 0;
});
}

module.exports = auth;

in my angular project in the view I have a button that calls the authenticate function i added to the scope. when i click on login it opens a facebook popup and I click on Allow, then it closes the popup and executes in the background a post request to https://myalcoholist.com:8888/auth/facebook with the code. when I try to convert the code to access token using the code in auth.js i get the following error:

{ message: 'Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request',
type: 'OAuthException',
code: 100,
fbtrace_id: 'B09qSPJS08d' }

now in facebook console i configured the Valid OAuth redirect URIs to https://myalcoholist.com

now I think that I'm probably mistaken with the redirect_uri and I should implement it differently. I just don't know how. any ideas ?


Solution

  • In facebook app developer console, when I add https://myalcoholist.com to the OAuth Callback Url it auto adds / to it. that's what I've been missing in my API server. the redirect_url In the api server was configured to https://myalcoholist.com without the ending /.

    welp problem resolved.