CORS issue with Facebook JS SDK cookie and omniauth-facebook

I implement Sign In with Facebook in my project, which consists of two applications:

  • Frontend : simple HTML + CSS + JS;
  • Backend : API Rails 5 (omniauth 1.3.1, omniauth-facebook 3.0.0);

Even in my local environment, both applications work in different domains ( frontend.dev.azk.ioand api.dev.azk.io).

I run the FB SDK in my external application, and after successful login, I have to ping the OAuth ( http://api.dev.azk.io/api/v1/users/auth/facebook/callback) callback so that I omniauth-facebookcan access the cookie fbsr_XXX, analyze it and exchange the current one accessTokenfor a long time.

The main problem is that the cookie set by the FB SDK belongs to the domain interface and is not sent in the header of the API request, i.e. omniauth-facebookcannot access it:

ERROR -- omniauth: (facebook) Authentication failure! no_authorization_code: OmniAuth::Strategies::Facebook::NoAuthorizationCodeError, must pass either a `code` (via URL or by an `fbsr_XXX` signed request cookie)

At this point, I thought of two possible approaches:

1) Check the CORS and AJAX configurations so that the cookie can be sent to the API request;

2) analyze the FB response in the external interface (using this algorithm ) and send the codeattribute to the API;

Approach 1

Inspired by this incredibly similar question here at SO, I made the following configurations:

routes.rb

devise_for :users, path_prefix: 'api/v1', controllers: {
  sessions:           'api/v1/sessions',
  registrations:      'api/v1/registrations',
  omniauth_callbacks: 'api/v1/omniauth_callbacks',
}

application.rb

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'frontend.dev.azk.io'
    resource '*',
      headers: :any,
      credentials: true,
      methods: [:get, :put, :post, :patch, :delete, :options]
  end
end

devise.rb

config.omniauth :facebook, oauth_providers['facebook']['app_id'], oauth_providers['facebook']['secret'], {
  scope: 'email,user_birthday,user_about_me,public_profile',
  provider_ignores_state: true
}

Client application

$.ajax({
  type: 'GET',
  url: 'http://api.dev.azk.io/api/v1/users/auth/facebook/callback',
  crossDomain: true,
  xhrFields: { withCredentials: true },
}) . . .

However, this is not enough to send a cookie fbsr_XXX(present in the browser). Is there something I am missing?

Approach 2

omniauth-facebook cookie, signedRequest, FB, code API.

, , omniauth-facebook callback_url, , :

ERROR -- omniauth: (facebook) Authentication failure! invalid_credentials: OAuth2::Error, : 
{"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":"BavpcDFblHy"}}

, , . , , , - .

+4

All Articles