Facebook App : This must be derived from Canvas UR

问题:

Hi I wan't to create a facebook app to use it for the auth in my new site locally installed(my machine),but from yesterday I don't succeed to install it and use it, all time I have this very strange error when I wan't write a domain in the "App Domains" :

This must be derived from Canvas URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains

the domain of my application is http://localhost/project/app_dev.php/ it dosn't work I change it by a real url such as : http://www.exemple.com/,but I had the same error,and just I notice that I see this error when I create an app with new look of facebook (yesterday)...

回答1:

The only allowed values in the App Domains field are URLs you already entered in at least one of you Select how your app integrates with Facebook block:

Website with Facebook Login - URL
App on Facebook - Canvas
etc for the others

回答2:

In my case the problem was I hadn't completed the "+ Add Platform > Website" section. Once I did that the contents of App Domains became valid and the error went away.

回答3:

I had this same problem yesterday, the stackoverflow answers that helped me the most were Make local development work with Facebook/Google APIs and Canvas URL / Secure Canvas URL error message ( Also checkout How to handle OmniAuth callbacks in multiple environments?)

The Facebook developer UI has changed a bit. I'm writing this answer to consolidate all the info that helped me.

1. Make local.host Point to Your Computer

First thing you need to do is (as answered in the first link), facebook won't take localhost as a valid callback site, because it confuses localhost with a top level domain (com org etc.) in other words there is not dot . in your domain name. So change your /etc/hosts to add the entry

127.0.0.1   local.host

Now youcan access your app at http://local.host/... (this will take effect as soon as you save /etc/hosts file, no need to restart anything)

2. Add local.host as the Site URL on the facebook Dev Console

The second thing you need to do is add local.host as the site url on the facebook page

Now don't use your production app. Add a dummy app on your https://developers.facebook.com account Because your production app will have to set the site URL to your production URL and not local.host

Configure the dummy app as shown in the screenshot. But that website section(shown in the screenshot) won't be visible on the Basic settings page from the beginning.

First you will have to click + Add Platform button at the bottom, and select Website.

Notice I added http://local.host:3000/. That's where my ruby server runs in dev mode.

Also, be sure to use App Id and App Secret for the dummy app when running your webapp in dev mode.

HTH.

回答4:

My problem was that logging in with facebook wasn't working for my app.

It turned out that I just needed to fill in the "Valid OAuth redirect URIs" field on the "Advanced" tab.

e.g. http://example.com/auth/google/callback

回答5:

I'd a similar problem, Facebook have changed now on left pane file login (After selecting you app from top left corner) -> Valid OAuth redirect URIs

回答6:

If you work on desktop app like WPF or winforms and use a WebBrowser Control to log in with the Facebook SDK. You have to set to yes the Embedded Browser OAuth Login in Advance Tab of your facebook apps setting. hope I help

回答7:

Chose "Add platform" at the bottom and give your localhost url. "http://localhost:port/".

After this step. Facebook allows you to add localhost:port as your domain url.

After these 2 steps you can test "login with facebook" without any trouble.