部署Heroku后使用Facebook Passport Auth遇URL Blocked问题排查

背景 #

我近期将Web应用后端部署至Heroku，地址为https://crop-disease-backend.herokuapp.com/，并配置了对应路由。本地主机部署时Facebook认证功能正常，但部署到Heroku后出现认证错误。

错误信息 #

URL blocked
This redirect failed because the redirect URI is not white-listed in the app's client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs.

Facebook开发者控制台设置 #

相关代码 #

后端Facebook认证路由 #

app.get('/auth/facebook',
  passport.authenticate('facebook'));

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { failureRedirect: '/login' }),
  function(req, res) {
    // Successful authentication, redirect home.
    res.redirect('http://localhost:3000/home');
  });

React前端登录按钮点击事件 #

const facebookLogin = () => {
    window.open("https://crop-disease-backend.herokuapp.com/auth/facebook" , "_self")
}

疑问 #

我在Facebook开发者控制台中的配置是否正确？是否与应用处于开发模式有关？

内容的提问来源于stack exchange，提问作者Hadi Zouhbi