Facebook 앱 : localhost가 더 이상 앱 도메인으로 작동하지 않습니다.


94

저는 Rails와 jQuery를 사용하여 Facebook 용 게임을 작성하고 있습니다. Facebook Javascript SDK를 사용하기 시작한 이후로 localhost를 앱 도메인으로 사용하는 것이 잘 작동하는 것 같습니다. 로컬과 Heroku에서 내 게임을 테스트 할 수있었습니다.

지난 하루에 Facebook은 개발자 UI를 크게 업데이트 한 것으로 보입니다. 이제 localhost를 앱 도메인으로 추가하면 다음 오류가 발생합니다.

이는 캔버스 URL, 보안 캔버스 URL, 사이트 URL, 모바일 사이트 URL, 페이지 탭 URL 또는 보안 페이지 탭 URL에서 파생되어야합니다. 다음 도메인을 확인하고 수정하십시오. localhost

내 게임도 이제 로컬에서 작동하지 않으며 Javascript SDK가 사용자를 로그인 할 때 오류가 발생합니다.

API 오류 코드 : 191 API 오류 설명 : 지정된 URL은 애플리케이션이 소유하지 않습니다. 오류 메시지 : 잘못된 redirect_uri : 지정된 URL은 애플리케이션 구성에서 허용되지 않습니다.

herokuapp.com이 유효한 앱 도메인으로 간주되기 때문에 게임을 배포 할 때는 이런 일이 발생하지 않습니다.

더 이상 localhost 또는 127.0.0.1을 사용할 수없는 경우 게임을 개발하고 테스트하려면 어떻게해야합니까?


캔버스 URL, 보안 캔버스 URL, 사이트 URL, 모바일 사이트 URL, 페이지 탭 URL 또는 보안 페이지 탭 URL에 대해 어떤 값이 있습니까?
— Igy 2014 년

2
안녕하세요, 여러분은 새로운 "테스트 앱"을 만들어야합니다. 그들은 앱 설정 페이지에서 그것을 언급해야합니다. 검색 1 시간 동안 localhost : port
— Louis Grellet

@LouisGrellet, "최상위 도메인은 허용되지 않습니다"라는 메시지가 표시됩니다. 당신이 말했듯이, F ***** g
— Abhijit 사카

1
"클라이언트 oAuth 설정에서 리디렉션 URI에 엄격한 모드 사용이라고 표시된 경우 아니요로 설정되어 있는지 확인하고 저장을 누르십시오." - wp-native-articles.com/blog/news/...
— eflat

답변:


241

프로토콜이 계속 변경되는 것 같고 수락 된 답변이 오늘 저에게 효과가 없었습니다. 다른 검색 자에게 도움이되는 경우 다음과 같이 효과가있었습니다.

  • 모든 변경은 기본 탭의 설정 페이지에서 이루어졌습니다.

1.) 옵션의 첫 번째 상자 아래 중앙에서 "+ 플랫폼 추가"를 클릭하고 "웹 사이트"(또는 앱에 적합한 항목)를 선택합니다.

2.) 방금 추가 한 웹 사이트의 상자에 : 사이트 URL : http://localhost:3000/

3.) 위의 상자에서 (설정 => 기본) : 앱 도메인 : localhost

4.) 오른쪽 하단에서 "변경 사항 저장"을 클릭하십시오.

5.) 앱 ID를 복사하여 코드에 올바르게 붙여 넣었는지 확인하십시오. (ID는 다시 필요한 경우 해당 페이지의 첫 번째 상자에 있습니다.)


1
답변을 업데이트 해 주셔서 감사합니다. 실제로 원래 답변이 더 이상 작동하지 않는 것 같습니다 (그래도 원래 답변 Camilo 및 rareclass에 감사드립니다). Facebook이 이러한 변경 사항을 발표하지 않는 것은 유감입니다.
— Ravenstine 2014-06-16

1
localhost이전에는 작동하지 않았으므로 Facebook에서 최근에이 문제를 해결해야합니다 . 좋은 답변에 감사드립니다.
— dbasch

25
URL은 설정> 고급> 유효한 OAuth 리디렉션 URI 에도 나열되어야합니다 .
— Kara Brightwell 2014 년

3
더 이상 작동하지 않는 것 같습니다 :( URL이 차단됨 : 리디렉션 URI가 앱의 클라이언트 OAuth 설정에 허용되지 않았기 때문에이 리디렉션이 실패했습니다. 클라이언트 및 웹 OAuth 로그인이 켜져 있는지 확인하고 모든 앱 도메인을 유효한 OAuth로 추가하세요. URI 리디렉션
— Maria Ines Parnisari

3
더 이상 'http'를 사용할 수 없습니다. 'https'여야합니다.
— iJames

31
  1. http://developers.facebook.com 의 앱 설정 페이지로 이동합니다.
  2. 왼쪽 상단 (앱 이름 옆)에있는 드롭 다운 화살표를 클릭하고 "테스트 앱 만들기"를 클릭하고 이름을 지정합니다.
  3. 새 테스트 앱의 설정> 기본에서 앱 도메인을 "localhost"로 설정합니다.
  4. 또한 웹 사이트 사이트 URL을 " http : // localhost : 8888 "(또는 사용중인 포트)로 설정하십시오.
  5. 중요 :이 앱은 온라인 애플리케이션과 다른 앱 ID와 앱 비밀을 가지고 있습니다. 따라서 마지막 단계 : 로컬 호스트에있는 코드를 테스트 앱의 앱 ID 및 앱 시크릿으로 업데이트해야합니다. 반대로 라이브 서버에있는 코드는 메인 앱의 ID와 시크릿을 사용해야합니다.

가장 현명하고 현대적인 솔루션과 개발 환경에서도 작동하도록 prod 계정을 구성하려는 시도.
— Carl Edwards

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에 등록했다고 가정합니다
— Patrick

알아 둘만 한! 그래서 그들은 항구를 무시하는 것 같습니다.
— mgol

9

2017 년에이 문제를 안타까워하는 모든 사람을 위해. 인터페이스가 다시 변경되었습니다. 나는 이것을 대답에 대해 언급하고 싶었지만 평판이 충분하지 않습니다. 이제 앱의 로컬 호스트 URL을 세 곳에 복사해야합니다. 현재 (2017 년 10 월 26 일) 순서는 다음과 같습니다.

1.) 왼쪽 메뉴에서 "설정"을 클릭하십시오.

2.) 옵션의 첫 번째 상자 아래 중앙에서 "+ 플랫폼 추가"를 클릭하고 "웹 사이트"(또는 앱에 적합한 항목)를 선택합니다.

3.) 방금 추가 한 웹 사이트의 상자에 localhost 사이트 URL (fe http : // localhost : 3000 / )을 복사합니다 .

4.) "앱 도메인"위의 상자에 동일한 URL을 복사합니다.

5.) 오른쪽 하단에서 "변경 사항 저장"을 클릭하십시오.

6.) "제품"의 왼쪽 메뉴에서 "Facebook 로그인"을 클릭합니다 (또는 사용할 수없는 경우 "+ 제품 추가"를 통해 추가).

7.) 이제 Facebook 로그인 설정에 있습니다. "유효한 OAuth 리디렉션 URI"필드에 동일한 URL을 복사합니다.

작동합니다.


2
Facebook은 유효한 OAuth 리디렉션 URI에 대해 더 이상 "http"를 허용하지 않습니다.
— OmNiOwNeR

5

캔버스 URL 또는 모바일 사이트 URL로 localhost를 추가하면 앱 도메인 설정에서 localhost와 herokuapp.com을 모두 가질 수 있습니다. 그런 다음 앱이 프로덕션에 들어가면 제거하면됩니다.


5

이것은 잘못된 방법입니다. 앱 설정에서 테스트 탭을 사용하여 테스트 애플리케이션을 만들어야합니다. 그런 다음 애플리케이션에 개발 단계 URL (예 : localhost)을 입력 할 수 있습니다.


1
테스트 앱을 만들었지 만 작동하지 않았습니다. 더 자세한 사항은?
— Roger Gajraj

예, 전체 지침을 참조하십시오이 올바른 방법이라고 생각 stackoverflow.com/a/38173031/3625739
— 게오르기을

5

Firebase를 사용한 솔루션

이 작업을 수행하기 위해 localhost포트 3000에서 다음을 수행했습니다.

  1. 앱 생성

테스트 앱 만들기

  1. 이제 화살표 드롭 다운 (왼쪽 상단)에서 "+ Create Test App"을 선택합니다.

여기에 이미지 설명 입력

  1. localhost앱 도메인에 추가

여기에 이미지 설명 입력

  1. 추가 http://localhost:3000/선택하여 사이트 URL에 "+ 추가 플랫폼"

여기에 이미지 설명 입력

지금까지 여기에 제출 된 모든 이전 답변을 따랐지만 아무것도 작동하지 않았습니다.

그래서...

  1. 왼쪽 메뉴에서 "제품 추가"를 선택합니다.

  2. "Facebook 로그인"추가

기본 도메인이있는 워크 플로 캐 러셀이 표시 http://localhost:3000/되면 끝까지 "계속"을 클릭합니다.

  1. 제품 메뉴에서 "Facebook 로그인> 설정"을 선택합니다.

  2. Firebase OAuth 리디렉션 URI를 입력합니다 (Firebase 콘솔 https://console.firebase.google.com 에서 Facebook 로그인을 활성화 할 때 찾을 수 있음 , 아래 예).

여기에 이미지 설명 입력

  1. URI를 붙여넣고 저장합니다.

여기에 이미지 설명 입력

끝난.


2

포트와 함께 URL을 사용해보십시오.

    http://localhost:8000/

나는 같은 문제가 있었고 지금이 해결책을 찾았습니다.


1
당신은 플랫폼 '페이스 북 앱'을 추가하고 추가해야 8000 : localhost를 캔버스 URL로
— Tachun 린

1

이것은 heroku에서 나를 위해 작동하며 localhost는 작동하지 않았습니다. 도움이 되길 바랍니다

1.) 옵션의 첫 번째 상자 아래 중앙에서 "+ 플랫폼 추가"를 클릭하고 "웹 사이트"(또는 앱에 적합한 항목)를 선택합니다.

2.) 방금 추가 한 웹 사이트의 상자에서 : 사이트 URL : http://MYAPP.herokuapp.com/(MYAPP을 앱 이름으로 대체)

3.) 위의 상자 (설정 => 기본) : 앱 도메인 : MYAPP.herokuapp.com (MYAPP을 앱 이름으로 대체)

4.) 오른쪽 하단에서 "변경 사항 저장"을 클릭하십시오.


1

나처럼이 문제로 어려움을 겪고있는 다른 사람들을위한 메모입니다. "테스트"앱에서이 기능을 사용할 수 없었습니다. 내 실제 앱 설정을 사용하고

"http://localhost:3000/"

내 캔버스 URL에) 다른 사람들이 제안한대로 작동했습니다. 테스트 앱이 실제 앱과 같지 않은 것 같습니다.


1

Facebook에서 https를 사용하려면 유효한 OAuth 리디렉션이 필요하기 때문에 일반적으로 http : // localhost : 3000 으로 실행하는 Rails 앱에 문제가 발생했습니다 .

로컬에서 https를 사용하기 위해 터널을 제공하여 https를 사용할 수있는 [ngrok] [1]을 사용했습니다. 이것을하기 위해:

  1. 나는 그들의 웹 사이트에 가서 그들의 프로그램을 다운로드했다
  2. 프로그램 파일을 추출했습니다.
  3. 내 콘솔에서 ngrok가 추출 된 디렉토리로 이동하여 Windows 시스템에 'grok http 3000'을 입력했으며 다른 사용자는 './grok http 3000'을 사용할 수 있습니다.
  4. 입력 후 ngrok는 Facebook의 유효한 OAuth 리디렉션 URI 필드에 입력 한 https 주소를 제공했습니다.
  5. 그런 다음 서버를 시작하고 localhost : 3000 대신 https 주소를 사용하여 서버에 액세스 할 수있었습니다.

1

로컬 테스트를 수행하려면 앱을 끄거나 페이스 북 앱을 개발 모드로 설정하기 만하면됩니다. 그러면 Facebook에서 혼자서 앱에 액세스 할 수 있습니다.


0

나를 위해 다음과 같이 작동했습니다.

Facebook 앱 대시 보드 구성 :

* '기본'탭 :

1) 앱 도메인을 비워 둡니다.

2) 모든 플랫폼을 삭제합니다. 의미 : 웹 사이트 없음 캔버스 플랫폼 없음. (따라서 채울 사이트 URL 필드가 없음)

* '고급'탭에서 :

3) 유효한 OAuth 리디렉션 URI를 입력했습니다.

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.