web-dev-qa-db-fra.com

Exécution d'une application Facebook sur localhost

Je prévois de me connecter au chat Facebook depuis mon hôte local. J'aurai besoin d'obtenir la clé de session de Facebook. Quand je donne l'URL du site en tant que localhost:8080 ou ip-address:8080 ça ne marche pas.

J'ai lu des informations sur la configuration de deux applications avec deux clés d'API différentes, l'une fonctionnant sur dev m/c et l'autre sur localhost, mais je ne l'ai pas bien comprise.

Quelqu'un peut-il expliquer comment exécuter une application Facebook sur localhost?

92
enthusiastic

J'ai écrit un tutoriel à ce sujet il y a un moment.

Le point le plus important est "l'URL du site":

URL du site: http: // localhost/nom_app /

Où la structure du dossier est quelque chose comme:

app_name
¦   index.php
¦
+---canvas
¦   ¦   index.php
¦   ¦
¦   +---css
¦           main.css
¦           reset.css
¦
+---src
        facebook.php
        fb_ca_chain_bundle.crt

EDIT:
Kavya : Comment le serveur FB reconnaît-il mon hôte local même sans adresse IP? ou port ??

Je ne pense pas que cela ait quelque chose à voir avec Facebook, je suppose puisque le paramètre iframe src est chargé depuis le côté client, il traitera votre URL locale comme si vous mettez-le directement sur votre navigateur.

Par exemple, placez un fichier sur votre serveur en ligne avec du contenu (par exemple, online.php):

<iframe src="http://localhost/test.php" width="100%" height="100%">
    <p>Not supported!</p>
</iframe>

Et sur votre répertoire racine localhost, ayez le fichier test.php:

<?php echo "Hello from Localhost!"; ?>

Maintenant, visitez http://your_domain.com/online.php vous verrez le contenu de votre fichier localhost!

C’est la raison pour laquelle les abonnements en temps réel et la suppression de l’autorisation des rappels (juste pour le mentionner) ne fonctionneront pas avec les URL d’hôte local! parce que Facebook enverra une requête ping (envoyer des requêtes http) à ces URL mais que, de toute évidence, le serveur Facebook ne traduira pas ces URL en une!

77
ifaour

si vous utilisez localhost:

dans Facebook -> Paramètres -> Basique, dans le champ "Domaines de l'application", écrivez "localhost", puis cliquez sur "+ Ajouter une plate-forme", choisissez "Site Web",

il créera deux champs "URL du site mobile" et "URL du site", dans "URL du site", écrivez à nouveau "localhost".

travaille pour moi.

29
user3531155

Vous pouvez également modifier le fichier 'hôtes' et créer une variante locale de votre domaine.

Exemple

Si votre adresse d'application Facebook réelle est "exemple.com", vous pouvez créer un domaine "localhost.example.com" (accessible uniquement à partir de votre ordinateur) dans votre fichier "hôtes" pointant vers "localhost" et exécuter votre site Web local sous ce domaine. Vous pouvez tromper Facebook de cette façon.

23

Dans les paramètres de base de votre application ( https://developers.facebook.com/apps ) sous Paramètres-> Basiques-> Sélectionnez le mode d'intégration de votre application avec Facebook ...

Utilisez "URL du site:" et "URL du site mobile:" pour conserver vos URL de production et de développement. Les deux sites seront autorisés à s'authentifier. J'utilise simplement Facebook pour l'authentification, de sorte que je n'ai besoin d'aucune des fonctionnalités de redirection de site mobile. En général, lorsque je teste l'authentification, je remplace habituellement l'URL "Site mobile:" par mon site "localhost: 12345", puis je le remets à l'état normal lorsque j'ai terminé.

7
Carter Medlin

Août 2013. Facebook ne permet pas de définir le domaine avec le port pour une application, comme exemple "localhost: 3000".

Vous pouvez donc utiliser https://pagekite.net pour canaliser votre localhost:port au domaine approprié.

Les développeurs de Rails peuvent utiliser http://progrium.com/localtunnel/ gratuitement.

  • Facebook n'autorise qu'un seul domaine pour App à la fois. Si vous essayez d’en ajouter un autre, en tant qu’hôte local, il affichera une sorte d’erreur différente concernant le domaine. Assurez-vous de n'utiliser qu'un seul domaine pour le rappel et pour le paramètre de domaine d'application à la fois.
6
Gediminas

Donc, je dois que cela fonctionne aujourd'hui. Mon URL est http://localhost:8888. Le domaine que j'ai donné à facebook est localhost. Je pensais que cela ne fonctionnait pas car j'essayais d'extraire des données en utilisant le FB.api méthode. Je continuais à obtenir un nom "non défini" et une image sans source, donc je n'avais définitivement pas accès au graphique.

Plus tard, j'ai réalisé que mon problème était vraiment que je ne transmettais qu'un premier argument de /me à FB.api, et je n'avais pas de jeton. Vous devrez donc utiliser le FB.getLoginStatus fonction pour obtenir un jeton, qui devrait être ajouté à la /me argument.

4
Lorenzo Mangubat

Ok, je ne sais pas ce qui se passe dans ces réponses, mais je vous ferai savoir ce qui a fonctionné pour moi, comme le conseille un développeur expérimenté. Je travaille dans Ruby sur Rails et j'utilise le code JavaScript de Facebook pour obtenir des jetons d'accès.).

Problème: Pour effectuer l’authentification, Facebook extrait l’url de votre barre d’adresses et le compare à ce qu’il contient. Ils ne vous permettent pas d'utiliser localhost:3000 pour quelque raison que ce soit. Cependant, vous pouvez utiliser un nom de domaine complètement constitué comme yoursite.dev en exécutant un serveur local et en pointant yoursite.dev à 127.0.0.1:3000 ou quel que soit le lieu indiqué par votre hôte local.

Étape 1: Installez ou mettez à jour Nginx

$ brew install nginx (installer) ou $ brew upgrade nginx (mise à jour)

Étape 2: Ouvrez votre fichier de configuration nginx

/usr/local/etc/nginx/nginx.conf (habituellement ici)

/opt/boxen/config/nginx/nginx.conf _ (si vous utilisez Boxen)

Étape Ajoutez ce bit de code dans votre http {} bloquer

Remplacer proxy_pass avec où vous voulez pointer yoursite.dev à. Dans mon cas, il remplaçait localhost: 3000 ou l’équivalent 127.0.0.1:3000

server {
  listen       yoursite.dev:80;
  server_name  yoursite.dev;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

Étape 4: Editez votre fichier hosts, en /etc/hosts sur Mac à inclure

127.0.0.1   yoursite.dev

Ce fichier dirige les domaines vers localhost. Nginx écoute sur localhost et redirige s'il correspond à une règle.

Étape 5: Chaque fois que vous utilisez votre environnement de développement, vous utilisez le yoursite.dev dans la barre d’adresse au lieu de localhost:3000 donc Facebook vous connecte correctement.

2
Alex Levine

spécifiez simplement votre URL de toile comme http: // localhost/app_path .

2
JustCoding

Forward est un excellent outil pour aider au développement d’applications facebook localement. Il prend en charge le protocole SSL afin que le certificat ne soit pas un problème.

https://forwardhq.com/in-use/facebook

AVERTISSEMENT: je suis l'un des devs

1
blahed

Un truc:

Utilisez MAMPPRO et créez: nom du serveur: l'adresse EXACTE de votre site Web (par exemple: helloworld.com) sur votre site sur votre disque.

Sur Facebook: Vous pouvez donc également conserver l'URL d'origine de votre site (par exemple: helloworld.com)

Vous comprenez maintenant que lorsque vous tapez votre site Web dans la barre d’adresse, vous vous trouvez dans local! ..et lorsque vous voulez être en ligne, désactivez simplement le serveur sur MAMP PRO ..

:)

0
Sebastien Horin

Vous devez configurer votre application pour qu'elle s'exécute sur https pour localhost.

Vous pouvez suivre les étapes données dans cette procédure pour configurer HTTPS sur Ubuntu.

https://www.digitalocean.com/community/articles/how-to-create-a-ssl-certificate-on-Apache-for-ubuntu-12-04

Vous devez suivre les étapes suivantes:

installez Apache (si vous n'en avez pas)

Sudo apt-get install Apache2

Étape 1 - Activer le module SSL

Sudo a2enmod ssl
Sudo service Apache2 restart

Étape 2 - Créer un nouveau répertoire

Sudo mkdir /etc/Apache2/ssl

Troisième étape: créer un certificat SSL auto-signé

Sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/Apache/ssl/Apache.key -out /etc/Apache2/ssl/Apache.crt

Avec cette commande, nous allons à la fois créer le certificat SSL auto-signé et la clé de serveur qui le protège, et les placer tous les deux dans le nouveau répertoire. La ligne la plus importante est "Nom commun". Entrez votre nom de domaine officiel ici ou, si vous n'en avez pas encore, l'adresse IP de votre site.

Nom commun (par exemple, nom de domaine complet du serveur ou VOTRE nom) []: example.com ou localhost

Quatrième étape: configuration du certificat

Sudo vim /etc/Apache2/sites-available/default-ssl

Recherchez les lignes suivantes et modifiez-les avec vos paramètres

NomServeur localhost ou example.com

SSLEngine sur SSLCertificateFile /etc/Apache2/ssl/Apache.crt

SSLCertificateKeyFile /etc/Apache2/ssl/Apache.key

Étape 5 - Activer le nouvel hôte virtuel

Sudo a2ensite default-ssl
Sudo service Apache2 reload
0
waqas

Aucune des réponses ci-dessus n'a fonctionné pour moi. Je cours sur FB API 2.5. Le mien était une combinaison de problèmes qui conduisent au succès une fois résolus

  1. Créez une application de test pour vous assurer qu'elle est maintenue et gérée en tant que telle et qu'elle peut être désactivée lors de la mise en ligne.
  2. Lisez le message d'erreur correctement :) - Je devais activer "Web OAuth Login" WITH "Client OAuth Connexion")
  3. Utilisez https://www.whatismyip.com/ pour savoir quelle est mon adresse IP actuelle
  4. Créer un enregistrement A sur mon domaine c'est-à-dire http://localhost.mydomain.com qui pointe vers mon adresse IP actuelle

Ce n'est probablement pas idéal car le changement d'adresse IP dynamique et que l'on pourrait probablement utiliser DynDNS ou quelque chose de similaire pour rendre l'adresse IP plus "statique", mais cela a fonctionné pour moi.

0
Cornelius Parkin

Dans mon cas, le problème révélé était chrome bloquait la demande CORS de localhost: 4200 sur le site Web de l'api de Facebook. En cours d'exécution Chrome avec ce paramètre: "YOUR_PATH_TO_CHROME\Google\Chrome\Application\chrome.exe "--disable-web-security --user-data-dir =" c:/chrome a fonctionné comme un charme pendant le développement. Même avec aucun hôte local ajouté aux paramètres de l'application facebook.

0
freecloud