在Heroku上通过omniauth登录的Facebook无法正常工作

Question

I built an app with Facebook login function by Rails which perfectly worked on localhost, but now it doesn't work on Heroku. It looks like a common problem everyone gets, but none of the past questions or other articles helped.

error image

The above link goes to the error image. It should be coming from Heroku but Facebook because I saw the same error when I was dealing with Stripe. Before this error started bothering me, there was another error from Facebook saying Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings. Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings. but it was solved by adding the Heroku url to the Facebook app page.

I did figaro heroku:set -e production so the app keys and secrets mush have been set in Heroku.

Here are some codes from my files;

config/initializers/devise.rb

config.omniauth :facebook, ENV["facebook_app_id"], ENV["facebook_app_secret"], scope: 'email', info_fields: 'email,name', secure_image_url: true

app/models/user.rb

def self.from_omniauth(auth)
  where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
    user.email = auth.info.email
    user.password = Devise.friendly_token[0,20]
    user.name = auth.info.name   # assuming the user model has a name
    user.image = "http://graph.facebook.com/#{auth.uid}/picture?type=large" # assuming the user model has an image
    # If you are using confirmable and the provider(s) you use validate emails,
    # uncomment the line below to skip the confirmation emails.
    # user.skip_confirmation!
  end
end

controllers/users/omniauth_callback_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    # You need to implement the method below in your model (e.g. app/models/user.rb)
    @user = User.from_omniauth(request.env["omniauth.auth"])

    if @user.persisted?
      sign_in_and_redirect @user, :event => :authentication #this will throw if @user is not activated
      set_flash_message(:notice, :success, :kind => "Facebook") if is_navigational_format?
    else
      session["devise.facebook_data"] = request.env["omniauth.auth"]
      redirect_to new_user_registration_url
    end
  end

  def failure
    redirect_to root_path
  end
end

heroku logs

2017-07-17T15:33:54.234171+00:00 app[web.1]: Started GET "/users/auth/facebook/callback?code=AQCoKbzr4 ///// 00703" for 150.116.22.144 at 2017-07-17 15:33:54 +0000
2017-07-17T15:33:54.236011+00:00 app[web.1]: I, [2017-07-17T15:33:54.235951 #4]  INFO -- omniauth: (facebook) Callback phase initiated.
2017-07-17T15:33:54.360053+00:00 app[web.1]: Processing by Users::OmniauthCallbacksController#facebook as HTML
2017-07-17T15:33:54.360097+00:00 app[web.1]:   Parameters: {"code"=>"AQCoKbzr4nv6c7BEpM ///// 86c27a00703"}
2017-07-17T15:33:54.371557+00:00 app[web.1]:   User Load (1.8ms)  SELECT  "users".* FROM "users" WHERE "users"."provider" = $1 AND "users"."uid" = $2  ORDER BY "users"."id" ASC LIMIT 1  [["provider", "facebook"], ["uid", "102081518247"]]
2017-07-17T15:33:54.581790+00:00 heroku[router]: at=info method=GET path="/users/auth/facebook/callback?code=AQCoK ///// a00703" host=xxxxxxx-xxxx-xxxxx.herokuapp.com request_id=93945-1199-417e-8d98-ede264cb fwd="150.116.22.144" dyno=web.1 connect=1ms service=350ms status=500 bytes=1754 protocol=https
2017-07-17T15:33:54.578410+00:00 app[web.1]: Completed 500 Internal Server Error in 218ms (ActiveRecord: 3.0ms)
2017-07-17T15:33:54.579175+00:00 app[web.1]: 
2017-07-17T15:33:54.579178+00:00 app[web.1]: RuntimeError (redirection forbidden: http://graph.facebook.com/102087018247/picture?type=large -> https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/13064_10202475740292_410664266178542_n.jpg?oh=ef118e9d947604c9c7055a92e2&oe=5A02F8B4):
2017-07-17T15:33:54.579178+00:00 app[web.1]:   app/models/user.rb:18:in `block in from_omniauth'
2017-07-17T15:33:54.579179+00:00 app[web.1]:   app/models/user.rb:14:in `from_omniauth'
2017-07-17T15:33:54.579180+00:00 app[web.1]:   app/controllers/users/omniauth_callbacks_controller.rb:4:in `facebook'
2017-07-17T15:33:54.579180+00:00 app[web.1]: 
2017-07-17T15:33:54.579181+00:00 app[web.1]:

I have no idea what RuntimeError from the Heroku logs indicates... Any clue or advice would be appreciated.

Answer 1

mMake sure you have whitelisted the production applications domain in Facebook Developers Console.

I usually set up a sub test app from my default app, test app has its own keys and set up ENV for them and localhost is whitelisted. This way development is easier

Then have ENV set for production app inside your App and Heroku, with Heroku domain whitelisted. Make sure your callback contains the Heroku production domain, matching the one you whitelisted

Then migrating Heroku database after the push to Heroku (this one works often for me)

heroku run rake db:migrate

Btw the way your accessing the image is different that how i've done it.

user.remote_avatar_url = auth.info.image 

if this doesn't work, tell me, i've set up a few Facebook login on Heroku in my time.

Answer 2

You got redirection error because the image url will redirect user to another url. and there is a limitation in the open-uri when redirect http to https.

In the error message you can see this url: http://graph.facebook.com/102087018247/picture?type=large will be redirected to https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/13064_10202475740292_410664266178542_n.jpg?oh=ef118e9d947604c9c7055a92e2&oe=5A02F8B4

you can work around this issue by replacing http with https in your image url

"https://graph.facebook.com/#{auth.uid}/picture?type=large"

or using this way:

user.remote_image_url = auth.info.image.gsub(/\Ahttp:/, "https")