Nom de domaine de l'application Facebook lors de l'utilisation de localhost


85

À partir d'un tutoriel ici:
http://ankurm.com/blog/api/using-localhost-for-facebook-app-development/1091/

J'ai essayé de créer une zone de développement local pour mon application Facebook. Mais quand je mets " http: // localhost: 85 / my_app / " comme nom de domaine, Facebook dit

Domaines d'application: " http: // localhost: 85 / app-name / " ne doit pas contenir d'informations de protocole.

Aussi quand je mets "localhost: 85 / my_app /" comme nom de domaine, j'obtiens l'erreur:

Domaines d'application: localhost: 85 / my_app / n'est pas un domaine valide.


6
Je ne pense pas que ce que vous voulez mettre à jour soit le «domaine d'application», mais plutôt que vous voulez mettre à jour «l'URL du site» situé à: Applications> Modifier l'application> Paramètres> De base> Site Web avec connexion Facebook. Assurez-vous qu'il est coché en vert et que "URL du site" apparaîtra. Vous pouvez entrer http: // localhost - pas besoin de spécifier un port, mais vous spécifiez le plus le protocole.
Luis Perez

1
Impossible de faire fonctionner localhost sous le domaine d'application. Définissez Paramètres avancés | 'URI de redirection OAuth valides' sur l'URL de l'hôte local (http: // localhost: port #). Voir github.com/tschellenbach/Django-facebook/issues/376
Joe

Notez également que le domaine d'application doit être localhostpour qu'il accepte le domaine. J'ai essayé avec mysite.local et cela ne fonctionnait pas. Changé Site URL to http://localhost:85/et App Domains to http://localhost:85/puis enregistré (FB modifié App Domain) pour que cela fonctionne.
James Lock

Quelque chose d'autre à essayer: "Sous les paramètres du client oAuth, où il est indiqué Utiliser le mode strict pour les URI de redirection, assurez-vous qu'il est défini sur Non et que le hit est enregistré." - wp-native-articles.com/blog/news/…
eflat

Nécessitant HTTPS pour la connexion Facebook. Vous pourrez toujours utiliser HTTP avec des adresses «localhost», mais uniquement lorsque votre application est encore en mode de développement. développeurs.facebook.com
blog

Réponses:


58

Ma solution:

  1. Laisser les domaines d'application vides
  2. (Produits) Connexion Facebook> Paramètres
  3. Ajouter http://localhost:85/my_app/à la Valid OAuth redirect URIsboîte
  4. Sauvegarder les modifications

6
@Matt Long: Je n'ai pas trouvé la case URI de redirection OAuth valides, a-t-elle été supprimée?
Julian

@MattLong merci! Je l'ai fait fonctionner en utilisant la solution Supasates.
Julian

1
A travaillé pour moi! (Février 2018)
Daniel dit Réintégrer Monica le

18/10/2020 J'obtiens cet avertissement "les redirections de localhost sont automatiquement autorisées en mode développement uniquement et n'ont pas besoin d'être ajoutées ici."
Kick Buttowski

56

Il semble que le protocole ait été modifié.

Voici ma solution (j'ai testé le 3 avril 2015 et ça marche bien):

Dans Paramètres -> onglet De base

  1. Domaine d'application: localhost
  2. Cliquez sur " + Ajouter une plate-forme " et choisissez " Site Web "
  3. URL du site: http: // localhost: <port> / ( <port> est votre numéro de port)
  4. Sauvegarder les modifications

3

4
Merci! Cela a fonctionné pour moi (mai 2016). Remarquez que 127.0.0.1 ne fonctionne pas.
Milad M

A travaillé pour moi juin 2017
Alaksandar Jesus Gene

Travaux! Décembre 2017
Pandarian Ld

44
  1. Laisser les domaines d'application vides
  2. Accédez au site Web avec connexion Facebook
  3. Ajouter http://localhost:port_number/
  4. Enregistrez les modifications et réessayez. Pour plus d'informations, visitez

http://developers.facebook.com/docs/samples/canvas/ Bon codage :-)



7
Impossible de faire fonctionner localhost sous le domaine d'application. Définissez les paramètres avancés | 'URI de redirection OAuth valides' sur l'url localhost (http: // localhost: port #). Voir github.com/tschellenbach/Django-facebook/issues/376
Joe

2
Que signifie "Site Web avec connexion Facebook"? Une option à côté de "Domaines d'application"? Je ne le vois pas. L'ajout de l'entrée localhost dans "Paramètres avancés | URI de redirection OAuth valides" a fonctionné pour moi
Pierre de LESPINAY

Je l'ai fait, toujours une erreur: "L'URL donnée n'est pas autorisée par la configuration de l'application"
Ram Rachum

1
Fonctionne bien. Je veux juste dire que cela ne fonctionne qu'avec «localhost» comme dans la réponse. J'ai essayé avec 127.0.0.1:8000 et je n'ai pas fonctionné
ePi272314

30

Cela a changé au fil des ans, mais je viens de le faire fonctionner avec une application Web que j'exécute sur localhost. C'est ce que j'ai fait:

  1. Allez à https://developers.facebook.com/apps
  2. Sélectionnez votre application.
  3. Sélectionnez Paramètres> De base dans la barre de navigation de gauche.
  4. Cliquez sur le bouton Ajouter une plate-forme en bas de la page.
  5. Cliquez sur le site Web
  6. Entrez http://localhost:8080/l'URL du site.
  7. Cliquez sur le bouton Démarrage rapide à l'extrême droite de l'URL du site que vous venez de saisir.
  8. Un nouvel onglet s'ouvrira. Sur cet onglet, faites défiler jusqu'à la section "Parlez-nous de votre site Web" et saisissez à nouveau http://localhost:8080/l'URL du site.
  9. Cliquez sur le bouton Suivant.
  10. Tentative de connexion à nouveau, et cela a fonctionné cette fois.

Bonne chance!


2
il existe un moyen d'utiliser deux domaines? localhost et le domaine utilisé pour la production: /
JCarlosR

Ne fonctionne pas: toujours bloqué à, URL bloquée: cette redirection a échoué car l'URI de redirection n'est pas sur la liste blanche dans les paramètres OAuth du client de l'application. Assurez-vous que les connexions OAuth client et Web sont activées et ajoutez tous vos domaines d'application en tant qu'URI de redirection OAuth valides.
Nikunj Dhimar

28

Solution de travail 2018

Il m'a fallu des années pour comprendre cela, alors je vais partager ma solution.

J'ai essayé toutes les réponses suggérées, mais rien n'a fonctionné pour moi, et à la fin tout ce que j'avais à faire était d'aller sur https://developers.facebook.com/apps/YOUR_APP_ID/fb-login/settings/ , et d'ajouter mon URL de rappel complète dans la zone URI de redirection OAuth valides .

Dans mon cas, en utilisant ruby ​​sur rails, mon URL ressemblait à ceci http://localhost:3000/user/auth/facebook/callback.

Et juste après l'avoir ajouté, tout a commencé à fonctionner! J'espère que cela aidera quelqu'un d'autre face à ce problème.


Merci! Étonnamment, vous avez une solution réalisable parfaite pour le moment actuel! À votre santé.
nakhodkin

Oui merci. Cela a fonctionné pour moi. J'ai ajouté localhost: 5001 à la section: URI de redirection OAuth valides et activé: Connexion OAuth du navigateur intégré
David John Coleman II

Cela a également fonctionné pour moi. C'est la solution de travail actuelle. J'ai créé une version de test de mon application pour la connexion Facebook à partir de localhost. (Jusqu'à ce que Facebook change à nouveau les choses!)
Red3

3
Merci! PITA. Après avoir ajouté cela, cet avis est apparu. En mars, nous effectuons une mise à jour de sécurité des paramètres de votre application qui invalidera les appels provenant d'URI non répertoriés dans le champ URI de redirection OAuth valides ci-dessous. votre application ou votre site Web en exigeant un nouveau mode strict pour les URI de redirection Il semble qu'ils aient commencé tôt?
dbinott

1
Merci! Cela m'a également pris des siècles (jusqu'à ce que je trouve cette réponse). Le problème est que l'erreur que vous obtenez de FB vous suggère d'ajouter votre domaine aux "domaines de l'application", ce qui n'a rien à voir avec le problème réel. Merci d'avoir perdu mon temps à nouveau FB :(
Arno van Oordt

11

C'est ce que je faisais.

Si vous utilisez Windows, vous devez modifier le fichier hôte. L'emplacement du fichier hôte sera à%SystemRoot%\System32\drivers\etc\

Ajoutez une nouvelle ligne dans le fichier hôte comme ceci

127.0.0.1    localhost.YOUR-SITE-NAME.com

Enregistrez le fichier hôte.

Accédez au panneau de configuration des applications FB et donnez-le localhost.YOUR-SITE-NAME.comdans le champ Domaine d'applications. Sauvegarder les modifications.

Maintenant, chargez votre environnement local comme localhost.YOUR-SITE-NAME.comdepuis votre navigateur.

NB: changez VOTRE-SITE-NAME avec votre nom de domaine.


7

Solution de travail (août 2018)

Tout d'abord, sélectionnez votre application dans le tableau de bord des développeurs .

Assurez-vous ensuite que votre application est en mode de développement , car elle autorise localhost sur HTTP. Pour ce faire, cliquez sur la bascule située en haut à droite de la page de votre application.

Enfin, veuillez suivre les notes ci-dessous car elles pourraient causer des problèmes si elles ne sont pas correctement remplies:

  • Settings > Basic > App Domains devrait être vide
  • Products > Facebook Login > Settings > Valid OAuth Redirect URIs devrait être vide

ça marche toujours? J'obtiens une erreur de marque blanche si je mets mon application en mode développement.
sagar limbu

1
J'ai une version test-app de mon application productive (toujours en mode développement), effacé tous les champs, mais j'obtiens toujours l'erreur: OAuthException URI missmatch
Andreas Richter

Lorsque votre application est en mode de développement, vous ne pouvez pas tester les points de terminaison qui vous obligent à soumettre votre application
ricks

Merci mon frère, oui, c'était difficile à comprendre enfin
Anthony

5

Vous pouvez le laisser vide ou utiliser localhost, http://localhost:85/my_app/est l'URL


oui je sais que c'est l'URL, mais dats wot a été fait dans le tutoriel, et il prétend que cela a fonctionné ... c'est pourquoi je l'ai essayé ... au fait, j'ai également essayé localhost: 85 mais cela n'a pas fonctionné, mais quand J'ai essayé localhost mais cela a fonctionné ... La raison pour laquelle je voulais utiliser: 85 est parce que c'est le port que mon apache utilise ...
Sanya Tobi

Le port est des informations de protocole, vous n'en avez pas besoin pour ce champ. Comme le dit le message: ne doit pas contenir d'informations de protocole.
phwd

le laisser vide a fait l'affaire. Et encore une chose qu'il n'accepte pas localhostcomme nom de domaine.
shashwat

3

Quand j'ai écrit ce tutoriel à ce moment-là, le port était autorisé dans le domaine de l'application. Et je suis en fait capable d'exécuter l'application avec 81 ports (serveur wamp). Maintenant, il semble que Facebook n'autorise pas le portage dans l'URL. Vous pouvez utiliser localhostdans le domaine de l'application.

Je mettrai à jour les informations dès que possible. J'essaye de trouver une solution.

Une solution temporaire est d'utiliser localtunnel http://progrium.com/localtunnel/


2

J'ai testé ceci et cela fonctionne pour moi [février 2020]:

  1. Installez ngrok et obtenez votre URL https (exemple: https://a3asdf23.ngrok.io )
  2. Aller à FB Paramètres Tableau de bord App (Basic) -> sous App Domaines -> ajouter https://a3asdf23.ngrok.io, https://ngrok.io.
  3. Sur la même page, faites défiler jusqu'en bas, Ajouter une plate-forme (site Web), définissez l'URL sur https://a3asdf23.ngrok.io. Pas encore terminé, cliquez sur Démarrage rapide -> sous "Parlez-nous de votre site Web", mettez la même URL https://a3asdf23.ngrok.io.
  4. Ensuite , allez à Produits -> Facebook Connexion -> Paramètres -> Client OAuth Paramètres -> Valid OAuth Redirect URIs -> ajouter ces https://a3asdf23.ngrok.io, https://ngrok.io, https://a3asdf23.ngrok.io/{your-redirect-uri}.

Et voilà. Merci plus tard :)



1

https://ngrok.com

Passez par le lien https://ngrok.com/ pour télécharger ngrok et extraire ce fichier. Ouvrez cmd (recherche cmd) Accédez au répertoire où ngrok est extrait. Ouvrez ngrok depuis la ligne de commande ex: c: /ngrok/ngrok.exe [port] ou cd c: / ngrok puis ngrok 80 (ngrok [port]) Vous obtiendrez

ngrok

Tunnel Status                 online
Version                       1.3/1.3
Forwarding                    http://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Forwarding                    https://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Web Interface                 http://127.0.0.1:4040
# Conn                        0
Avg Conn Time                 0.00ms

N'OUBLIEZ pas de vous assurer que votre serveur wamp est ouvert sur le même port… (comment vérifier -> goto-> wampicon-> apache-> httpd.conf recherchez le port ou 80 (par défaut) utilisez cela pour ngrok.exe 80)

http://3ahsdfhska.ngrok.com

sera l'URL pour accéder à votre hôte local en ligne


Je voudrais tester ngrok pour passer à mon servlet. Mon servlet s'exécute sur un chemin spécifique. Par exemple: localhost: 8080 / plugins / servlet Comment puis-je demander à ngrok de s'y rendre?
Jorge Valois le

0

Si vous obtenez les erreurs de protocole, non seulement vous devez SUPPRIMER Http: // mais également s'il y a une barre oblique inverse à la fin de l'adresse Web, vous devez également la supprimer, sinon cela ne fonctionnera pas. J'ai fait cela et cela a parfaitement fonctionné! Holla!


0

Ajouter une autre solution au mélange:

J'ai configuré mon site Web selon les instructions, puis j'ai ajouté une deuxième application (Facebook Canvas) et défini cette URL sur http://localhost:XXXXX. Maintenant, je peux accéder à FB à la fois localement et en production.


0

Je développe localement et j'utilise cette URL: localhost/fb

Ensuite, j'ai dû ajouter un site Web avec l'URL suivante: http://localhost

Sous Domaines d'application, j'ai ajouté localhost.

Maintenant ça marche. Le seul problème que j'ai eu était que vous deviez utiliser cette URL dans tous vos scripts. Par exemple

$loginUrl = $helper->getLoginUrl('http://localhost/fb/login-callback.php', $permissions);

Vous ne pouvez pas utiliser 127.0.0.1ici ...


0

J'ai essayé toutes les solutions mentionnées ici mais aucune n'a fonctionné.

Ce qui a résolu mon problème était la copie de "URI de redirection OAuth" de Firebase vers l'application Facebook "URI de redirection OAuth valides"

J'ai laissé tous les domaines vides

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.