Facebook CORS Error Callback Feature

Question

I have the following code:

app.js:

var passport = require('passport') , FacebookStrategy = require('passport-facebook').Strategy , ... passport.serializeUser(function(user, done) { console.log('serializing user') done(null, user); }) passport.deserializeUser(function(obj, done) { console.log('deserializeUser') done(null, obj) }) passport.use(new FacebookStrategy({ clientID: FBAPP.id, clientSecret: FBAPP.secret, callbackURL: "http://www.mylocal.com:3000/auth/facebook/callback" }, function(accessToken, refreshToken, profile, done) { // asynchronous verification, for effect... process.nextTick(function () { return done(null, profile) }) } )) app.get('/auth/facebook', passport.authenticate('facebook', { scope: ['email, user_likes, user_photos, publish_actions'] })) app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/loginsuccess', failureRedirect : '/loginfail' })) app.get('loginsuccess', function(req, res) { console.log('Login success') res.send(200, 'ok') }) app.get('/loginfail', function(req, res) { console.log('Login error') res.send(401, 'error') }) 

The angular part:

 factory('FacebookFactory', ['$http', '$q', function($http, $q) { var get = function() { var deferred = $q.defer(); $http({method: 'GET', url: '/auth/facebook'}). success(function(data, status, headers, config) { deferred.resolve(data); }). error(function(data, status, headers, config) { deferred.reject(data); }); return deferred.promise; }; return { get: get }; }]) 

I always get this error and make several attempts, but have not succeeded.

 XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth? response_type=code&redirect_uri=http%… user_likes%2C%20user_photos%2C%20publish_actions&client_id=xxxxxxxxxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[basic links]http://www.mylocal.com:3000' is therefore not allowed access. 

Any idea? I tried it only in angular, but then it does not work in Safari, but in Chrome and FF it works fine.

www.mylocal.com//000 = localhost: 3000

Answer 1

You will not find a solution with client languages, since this is a cross-start request that can be used as a malicious attack. So basically, the Facebook endpoint should have a set of Access-Control-Allow-Origin headers, and I don't think they will do this any time soon. I use the API a lot and often have to have the abstracts of the headers installed at my endpoint so that my clients can connect with localhost or dev url:

  if (isset($_SERVER['HTTP_ORIGIN'])): header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Max-Age: 86400'); endif; if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS'): if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])): header('Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT'); endif; if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])): header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); endif; exit(0); endif; 

You can also try this with your $ http broker:

  var promise = $http({ method: 'POST', url: 'url_to_api', data: params, headers: { 'Access-Control-Allow-Origin': true, 'Content-Type': 'application/json' } }).success(function (data, status, headers, config) { return data; }); 

Answer 2

I have an Angular application with an expression on the server. When I clicked the button with this HTML:

 <input type="button" ng-click="socialLogIn('facebook')" class="modal-input" value="Sign in with Facebook"> 

This gave me a CORS error:

 $scope.socialLogIn = function (social) { return $http.get ('/auth/'+social).success (function (data) { auth.saveToken (data.token); // write data to local storage }); 

The problem is that I want to return the token in order to save it in localStorage. I solved it, but the solution is cool. In the socialLogIn function, I opened a new window:

 $scope.socialLogIn = function (social) { var url = 'http://' + $window.location.host + '/auth/' + social; $window.open(url); }; 

In the express backend, after I received my “stuff” from Facebook or Google, and I created the token, I sent back the code that saved the token, reloaded the parent window and closed myself:

 function loginReturn (res, token) { var returnString = '' + '<!DOCTYPE html>\n' + '<html>\n' + '<head>\n' + '<meta charset="UTF-8">\n' + '<title>Login</title>\n' + '</head>\n' + '<body>\n' + '<script type="text/javascript">\n' + 'window.localStorage[\'token\'] = \''+token+'\';\n' + 'window.opener.location.reload(false);\n' + 'window.close();\n' + '</script>\n' + '</body>\n' + '</html>'; res.send(returnString); };