May 5, 2018 · Facebook

Como testar Facebook Login no Localhost

Teste localmente sua aplicação no Facebook usando o Ngronk.

Ngronk é um tunnel simples que gera urls aleatórias para simular http e https localmente, evitando o uso - e erro - de endereço http://localhost na configuração do seu app no Facebook.

Baixe o Ngronk e abra um conexão local. Execute o comando na pasta onde você baixou o programa:

./ngronk http 3000

Vai gerar algo assim:
Screen-Shot-2018-05-04-at-19.15.17

Agora crie sua aplicação no Facebook (usei um app "WEB"), adicione os códigos javascript que ele fornece e cole no seu código html.

Nessa etapa de configuração pegue o endereço aleatório gerado pelo Ngronk, no caso aqui, "https://d75ebac2.ngrok.io", e coloque a url HTTPS (tem que ser HTTPS!) nesses locais:

Settings > Basic e adicione no campo "App Domains". Exemplo:
Screen_Shot_2018-05-05_at_08_59_45

E também em PRODUCTS > Facebook Login > Settings e adicione no campo "Valid OAuth Redirect URIs". Exemplo:
Screen-Shot-2018-05-04-at-19.19.59

Salve. Agora bote um simples console.log no retorno pra ver se funcionou. Exemplo:

<script>
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      // RESPOSTA DA REQUISIÇÃO
      console.log(response);
    });
  }

  window.fbAsyncInit = function () {
    FB.init({
      appId: 'SUA-APP-ID',
      cookie: true,
      xfbml: true,
      version: 'v3.0'
    });

    FB.AppEvents.logPageView();

  };

  (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

Altere "SUA-APP-ID" no código acima pelo o ID que o Facebook gera pra sua app.

Abra o navegador, coloque a MESMA url que tu acabou de inserir no app, teste o botão de login e veja seu console:
Screen_Shot_2018-05-04_at_19_29_22

Toda vez que você rodar o Ngronk ele irá gerar uma url diferente. Então será necessário você atualizar no Facebook para testar sua aplicação sempre que encerrar o Ngronk e rodá-lo novamente.

Documentação completa Facebook Login:
https://developers.facebook.com/docs/facebook-login/web

Cheers,

Comments powered by Disqus