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

Program / 글쓴이

저는 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을 사용할 수없는 경우 게임을 개발하고 테스트하려면 어떻게해야합니까?

답변

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

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

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

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

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

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

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

답변

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

답변

heroku와 같은 원격 서버에 배포하지 않고도 앱을 테스트 할 수 있습니다. 트릭은 다음과 같이 etc/hosts파일 을 업데이트하는 것입니다.

127.0.0.1 mydomain.com

그런 다음 Facebook 앱의 설정 에서 “[“및 “]”없이 [ http : //] mydomain.com을 입력합니다 .

이 방식으로 나를 위해 일했습니다.

답변

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

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

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

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

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

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

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

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

작동합니다.

답변

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

답변

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

답변

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를 붙여넣고 저장합니다.

여기에 이미지 설명 입력

끝난.