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

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

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

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

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 :-)

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!

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.

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.

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

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

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/

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 :)

Vous devez créer un tunnel pour partager votre hôte local; Ngrok est le moyen le plus simple de le faire.

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

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!

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.

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

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