developer tip

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

optionbox 2020. 8. 31. 07:42
반응형

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


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

여기에 이미지 설명 입력

끝난.


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

    http://localhost:8000/

I was having the same issue and found this solution right now.


This works for me in heroku, the localhost thing didn't work (for me). I hope it helps

1.) In the center under the first box of options, click "+ Add Platform" and choose "Website" (or whatever is appropriate for your app.)

2.) In the box that comes up for the website you just added: Site URL: http://MYAPP.herokuapp.com/ (replace MYAPP with the name of your app)

3.) In the box above that (Settings => Basic): App Domain: MYAPP.herokuapp.com (replace MYAPP with the name of your app)

4.) At the bottom right - click "Save Changes"


Just a note for some others who may be struggling with this as I was. I have not been able to get this to work with "test" apps. Using my actual app settings (and simply adding

"http://localhost:3000/"

to my canvas URL) worked as everyone else suggested. It seems test apps aren't equal to actual apps.


I ran into an issue with my Rails app that I usually run with http://localhost:3000 because Facebook now requires the Valid OAuth redirect to use https.

To use https locally, I used [ngrok][1] which allows you to use https by providing a tunnel. To do this:

  1. I went to their website and downloaded their program
  2. I extracted the file for the program
  3. In my console, I went into the directory where ngrok was extracted to and entered 'grok http 3000' on my Windows machine, others may use './grok http 3000'
  4. After entering that, ngrok provided a https address which I put into the Valid OAuth Redirect URIs field in Facebook
  5. Then I started my server and was able to access it using that https address instead of localhost:3000

For me it worked like this:

Configuring the facebook app dashboard:

*On the ' basic ' tab:

1) Leaving app domain empty.

2) Erasing any platform. Meaning: no website no canvas platform. (so no site-URL field to fill)

*On the 'advanced' tab:

3) I entered into the Valid OAuth redirect URIs:

http://localhost/myappfolder/redirect.php

4) regarding my code, insdie my c:/xampp/htdocs/localhost/myappfolder/index.php (this file makes the loginURL):

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

inside the redirect.php file:

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

and I got a session! finally! no need to hang myself in the end :P


to do local testing all you have to do is turn off the app, or put the facebook app in development mode. Then Facebook will allow you alone to access the app

참고 URL : https://stackoverflow.com/questions/21295872/facebook-app-localhost-no-longer-works-as-app-domain

반응형