I've built a full-stack app in React using Flux. I've been stuck for days on trying to get facebook login to work using the javascript SDK. Inside of a React component I have:
signInToFacebook: function() { ApiUtil.signInToFacebook(); }, componentDidMount: function() { window.fbAsyncInit = function() { FB.init({ appId : 'MY_APP_ID', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.5' // use graph api version 2.5 }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }, render: function() { return ( <div className="fb-login-button" onClick={this.signInToFacebook}> {"Sign in with Facebook"} </div> ) } Basically, I have a div which when clicked calls a function "signInToFacebook", which then calls another function in ApiUtil called "signInToFacebook", which is the following:
var ApiUtil = { signInToFacebook: function() { FB.login(this.signInOmniAuth); }, signInOmniAuth: function(response) { $.ajax({ method: 'GET', url: '/auth/facebook/callback', success: function() { console.log("returned in apiutil"); debugger; } }); } } When I click on the div, the ajax request is made, but I get a 500 Internal Server Error:
OmniAuth::Strategies::Facebook::NoAuthorizationCodeError at
/auth/facebook/callback
must pass either a
code(via URL or by anfbsr_XXXsigned request cookie)omniauth-facebook (3.0.0) lib/omniauth/strategies/facebook.rb, line 151
Here is the parsed request Header:
Accept:/ Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8,pt-BR;q=0.6,pt;q=0.4,de;q=0.2 Cache-Control:no-cache Connection:keep-alive Cookie:_Project_session=K3o2K3NxbnBXZ2w4c1lqZXdtMFhoeFdtSndSSm95OEtEZGdVQVJnNkx0L2JobzVSZmh4MHM4VHN4OWo0dHJjU3p0dlV6ZHhIL3dleG9hOCtRazF0dmhCSWI5aGgvcTBaVXFvS0wzcXdIV1ZmMm9wTGZ2ZG81enBjcjR6Y0VnKzBUTThNR3RoM1ZnRkozMUQ0cnhkbzVnPT0tLStsamIzek01R2RRMWllKy9YMlVPSWc9PQ%3D%3D--60dad32af96176a6d60eb9c5b151513bab2169a3; fbsr_1691421964447573=NvJPbYyDyKzi6NUQMUMCTWXi3QLVP6J9vG5OIfSBmT8.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUUMwUmhhUjgwWWxNQUhYNFlFZUNHNy1QR01tb1ZkWDU0SFBZLXo2eUNJREF3X0trTzJZVmpaS0FmNXlJNldERkRrMUdRWndTX1NBSWJJSzZUQUpYOU1sOS1sbjNUWUl3anJiOUx5V3plUzRGLWloLXNLdUp2NHBNeFFGZGREZ05QemwyLVNnMEV6QlZyQ0FwdXItNU5Ncnh5dXhHT3VQcE4tczlFRjA5U1FtVkFrRGc2cVNSTE8xVmpraE5ZMnNoclpyMDBpemx4ZVY1ejhKMUN3T3JKRzF3b3FjVkZBX01hQnk0cXlFOFRfN2ROYnd6azdXamoxc2VMSlNRQ2ZhVGRBbUtCV0VwQ1M5cXl1bHZDdnRTaTktTTZBLXpuQ3JkMUJneGxFdVhiUzJLLUx3WUlydk42NVlzcnB5N0t0bFpXNmpmVGpZUEhjVGQ2TF8xQ0paUzNnMzRISkZkeGdiQV9wVF9UMlVwRF9sMnciLCJpc3N1ZWRfYXQiOjE0NjA1NzA0NTUsInVzZXJfaWQiOiIxMDE1Mzk4NTE5NzE2MjA0MCJ9 Host:localhost:3000 Pragma:no-cache Referer:http://localhost:3000/ User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36 X-CSRF-Token:NKgNvTOCLRjE9l0lJwl3MF8yFfXH5LuLjG3NLrmD4I1FIgRoOzT7uN8rvyxNG4HSQ/2bKcVBojQ7blmuI+qWZQ== X-Requested-With:XMLHttpRequest
When I look at the request cookies, there is a fbsr_XXX cookie where XXX is my APP_ID.
I have tried using the solution to this question, basically making my ajax request as follows:
signInToFacebook: function() { FB.login(this.signInOmniAuth); }, signInOmniAuth: function(response) { $.ajax({ method: 'GET', url: '/auth/facebook/callback', data: {signed_request: response.authResponse.signedRequest}, success: function() { console.log("returned in apiutil"); debugger; } }); }, But I still get the same 500 error.
0 comments:
Post a Comment