Application Facebook: localhost ne fonctionne plus comme domaine d'application


94

J'ai écrit un jeu pour Facebook en utilisant Rails et jQuery. Depuis que j'ai commencé à utiliser le SDK Javascript Facebook, utiliser localhost comme domaine d'application semblait très bien fonctionner. J'ai pu tester mon jeu à la fois localement et sur Heroku.

Au cours des derniers jours, il semble que Facebook ait effectué une grande mise à jour de l'interface utilisateur de son développeur. Maintenant, si j'ajoute localhost en tant que domaine d'application, cela me donne l'erreur suivante:

Cela doit être dérivé de l'URL du canevas, de l'URL du canevas sécurisé, de l'URL du site, de l'URL du site mobile, de l'URL de l'onglet de page ou de l'URL de l'onglet de la page sécurisée. Vérifiez et corrigez les domaines suivants: localhost

Mon jeu ne fonctionne pas non plus localement et j'obtiens une erreur lorsque le SDK Javascript connecte l'utilisateur:

Code d'erreur API: 191 Description de l'erreur API: l'URL spécifiée n'appartient pas à l'application Message d'erreur: redirect_uri non valide: l'URL donnée n'est pas autorisée par la configuration de l'application.

Cela ne se produit pas lorsque je déploie mon jeu, car herokuapp.com est considéré comme un domaine d'application valide.

Comment dois-je développer et tester mon jeu si je ne peux plus utiliser localhost ou 127.0.0.1?


Quelles valeurs avez-vous pour l'URL du canevas, l'URL sécurisée du canevas, l'URL du site, l'URL du site mobile, l'URL de l'onglet de page ou l'URL de l'onglet de la page sécurisée?
Igy

2
hé les gars je l'ai, vous devez créer une nouvelle "application de test", ils devraient f ***** g le mentionner sur la page des paramètres de l'application, 1h de recherche pour enfin le faire fonctionner sur localhost: port
Louis Grellet

@LouisGrellet, Eh bien, j'obtiens "Les domaines de premier niveau ne sont pas autorisés". Comme tu l'as dit, f ***** g
Abhijit Sarkar

1
«Sous les paramètres oAuth du client, où il est indiqué Utiliser le mode strict pour les URI de redirection, assurez-vous qu'il est défini sur Non et que l'appel est enregistré.» - wp-native-articles.com/blog/news/…
eflat

Réponses:


241

Le protocole semble continuer à changer et la réponse acceptée n'a pas fonctionné pour moi aujourd'hui. Au cas où cela aiderait d'autres chercheurs, voici ce qui a fonctionné pour moi:

  • Toutes les modifications ont été apportées sur la page Paramètres sous l'onglet De base

1.) Dans le centre sous la première boîte d'options, cliquez sur "+ Ajouter une plateforme" et choisissez "Site Web" (ou tout ce qui est approprié pour votre application.)

2.) Dans la case qui s'affiche pour le site Web que vous venez d'ajouter: URL du site: http://localhost:3000/

3.) Dans la case ci-dessus (Paramètres => De base): Domaine d'application: localhost

4.) En bas à droite - cliquez sur "Enregistrer les modifications"

5.) Assurez-vous que l'ID de l'application est copié et collé correctement dans votre code. (L'ID se trouve dans la première case de cette page si vous en avez à nouveau besoin.)


1
Merci d'avoir mis à jour la réponse. En effet, il semble que la réponse originale ne fonctionne plus (encore, merci pour vos réponses originales Camilo et rareclass). C'est dommage que Facebook ne semble jamais annoncer ces changements.
Ravenstine

1
Facebook doit avoir récemment résolu ce problème pour fonctionner, localhostcar cela ne fonctionnait pas auparavant. Merci pour la bonne réponse.
dbasch le

25
Notez que votre URL doit également être répertoriée dans Paramètres> Avancé> URI de redirection OAuth valides .
Kara Brightwell

3
Cela ne semble plus fonctionner :( J'obtiens une URL bloquée: cette redirection a échoué car l'URI de redirection ne figure pas sur la liste blanche dans les paramètres OAuth client de l'application. Assurez-vous que la connexion OAuth client et Web est activée et ajoutez tous vos domaines d'application en tant qu'OAuth valide. Rediriger les URI.
Maria Ines Parnisari

3
Vous n'êtes plus autorisé à utiliser «http». Ça doit être «https».
iJames

31
  1. Accédez à la page des paramètres de votre application sur http://developers.facebook.com
  2. Cliquez sur la flèche déroulante en haut à gauche (à côté du nom de votre application) et cliquez sur "Créer une application de test" et donnez-lui un nom
  3. Dans les paramètres> de base de cette nouvelle application de test, définissez les domaines d'application comme "hôte local"
  4. Définissez également l'URL du site Web sur " http: // localhost: 8888 " (ou quel que soit le port que vous utilisez).
  5. IMPORTANT: cette application a un ID d'application et un secret d'application différents de votre application en ligne. Donc, dernière étape: assurez-vous de mettre à jour le code qui se trouve dans votre hôte local avec l'ID d'application et le secret d'application de l'application de test. Au contraire, le code qui se trouve dans le serveur en direct doit utiliser l'ID et le secret de l'application principale.

Solution la plus sensée / moderne vs essayer de configurer votre compte prod pour qu'il fonctionne également avec un environnement de développement.
Carl Edwards

13

Vous pouvez toujours tester votre application sans la déployer sur un serveur distant tel que heroku. L'astuce consiste à mettre à jour le etc/hostsfichier de cette façon:

127.0.0.1 mydomain.com

Ensuite, dans les paramètres de l'application Facebook, tapez [ http: //] mydomain.com, sans les "[" et "]"

Cela a fonctionné pour moi de cette façon


Cela ne fonctionnera pas si vous utilisez un port non standard, ce que font généralement les gens s'ils développent de nombreuses applications en parallèle.
mgol

1
Cela fonctionnera, j'ai utilisé python -m SimpleHTTPServer pour servir sur le port 8000, et example.com:8000/test-facebook.html , a fourni le résultat attendu. Je suppose que vous avez enregistré 127.0.0.1 example.com dans le fichier / etc / hosts
Patrick

Bon à savoir! Alors ils semblent ignorer le port, bizarre.
mgol

9

Pour tous ceux qui agitent avec cela en 2017. L'interface a encore changé. Je voulais commenter ceci à la réponse mais je n'ai pas assez de réputation. L'URL localhost de votre application doit maintenant être copiée à trois emplacements. Actuellement (26 octobre 2017) la séquence est:

1.) Cliquez sur "Paramètres" dans le menu de gauche.

2.) Dans le centre sous la première boîte d'options, cliquez sur "+ Ajouter une plateforme" et choisissez "Site Web" (ou tout ce qui est approprié pour votre application.)

3.) Dans la boîte qui s'affiche pour le site Web que vous venez d'ajouter, copiez l'url de votre site localhost (par exemple http: // localhost: 3000 / )

4.) Dans la case ci-dessus, "Domaine d'application" copiez la même URL

5.) En bas à droite - cliquez sur "Enregistrer les modifications"

6.) Dans le menu de gauche sous "Produits", cliquez sur "Connexion Facebook" (ou ajoutez-le via "+ Ajouter des produits" s'il n'est pas disponible)

7.) Vous êtes maintenant dans les paramètres de connexion Facebook. Copiez la même URL dans le champ "URI de redirection OAuth valides"

Cela devrait fonctionner.


2
Notez que Facebook n'autorise plus "http" pour les URI de redirection OAuth valides
OmNiOwNeR

5

Ajoutez simplement localhost comme URL de canevas ou URL de site mobile, cela vous permettra d'avoir à la fois localhost et herokuapp.com dans les paramètres de votre domaine d'application. Ensuite, une fois que votre application est en production, supprimez-la simplement.


5

C'est faux. Vous devez créer une application de test à l'aide de l'onglet Test dans les paramètres de l'application. Ensuite, vous pouvez entrer votre URL de phase de développement (par exemple localhost) dans votre application.


1
J'ai créé une application de test mais cela n'a pas fonctionné. Plus de détails?
Roger Gajraj

Oui, je pense que c'est la bonne façon, voir les instructions complètes stackoverflow.com/a/38173031/3625739
georgios

5

Solution utilisant Firebase

Afin de faire fonctionner cela localhost, le port 3000j'ai fait ce qui suit:

  1. Créer une application

Créer une application de test

  1. Sélectionnez maintenant "+ Créer une application de test" dans la liste déroulante des flèches (en haut à gauche).

entrez la description de l'image ici

  1. Ajouter localhost aux domaines d'application

entrez la description de l'image ici

  1. Ajouter http://localhost:3000/ à l'URL du site en sélectionnant "+ Ajouter une plate-forme"

entrez la description de l'image ici

Jusqu'à présent, j'avais suivi toutes les réponses précédentes soumises ici, mais rien n'a fonctionné.

Alors...

  1. Dans le menu de gauche, sélectionnez "Ajouter un produit"

  2. Ajouter "Connexion Facebook"

Un carrousel de flux de travail vous sera présenté, avec le domaine par défaut http://localhost:3000/ , cliquez sur "continuer" jusqu'à la fin.

  1. Sélectionnez "Connexion Facebook> Paramètres" dans le menu Produit.

  2. Entrez votre URI de redirection Firebase OAuth (trouvé lorsque vous activez la connexion Facebook dans votre console Firebase https://console.firebase.google.com , exemple ci-dessous)

entrez la description de l'image ici

  1. Collez l'URI et enregistrez.

entrez la description de l'image ici

Terminé.


2

Essayez d'utiliser l'url avec le port, par exemple

    http://localhost:8000/

J'avais le même problème et j'ai trouvé cette solution en ce moment.


1
Vous devez ajouter `` App sur Facebook '' comme plate-forme et ajouter localhost: 8000 dans l'URL du canevas
Tachun Lin

1

Cela fonctionne pour moi dans heroku, le truc localhost n'a pas fonctionné (pour moi). J'espère que ça aide

1.) Dans le centre sous la première boîte d'options, cliquez sur "+ Ajouter une plateforme" et choisissez "Site Web" (ou tout ce qui est approprié pour votre application.)

2.) Dans la boîte qui s'affiche pour le site Web que vous venez d'ajouter: URL du site: http://MYAPP.herokuapp.com/ (remplacez MYAPP par le nom de votre application)

3.) Dans la case ci-dessus (Paramètres => De base): Domaine d'application: MYAPP.herokuapp.com (remplacez MYAPP par le nom de votre application)

4.) En bas à droite - cliquez sur "Enregistrer les modifications"


1

Juste une note pour certains autres qui peuvent avoir du mal avec cela comme moi. Je n'ai pas pu faire fonctionner cela avec les applications de "test". En utilisant les paramètres réels de mon application (et en ajoutant simplement

"http://localhost:3000/"

à mon URL de canevas) a fonctionné comme tout le monde l'a suggéré. Il semble que les applications de test ne soient pas égales aux applications réelles.


1

J'ai rencontré un problème avec mon application Rails que j'exécute habituellement avec http: // localhost: 3000 car Facebook nécessite désormais la redirection OAuth valide pour utiliser https.

Pour utiliser https localement, j'ai utilisé [ngrok] [1] qui vous permet d'utiliser https en fournissant un tunnel. Pour faire ça:

  1. Je suis allé sur leur site Web et j'ai téléchargé leur programme
  2. J'ai extrait le fichier du programme
  3. Dans ma console, je suis allé dans le répertoire où ngrok a été extrait et j'ai entré 'grok http 3000' sur ma machine Windows, d'autres peuvent utiliser './grok http 3000'
  4. Après avoir entré cela, ngrok a fourni une adresse https que j'ai placée dans le champ URI de redirection OAuth valides de Facebook
  5. Ensuite, j'ai démarré mon serveur et j'ai pu y accéder en utilisant cette adresse https au lieu de localhost: 3000

1

pour faire des tests locaux, il vous suffit de désactiver l'application ou de mettre l'application facebook en mode développement. Alors Facebook vous permettra seul d'accéder à l'application


0

Pour moi, cela a fonctionné comme ceci:

Configuration du tableau de bord de l'application Facebook:

* Sur l'onglet 'basique':

1) Laisser le domaine d'application vide.

2) Effacer n'importe quelle plate-forme. Signification: pas de site Web, pas de plate-forme de toile. (donc pas de champ URL de site à remplir)

* Sur l'onglet 'avancé':

3) J'ai entré les URI de redirection OAuth valides:

http://localhost/myappfolder/redirect.php

4) concernant mon code, insdie mon c: /xampp/htdocs/localhost/myappfolder/index.php (ce fichier fait le loginURL):

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

dans le fichier redirect.php:

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

et j'ai eu une session! enfin! pas besoin de me pendre à la fin: P

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.