"Given URL is not whitelisted in Client OAuth Settings" on Facebook login at a test host

Question

I am using Facebook PHP SDK to implement login with facebook. And I want to test it in local first. I created a test app and I tried many things but still does not work for me.

In my local I have an apache virtual host configured so that I can access my local web app with this url: http://www.myapplocal.com

Here is the error that I get after signing in with facebook:

Given URL is not whitelisted in Client OAuth Settings: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

And here is what I have in the oauth settings section:

Client OAuth Login: yes
Web OAuth Login: yes
Force Web OAuth Reauthentication: no
Embedded Browser OAuth Login: no
Valid OAuth redirect URIs: http://www.myapplocal.com/index.php/facebook-login-callback
Login from Devices: no

And here is what I have in the section "Basic" (https://developers.facebook.com/apps/appid/settings/basic/):

Namespace:
App domains: www.myapplocal.com
Site Url: http://www.myapplocal.com/

Answer 1

After implementing login with google and login with twitter, I did not think that login with facebook would handle URLs differently. The problem was that for facebook, if your site works with both www and without it (http://example.com, http://www.example.com), you have to enter both in the app settings (http://www.example.com/facebook-callback and http://example.com/facebook-callback)