Having difficulty with integrating Facebook login through Angular.js in my Rails App.
<li><a ng-click="fb_login()" href="">Login with Facebook</a></li>
In the UserCtrl
:
$scope.fb_login = function() {
user.social_media_login();
}
This triggers a function on the user.js
service:
social_media_login: function() {
return user.submit({method: 'POST',
url: '../users/auth/facebook',
success_message: "You have been logged in."
});
}
I've set up the rack-cors
gem on the backend, and also included this code in my application_controller.rb
:
before_filter :cors_preflight_check
before_filter :cors_set_access_control_headers
def cors_set_access_control_headers
headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
end
def cors_preflight_check
if request.method == :options
headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
headers['Access-Control-Allow-Headers'] = '*'
headers['Access-Control-Max-Age'] = '1728000'
render :text => '', :content_type => 'text/plain'
end
end
However, I'm encountering an error in Chrome console:
XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?client_id=xxx&redirect_ur…pe=code&scope=email&state=yyyy. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
The terminal output of my app displays:
Started POST "/users/auth/facebook" for ::1 at 2015-09-07 20:07:35 +0100
I, [2015-09-07T20:07:35.847058 #18719] INFO -- omniauth: (facebook) Request phase initiated.