title: OAuth error when trying to authenticate with facebook through javascript and omniauth-facebook
body: <p>Trying to implement Ryan's JS implementation of the facebook login, via his Railscast: <a href="http://railscasts.com/episodes/360-facebook-authentication" rel="nofollow noreferrer">http://railscasts.com/episodes/360-facebook-authentication</a></p>
  
  <p>Server-side auth works fantastic--no problems there--but trying it through the JS popup keeps giving me this error:</p>
  
  <p><img src="https://i.stack.imgur.com/hDF5G.jpg" alt="enter image description here"></p>
  
  <p>Also, my server output records:</p>
  
  <pre><code>(facebook) Callback phase initiated.
  (facebook) Authentication failure! invalid_credentials: OmniAuth::Strategies::OAuth2::CallbackError, OmniAuth::Strategies::OAuth2::CallbackError
  </code></pre>
  
  <p>My gut tells me the cause is that no data is being passed to the callback URL (from Ryan's JS code at the bottom of the ASCIIcast):</p>
  
  <pre><code>window.location = '/auth/facebook/callback' if response.authResponse
  </code></pre>
  
  <p>But I don't know enough about how Omniauth works to know for sure. Can anyone help me with this? Let me know if you need me to post specific files, though everything should be verbatim what Ryan already mentions in his screencast.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong>: So I just found <a href="https://stackoverflow.com/questions/7897265/how-to-get-authorization-code-from-facebook-javascript-sdk">this post</a> and it looks like the JS is invoking correctly, so I'm stumped. :(</p>
  
  <hr>
  
  <p><strong>ANOTHER UPDATE</strong>: I can seem to manipulate my status fine using the browser console. Calling <code>FB.login()</code> prompts me with a window, which I can fill out, and it logs me in. Running</p>
  
  <pre><code>FB.getLoginStatus(function(resp) { console.log(resp.status); });
  </code></pre>
  
  <p>... confirms that I'm connected with valid credentials. So now I'm really baffled why this isn't working...</p>
  
  <p>For reference, here's my JS loaded onto the page:</p>
  
  <pre><code>jQuery -&gt;
    $('body').prepend '&lt;div id="fb-root"&gt;&lt;/div&gt;'
  
    $.ajax
      url: "#{window.location.protocol}//connect.facebook.net/en_US/all.js"
      dataType: 'script'
      cache: true
  
  window.fbAsyncInit = -&gt;
    FB.init(appId: '&lt;%= ENV["FACEBOOK_APP_ID"] %&gt;', cookie: true)
  
    $('*[data-js="fb_login"]').click (e) -&gt;
      e.preventDefault()
      FB.login (response) -&gt;
        window.location = '/auth/facebook/callback' if response.authResponse
  
    $('*[data-js="logout"]').click -&gt;
      FB.getLoginStatus (response) -&gt;
        FB.logout() if response.authResponse
        true
  </code></pre>
  
  <p>And yes, I have confirmed that <code>&lt;%= ENV["FACEBOOK_APP_ID"] %&gt;</code> IS returning my correct Facebook App ID.</p>