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

Can you try with `http`, so `http://{workspace}-{username}.c9.io/` and `http://{workspace}-{username}.c9users.io/` — Brady Dowling, Dec 05 '16 at 14:23
@BradyDowling, I've attempted that, and still the result is the same — Okomikeruko, Dec 05 '16 at 16:03

Alexander Luna · Accepted Answer · 2016-12-12T16:55:14.103

2

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

The base url of your website (www.example.com)
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

edited Dec 12 '16 at 16:55

answered Dec 12 '16 at 01:28

Alexander Luna

5,261
4
30
36

I've got both `[workspace]-[username].c9.io` and `c9.io` in the App Domains field. I have `http://[workspace]-[username].c9.io/` in the Website > Site URL field, and I have `http://[workspace]-[username].c9.io/`, `http://[workspace]-[username].c9.io/auth/failure`, `http://[workspace]-[username].c9.io/auth/facebook`, & `http://[workspace]-[username].c9.io/auth/facebook/callback` in the Facebook Login > Settings > Client OAuth Settings > Valid OAuth redirect URIs field. Still doesn't work. – Okomikeruko Dec 12 '16 at 03:12
I forgot to mention, did you add your site as a platform ? If you don't add your site it won't load either. Go to Settings > Basic and look for "Add Platform". Then add you website URL there. – Alexander Luna Dec 12 '16 at 05:56
I updated my Answer for more clarity and added a screenshot of what I mean. – Alexander Luna Dec 12 '16 at 06:05
Yes, I clicked "Add Platform" Selected "Website" and added the Site Url to the field. I assumed that was clear when I said " I have http://[workspace]-[username].c9.io/ in the Website > Site URL field" in my first reply. – Okomikeruko Dec 12 '16 at 12:55
Ok, it seems that c9 adds a port number when someone access it from outside like facebook. When facebook calls the callback, it does this accesssing: http://[workspace]-[username].c9.io:80/auth/facebook/callback . Add the port number :80 at the end of c9.io in your OAuth redirect URIs – Alexander Luna Dec 12 '16 at 16:54
I did. I specified that in the original question, about adding `:80` and `:8080` and how it wasn't working. – Okomikeruko Dec 12 '16 at 16:57
Did you check the callback URL you get when accessing facebook ? Are your callback and all the URIs of your (development) AppID and AppSecret present ? Do you use the same AppID and Secret in development and production ? Could you share the c9 site so we can have a look ? – Alexander Luna Dec 12 '16 at 17:05
1

The issue was in the `config/initializers/ominauth_facebook.rb` code. The `OmniAuth::Builder` had the live app ID and SECRET pointing to the Live App instead of the Test App. Thank you for helping me track that down. – Okomikeruko Dec 12 '16 at 20:51

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

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.

edited May 23 '17 at 10:30

Community

1
1

answered Dec 07 '16 at 05:57

Brady Dowling

4,920
3
32
62

I have been adding these things to the Facebook app whitelist. It's still not working. – Okomikeruko Dec 07 '16 at 14:00

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

2 Answers2