Приложение Facebook: localhost больше не работает как домен приложения

94

Я писал игру для Facebook, используя Rails и jQuery. С тех пор, как я начал использовать Facebook Javascript SDK, использование localhost в качестве домена приложения, похоже, работало нормально. Я смог протестировать свою игру как локально, так и на Heroku.

Похоже, что за прошедший день Facebook сильно обновил пользовательский интерфейс разработчика. Теперь, если я добавлю localhost в качестве домена приложения, я получу следующую ошибку:

Он должен быть получен из URL-адреса холста, URL-адреса защищенного холста, URL-адреса сайта, URL-адреса мобильного сайта, URL-адреса вкладки страницы или URL-адреса вкладки защищенной страницы. Проверьте и исправьте следующие домены: localhost

Моя игра также теперь не работает локально, и я получаю сообщение об ошибке, когда Javascript SDK входит в систему пользователя:

Код ошибки API: 191 Описание ошибки API: указанный URL-адрес не принадлежит приложению. Сообщение об ошибке: недопустимый redirect_uri: указанный URL-адрес не разрешен конфигурацией приложения.

Этого не происходит, когда я развертываю свою игру, поскольку herokuapp.com считается допустимым доменом приложения.

Как мне разработать и протестировать свою игру, если я больше не могу использовать localhost или 127.0.0.1?

javascript ruby-on-rails facebook heroku Ravenstine
источник
Какие значения у вас есть для URL-адреса холста, URL-адреса защищенного холста, URL-адреса сайта, URL-адреса мобильного сайта, URL-адреса вкладки страницы или URL-адреса вкладки защищенной страницы?
Igy
2
Привет, ребята, я понял, вам нужно создать новое «тестовое приложение», они должны, черт возьми, упомянуть его на странице настроек приложения, 1 час поиска, чтобы наконец заставить его работать на localhost: port
Луи Грелле
@LouisGrellet, ну я получаю "Домены верхнего уровня не разрешены". Как ты и сказал,
Абхиджит Саркар
1
«В настройках клиента oAuth, где указано« Использовать строгий режим для URI перенаправления », убедитесь, что для него установлено значение« Нет »и нажмите« Сохранить ». - wp-native-articles.com/blog/news/…
eflat

Ответы:

241

Протокол, кажется, продолжает меняться, и принятый ответ сегодня у меня не сработал. В случае, если это поможет другим поисковикам, вот что сработало для меня:

  • Все изменения были внесены на странице настроек на вкладке Основные.

1.) В центре под первым полем опций нажмите «+ Добавить платформу» и выберите «Веб-сайт» (или что-то еще, подходящее для вашего приложения).

2.) В открывшемся окне для только что добавленного веб-сайта: URL-адрес сайта: http://localhost:3000/

3.) В поле выше (Настройки => Основные): Домен приложения: localhost

4.) В правом нижнем углу нажмите «Сохранить изменения».

5.) Убедитесь, что идентификатор приложения правильно скопирован и вставлен в код. (Идентификатор находится в первом поле на этой странице, если он вам снова понадобится.)

Тейлор714
источник
1
Спасибо за обновление ответа. Действительно, похоже, что исходный ответ больше не работает (тем не менее, спасибо за ваши оригинальные ответы, Камило и раритет). Жаль, что Facebook никогда не объявляет об этих изменениях.
Ravenstine
26
Обратите внимание, что ваш URL-адрес также должен быть указан в разделе «Настройки»> «Дополнительно»> «Действительные URI перенаправления OAuth» .
Кара Брайтвелл
4
Кажется, это больше не работает :( Я получаю URL-адрес заблокирован: это перенаправление не удалось, потому что URI перенаправления не внесен в белый список в настройках OAuth клиента приложения. Убедитесь, что вход в клиентский и веб-OAuth включен, и добавьте все свои домены приложений как действительный OAuth Перенаправление URIs.
Мария Инес Parnisari
3
Вам больше не разрешено использовать http. Это должно быть https.
iJames 07
2
Этот ответ уже неверен. Вы не можете использовать localhost в поле доменов приложений при базовых настройках
Майкл Робеллард,
31
  1. Перейдите на страницу настроек вашего приложения на http://developers.facebook.com
  2. Щелкните стрелку раскрывающегося списка в верхнем левом углу (рядом с названием вашего приложения), нажмите «Создать тестовое приложение» и дайте ему имя.
  3. В разделе «Настройки»> «Основные» этого нового тестового приложения установите для доменов приложений значение «localhost».
  4. Также установите URL-адрес веб-сайта как « http: // localhost: 8888 » (или любой другой порт, который вы используете).
  5. ВАЖНО: это приложение имеет другой идентификатор приложения и секрет приложения, нежели ваше онлайн-приложение. Итак, последний шаг: убедитесь, что вы обновили код, который находится на вашем локальном хосте, с помощью идентификатора приложения Test App и секретного кода приложения. Напротив, код, который находится на реальном сервере, должен использовать идентификатор и секрет основного приложения.
Георгиос
источник
Наиболее разумное / современное решение по сравнению с попыткой настроить вашу учетную запись prod для работы с dev env.
Карл Эдвардс
13

Вы по-прежнему можете протестировать свое приложение, не развертывая его на удаленном сервере, таком как heroku. Хитрость заключается в том, чтобы обновить etc/hostsфайл следующим образом:

127.0.0.1 mydomain.com

Затем в настройках приложения Facebook введите [ http: //] mydomain.com без "[" и "]"

Это сработало для меня так

Патрик
источник
Это не сработает, если вы используете нестандартный порт, что обычно делают люди, если они разрабатывают много приложений параллельно.
mgol
1
Это будет работать, я использовал python -m SimpleHTTPServer для обслуживания на порту 8000 и example.com:8000/test-facebook.html при условии ожидаемого результата. Я предполагаю, что вы зарегистрировали 127.0.0.1 example.com в / etc / hosts
Патрик
Хорошо знать! Так что они, кажется, игнорируют порт, странно.
mgol
9

Для всех, кто возится с этим в 2017 году. Интерфейс снова изменился. Я хотел прокомментировать ответ, но у меня недостаточно репутации. URL-адрес localhost вашего приложения теперь нужно скопировать в три места. В настоящее время (26 октября 2017 г.) последовательность такова:

1.) Нажмите «Настройки» в левом меню.

2.) В центре под первым полем опций нажмите «+ Добавить платформу» и выберите «Веб-сайт» (или то, что подходит для вашего приложения).

3.) В поле, которое появляется для только что добавленного вами веб-сайта, скопируйте URL-адрес вашего сайта localhost (например, http: // localhost: 3000 / ).

4.) В поле выше "Домен приложения" скопируйте тот же URL.

5.) В правом нижнем углу нажмите «Сохранить изменения».

6.) В левом меню в разделе «Продукты» нажмите «Вход в Facebook» (или добавьте его с помощью «+ Добавить продукты», если он недоступен).

7.) Теперь вы находитесь в настройках входа в Facebook. Скопируйте тот же URL в поле "Действительные URI перенаправления OAuth".

Это должно работать.

Imre_G
источник
2
Обратите внимание, что Facebook больше не разрешает "http" для действительных URI перенаправления OAuth
OmNiOwNeR,
5

Просто добавьте localhost в качестве URL-адреса вашего холста или URL-адреса мобильного сайта, это позволит вам указать как localhost, так и herokuapp.com в настройках домена приложения. Затем, когда ваше приложение будет запущено в производство, просто удалите его.

редкий класс
источник
5

Это неправильный путь. Вы должны создать тестовое приложение, используя вкладку «Тест» в настройках приложения. Затем вы можете ввести URL-адрес стадии разработки (например, localhost) в свое приложение.

Эсреф Атак
источник
1
Я создал тестовое приложение, но оно не сработало. Есть еще подробности?
Роджер Гаджрадж
Да, я считаю, что это правильный путь, см. Полные инструкции stackoverflow.com/a/38173031/3625739
georgios
5

Решение с использованием Firebase

Чтобы это заработало localhost, порт 3000я сделал следующее:

  1. Создать приложение

Создать тестовое приложение

  1. Теперь выберите «+ Создать тестовое приложение» в раскрывающемся списке со стрелкой (вверху слева).

введите описание изображения здесь

  1. Добавить localhostв домены приложений

введите описание изображения здесь

  1. Добавить http://localhost:3000/на сайт URL выбранным «+ Добавить платформу»

введите описание изображения здесь

До этого момента я следил за всеми предыдущими ответами, представленными здесь, но ничего не работало.

Так...

  1. В меню слева выберите «Добавить продукт».

  2. Добавить «Вход в Facebook»

Вам будет представлена ​​карусель рабочего процесса с доменом по умолчанию http://localhost:3000/, нажмите «продолжить» до конца.

  1. Выберите «Вход в Facebook> Настройки» в меню продукта.

  2. Введите URI перенаправления Firebase OAuth (его можно найти при включении входа в Facebook в консоли firebase https://console.firebase.google.com , пример ниже)

введите описание изображения здесь

  1. Вставьте URI и сохраните.

введите описание изображения здесь

Готово.

Мэтт Д. Уэбб
источник
2

Попробуйте использовать URL-адрес с портом, например 

    http://localhost:8000/

У меня была такая же проблема, и я нашел это решение прямо сейчас.

Камило
источник
1
Вам нужно добавить «Приложение на Facebook» в качестве платформы и добавить localhost: 8000 в URL-адрес Canvas
Тачун Линь
1

Это работает для меня в heroku, вещь localhost не работает (для меня). Я надеюсь, что это помогает

1.) В центре под первым полем параметров нажмите «+ Добавить платформу» и выберите «Веб-сайт» (или что-то еще, подходящее для вашего приложения).

2.) В открывшемся окне для только что добавленного веб-сайта: URL-адрес сайта: http://MYAPP.herokuapp.com/ (замените MYAPP на имя вашего приложения)

3.) В поле выше (Настройки => Базовый): Домен приложения: MYAPP.herokuapp.com (замените MYAPP именем вашего приложения)

4.) В правом нижнем углу нажмите «Сохранить изменения».

гаманокс
источник
1

Просто примечание для некоторых других, которые, возможно, борются с этим, как и я. Мне не удалось заставить это работать с «тестовыми» приложениями. Используя мои фактические настройки приложения (и просто добавляя

"http://localhost:3000/"

на мой URL-адрес холста) работал, как предлагали все остальные. Кажется, что тестовые приложения не равны реальным приложениям.

user1775485
источник
1

У меня возникла проблема с моим приложением Rails, которое я обычно запускаю с http: // localhost: 3000, потому что Facebook теперь требует перенаправления Valid OAuth для использования https.

Чтобы использовать https локально, я использовал [ngrok] [1], который позволяет использовать https, предоставляя туннель. Сделать это:

  1. Я зашел на их сайт и скачал их программу
  2. Я извлек файл для программы
  3. В своей консоли я зашел в каталог, в который был извлечен ngrok, и ввел «grok http 3000» на моем компьютере с Windows, другие могут использовать «./grok http 3000».
  4. После этого ngrok предоставил https-адрес, который я ввел в поле Valid OAuth Redirect URIs в Facebook.
  5. Затем я запустил свой сервер и смог получить к нему доступ, используя адрес https вместо localhost: 3000.
Yellowreign
источник
1

чтобы провести локальное тестирование, все, что вам нужно сделать, это выключить приложение или перевести приложение facebook в режим разработки. Тогда Facebook позволит вам одному получить доступ к приложению.

Питер Угах
источник
0

Для меня это работало так:

Настройка панели управления приложения facebook:

* На вкладке "Основные":

1) Оставить домен приложения пустым.

2) Стирание любой платформы. Значение: нет веб-сайта или холста. (поэтому нет поля URL-адреса сайта для заполнения)

* На вкладке «Дополнительно»:

3) Я ввел действительные URI перенаправления OAuth:

http://localhost/myappfolder/redirect.php

4) относительно моего кода, введите мой c: /xampp/htdocs/localhost/myappfolder/index.php (этот файл делает loginURL):

$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');

внутри файла redirect.php:

$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');

и я получил сеанс! Ну наконец то! не надо в конце концов вешаться: P

Охад Глейх
источник