Ruby on Rails OmniAuth Facebook works for Live App on Heroku but not Test App on Cloud9

Question

I have been struggling to figure this problem out for weeks, and I just can't figure it out.

I am managing a Ruby On Rails app that posts to Facebook. The development environment is in a Cloud9 IDE and the live site is hosted on Heroku. The app has a corresponding account with Developers.Facebook.com with a full app and a test app associated with it.

I have my Heroku settings working perfectly with the full Facebook App.

The problems start with the Cloud9 settings in the Facebook Test App. Whenever I attempt to connect via the API, I get the following error:

Immediately followed by this error:

I have tried using the following options for my URL but nothing seems to be working:

https://{workspace}-{username}.c9.io/
https://{workspace}-{username}.c9.io:80/
https://{workspace}-{username}.c9.io:8080/
https://{workspace}-{username}.c9users.io/
https://{workspace}-{username}.c9users.io:80/
https://{workspace}-{username}.c9users.io:8080/

Here's my FacebookAccount model.

class FacebookAccount < ActiveRecord::Base
  belongs_to :user
  has_many :facebook_pages

  if Rails.env.production?
    FACEBOOK_APP_ID = ENV["FACEBOOK_APP_ID"]
    FACEBOOK_SECRET = ENV["FACEBOOK_SECRET"]
  else
    FACEBOOK_APP_ID = "XXXXXXXXXXXXXXX"
    FACEBOOK_SECRET = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  end

  def self.from_omniauth(auth)
    oauth = Koala::Facebook::OAuth.new(FACEBOOK_APP_ID, FACEBOOK_SECRET)
    new_access_info = oauth.exchange_access_token_info auth.credentials.token
    new_access_token = new_access_info["access_token"]
    new_access_expires_at = DateTime.now + new_access_info["expires"].to_i.seconds
    where(provider: auth.provider, uid: auth.uid).first_or_initialize.tap do |facebook_account|
      facebook_account.provider         = auth.provider
      facebook_account.uid              = auth.uid
      facebook_account.name             = auth.info.name
      facebook_account.image            = auth.info.image
      facebook_account.email            = auth.info.email
      facebook_account.oauth_token      = new_access_token
      facebook_account.oauth_expires_at = new_access_expires_at
      facebook_account.save!
    end
  end
end

Answer 1

When you set the urls for your website in the Facebook Developer Settings page, you have to provide two urls.

1. The base url of your website (www.example.com)
2. The callback url of your website (www.example.com/auth/facebook/callback)

If one or the other is not present, you will get those errors telling you that the callback url is not whitelisted or the website url is not whitelisted.

Add you website as a platform under Settings > Basic then look for "Add Platform". Add your website URL there.

It seems that c9 adds a port number to the callback URI. Try adding that port number to the OAuth valid callback URIs:

http://[workspace]-[username].c9.io:80/auth/facebook/callbac‌​k

Answer 2

Looks like this is an issue with how you've registered and configured your app in Facebook. Be sure you've added these URIs to your Facebook app whitelist. See here for more details.