Executando o aplicativo do Facebook no localhost


92

Estou planejando me conectar ao bate-papo do Facebook de meu host local. Precisarei obter a chave de sessão do Facebook. Quando eu dou a URL do site como localhost:8080ou ip-address:8080não funciona.

Eu li sobre como configurar dois aplicativos com 2 chaves de API diferentes, um executado em dev m / ce outro em localhost, mas não entendi direito.

Alguém pode explicar como executar um aplicativo do Facebook no localhost?


@Kavya Você está tentando criar um aplicativo de bate-papo para desktop no Facebook?
Searock

sim ... eu quero acessar o servidor do Facebook do meu m / c ... vi um post sobre o mesmo aqui stackoverflow.com/questions/1877913/… eu consigo entender ...
entusiasmado

@Kavya Se quiser criar um, não mencionou a linguagem de programação que vai usar?
Searock

2
Eu escrevi um tutorial sobre isso.
ifaour

5
@xoxoxo Por favor, use pontuação e ortografia adequadas em sua comunicação.
Bart

Respostas:


77

Escrevi um tutorial sobre isso há um tempo.

O ponto mais importante é o "URL do site":

URL do site: http: // localhost / app_name /

Onde a estrutura da pasta é algo como:

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

EDIT:
Kavya : como o servidor FB reconhece meu host local mesmo sem um IP ou porta ??

Não acho que isso tenha algo a ver com o Facebook, acho que, como o srcparâmetro iframe é carregado do lado do cliente, ele tratará o URL local como se você o colocasse diretamente no navegador.

Por exemplo, tenha um arquivo em seu servidor online com conteúdo (por exemplo online.php):

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

E no diretório raiz do seu host local, tenha o arquivo test.php:

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

Agora visite http://your_domain.com/online.phpvocê verá o conteúdo do seu arquivo localhost!

É por isso que assinaturas em tempo real e desautorizar callbacks (só para mencionar) não funcionam com URLs de host local! porque o Facebook fará ping (enviará solicitações http) para essas URLs, mas obviamente o servidor do Facebook não traduzirá essas URLs para as suas!


Não consigo encontrar o 'URL do site' nenhuma ideia de onde / ou em que guia ele está localizado?
user962206

isso funciona para a porta 8080? Ainda estou recebendo o erro com o url do site: http://localhost:8080/auth/index.htmle a página que dá o erro é http://localhost:8080/auth/index.htmle a linha channelurl é:channelUrl : '//localhost:8080/auth/channel.html',
necromante

Não entendo a parte da 'estrutura de pastas'. Se você está simplesmente fazendo login em seu site com o Facebook para carregar comentários do Facebook em sua página, ainda precisa dessa estrutura de tela?
AlxVallejo

Existem algumas ferramentas de tunelamento que permitirão que você dê ao seu host local um nome público e o torne visível, para que o Facebook possa fazer o ping de volta. Eu criei um, chamado PageKite , existem outros também.
Bjarni Rúnar

29

se você usar localhost:

no Facebook -> Configurações -> Básico, no campo "Domínios de aplicativos" escreva "localhost", clique em "+ Adicionar plataforma" e escolha "Site",

ele irá criar dois campos "URL do site móvel" e "URL do site", em "URL do site" escreva novamente "localhost".

funciona para mim.


obrigado, tentei as outras soluções, mas finalmente esta foi a que funcionou,
rahulmishra

no campo URL do site eu tinha: localhost , mas não funcionou. Também adicionei localhost ao campo App Domain, como você mencionou, funciona bem, obrigado
RegarBoy

23

Você também pode editar o arquivo 'hosts' e criar uma variação local do seu domínio.

Exemplo

Se o endereço real do seu aplicativo do Facebook for "example.com", você pode criar o domínio "localhost.example.com" (acessível apenas do seu pc) no arquivo "hosts" apontando para "localhost" e executar seu site local sob este domínio. Você pode enganar o Facebook dessa forma.


1
funciona como um encanto, obrigado! FYI- hosts está localizado no Windows 7 em C:/Windows/System32/drivers/etc/hostsou no Ubuntu em/etc/hosts
pztrick

Excelente metodologia. Obrigado.
Jerad

O que devo definir para Domínios de aplicativos e URL da tela?
Craig de

No entanto, isso não permitirá que você especifique a porta, então você terá que usar um proxy reverso para permitir o desenvolvimento no mesmo domínio. Consulte stackoverflow.com/questions/10729034/…
MagicLAMP

7

Nas configurações básicas do seu aplicativo ( https://developers.facebook.com/apps ) em Configurações-> Básico-> Selecione como seu aplicativo se integra ao Facebook ...

Use "URL do site:" e "URL do site móvel:" para armazenar seus URLs de produção e desenvolvimento. Ambos os sites terão permissão para autenticar. Estou usando o Facebook apenas para autenticação, então não preciso de nenhum dos recursos de redirecionamento de site móvel. Eu geralmente altero o "URL do site móvel:" para meu site "localhost: 12345" enquanto estou testando a autenticação e, em seguida, coloco-o de volta ao normal quando terminar.


6

2013 agosto. O Facebook não permite definir domínio com porta para um aplicativo, como por exemplo "localhost: 3000".

Portanto, você pode usar https://pagekite.net para criar um túnel localhost:portpara o domínio adequado.

Os desenvolvedores Rails podem usar http://progrium.com/localtunnel/ gratuitamente.

  • O Facebook permite apenas um domínio para o aplicativo no momento. Se você está tentando adicionar outro, como localhost, irá mostrar algum tipo de erro diferente sobre o domínio. Certifique-se de usar apenas um domínio para retorno de chamada e para configuração de domínio de aplicativo no momento.

4

Então, eu fiz isso funcionar hoje. Meu URL é http://localhost:8888. O domínio que dei ao Facebook é localhost. Achei que não estava funcionando porque estava tentando extrair dados usando o FB.apimétodo. Continuei recebendo um nome "indefinido" e uma imagem sem fonte, então definitivamente não tive acesso ao Graph.

Mais tarde, percebi que meu problema era realmente que eu estava apenas passando um primeiro argumento de /mepara FB.apie não tinha um token. Portanto, você precisará usar a FB.getLoginStatusfunção para obter um token, que deve ser adicionado ao /meargumento.


2

apenas especifique o URL da tela como http: // localhost / app_path .


@ifaour i Follwoed ur tutorial .. is givin me error Código de erro de API: 191 Descrição de erro de API: O URL especificado não pertence ao aplicativo Mensagem de erro: redirect_uri não pertence ao aplicativo. Eu não preciso que funcione dentro do fb ...
entusiasmado

@Kavya apenas adicione o url da tela como localhost / app_path e abra o fb app, para que ele execute seu aplicativo a partir de localhost.Sinto muito tarde, pois está muito ocupado.
JustCoding

Outra maneira de fazer isso é mapear o URL do seu site / canvas localmente, em vez de especificar localhost. Você pode então usar seu domínio de destino. Não tenho certeza de qual arquitetura você está desenvolvendo, mas no Windows você conseguiria configurando seu site IIS localmente com as ligações corretas e, em seguida, adicionando um alias ao seu arquivo hosts em C: \ Windows \ System32 \ drivers \ etc por exemplo, adicionando a linha 127.0.0.1 yourproject.yourdomain.net
dumbledad

2

Ok, não tenho certeza do que está acontecendo com essas respostas, mas direi o que funcionou para mim, conforme recomendado por um desenvolvedor sênior em meu trabalho. Estou trabalhando em Ruby on Rails e usando o código JavaScript do Facebook para obter tokens de acesso.

Problema: para fazer a autenticação, o Facebook está pegando o url da sua barra de endereços e comparando com o que eles têm em arquivo. Eles não permitem que você use localhost:3000por qualquer motivo. No entanto, você pode usar um nome de domínio completamente inventado, como yoursite.devrodar um servidor local e apontar yoursite.devpara 127.0.0.1:3000ou para onde seu host local estiver apontando.

Etapa 1 : instalar ou atualizar o Nginx

$ brew install nginx(instalar) ou $ brew upgrade nginx(atualizar)

Etapa 2 : Abra seu arquivo de configuração nginx

/usr/local/etc/nginx/nginx.conf (geralmente aqui)

/opt/boxen/config/nginx/nginx.conf(se você usar o Boxen)

Etapa 3 Adicione este pedaço de código em seu http {}bloco

Substitua proxy_passpor qualquer lugar para o qual você deseja apontar yoursite.dev. No meu caso, ele estava substituindo localhost: 3000 ou equivalente127.0.0.1:3000

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

Etapa 4 : edite seu arquivo hosts, no /etc/hostsMac para incluir

127.0.0.1   yoursite.dev

Este arquivo direciona domínios para localhost. O Nginx escuta no localhost e redireciona se corresponder a uma regra.

Etapa 5 : toda vez que você usar seu ambiente de desenvolvimento, use o yoursite.devna barra de endereço em vez de localhost:3000para que o Facebook faça seu login corretamente.


1

Forward é uma ótima ferramenta para ajudar no desenvolvimento de aplicativos do Facebook localmente, ele suporta SSL, então a coisa certa não é um problema.

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

AVISO LEGAL: Eu sou um dos desenvolvedores


1
E o PageKite é um dos concorrentes da Forward (eu consegui!). ;-)
Bjarni Rúnar

Depois de tentar tudo mais sob o sol, isso funcionou para mim. O único problema é que todo esse encaminhamento é muito lento. Melhor do que não receber callbacks do FB! Obrigado
Craig

0

Você precisa configurar seu aplicativo para rodar em https para localhost

Você pode seguir as etapas fornecidas neste para configurar o HTTPS no ubuntu

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

Você precisa seguir as seguintes etapas:

instale o apache (se você não tiver)

sudo apt-get install apache2

Etapa um - ativar o módulo SSL

sudo a2enmod ssl
sudo service apache2 restart

Etapa dois - criar um novo diretório

sudo mkdir /etc/apache2/ssl

Etapa três - criar um certificado SSL autoassinado

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache/ssl/apache.key -out /etc/apache2/ssl/apache.crt

Com esse comando, estaremos criando o certificado SSL autoassinado e a chave do servidor que o protege, e os colocaremos no novo diretório. A linha mais importante é "Nome comum". Digite seu nome de domínio oficial aqui ou, se ainda não tiver um, o endereço IP do seu site.

Nome comum (por exemplo, FQDN do servidor ou SEU nome) []: exemplo.com ou localhost

Etapa quatro - configurar o certificado

sudo vim /etc/apache2/sites-available/default-ssl

Encontre as linhas a seguir e edite-as com suas configurações

Nome do servidor localhost ou exemplo.com

SSLEngine em SSLCertificateFile /etc/apache2/ssl/apache.crt

SSLCertificateKeyFile /etc/apache2/ssl/apache.key

Etapa cinco - ativar o novo host virtual

sudo a2ensite default-ssl
sudo service apache2 reload

0

Um truque:

Use MAMPPRO e crie: nome do servidor: o endereço EXATO do seu site (por exemplo: helloworld.com) para o seu site em seu disco

No Facebook: para que você também possa manter o URL original do seu site (por exemplo: helloworld.com)

Agora você entende que quando você digita seu site na barra de endereços você está no local ! ..e quando quiser ficar online, basta inativar o servidor no MAMP PRO ..

:)


0

Nenhuma das respostas acima funcionou para mim. Estou executando o FB API 2.5. O meu foi uma combinação de problemas que levam ao sucesso, uma vez resolvidos

  1. Crie um aplicativo de teste para garantir que ele seja mantido e gerenciado como tal e pode ser desativado ao entrar em operação
  2. Leia a mensagem de erro corretamente :) - Tive de habilitar "Login OAuth da Web" COM "Login OAuth do cliente"
  3. Use https://www.whatismyip.com/ para descobrir qual é meu IP atual
  4. Crie um registro A em meu domínio, ou seja, http://localhost.mydomain.com que aponte para meu IP atual

Provavelmente não é o ideal, pois o IP dinâmico muda e pode-se provavelmente usar DynDNS ou algo semelhante para tornar o IP mais "estático", mas funcionou para mim


0

No meu caso, o problema revelou ser o cromo bloqueando a solicitação CORS de localhost: 4200 para o site da API do Facebook. Executar o Chrome com esta configuração: "YOUR_PATH_TO_CHROME \ Google \ Chrome \ Application \ chrome.exe" --disable-web-security --user-data-dir = "c: / chrome funcionou perfeitamente durante o desenvolvimento. Mesmo sem localhost adicionado às configurações do aplicativo do Facebook.


funciona bem para o desenvolvimento local, mas na produção você precisa da permissão do Facebook (que é obtida pela chamada de opção do navegador) para compartilhar dados do facebook
radio_head
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.