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

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?

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. 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.

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

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.

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.

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.

Solution utilisant Firebase

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

1. Créer une application

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

3. Ajouter localhost aux domaines d'application

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

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

Alors...

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

6. 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.

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

8. 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)

9. Collez l'URI et enregistrez.

Terminé.

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.

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"

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.

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

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

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