Login do Facebook para web com o SDK para JavaScript

Este documento apresenta um passo a passo para implementar o Login do Facebook na sua página da web com o SDK do Facebook para JavaScript.

Antes de começar

Você precisará do seguinte:

• Uma conta de desenvolvedor do Facebook
• Um aplicativo do Facebook registrado com as configurações básicas definidas
• O SDK do Facebook para JavaScript

1. Insira seu URL de redirecionamento no Painel de Aplicativos

No Painel de Aplicativos, escolha seu aplicativo e navegue até Adicionar um produto e clique em Configurar no cartão de Login do Facebook. No lado esquerdo do painel de navegação, selecione Configurações abaixo de Configurações OAuth do cliente. Em seguida, insira seu URL de redirecionamento no campo URIs de redirecionamento OAuth válidos para concluir a autorização com sucesso.

2. Verifique o status de login de uma pessoa

Depois que sua página da web carregar, o primeiro passo é descobrir se a pessoa já está conectada à sua página com o Login do Facebook. Uma chamada para FB.getLoginStatus inicia uma chamada para o Facebook a fim de obter o status do login. Depois, o Facebook faz uma chamada para sua função de retorno de chamadas e fornece o resultado.

Exemplo de chamada

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

Exemplo de resposta de JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status especifica o status de login da pessoa que está acessando a página da web. O status pode ser um dos seguintes:

Se o status for connected, os seguintes parâmetros authResponse serão incluídos à resposta:

O SDK para JavaScript detecta o status de login automaticamente. Portanto, não é necessário fazer nada para habilitar esse comportamento.

3. Conecte uma pessoa

Se uma pessoa acessar sua página sem estar conectada a ela nem ao Facebook, você pode usar a caixa de diálogo Entrar para solicitar que ela faça login em ambos. Se a pessoa não estiver conectada ao Facebook, será solicitado que ela entre na plataforma e, em seguida, faça login em sua página da web.

Existem duas maneiras de conectar uma pessoa:

• O botão Login do Facebook
• O diálogo Entrar do SDK para JavaScript

A. Entre com o botão Login

Para usar o botão Login do Facebook, use nosso Configurador de plugin para personalizar o botão e obter o código.

B. Faça login com o diálogo Entrar do SDK para JavaScript

Para usar seu próprio botão de login, invoque o diálogo Entrar com uma chamada para FB.login().

FB.login(function(response){
  // handle the response 
});

Solicitar permissões adicionais

Quando uma pessoa clicar no seu botão HTML, uma janela pop-up com o diálogo Entrar será exibida. Esse diálogo permite que você solicite permissão para acessar os dados de uma pessoa. É possível passar o parâmetro scope ao realizar a chamada da função FB.login(). Esse parâmetro opcional é uma lista de permissões, separadas por vírgulas, que a pessoa precisa confirmar para que sua página da web acesse os dados da pessoa.

Exemplo de chamada

Este exemplo pergunta se a sua página tem permissão para acessar o perfil público e o email de uma pessoa que está fazendo login em sua página da web.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Lidar com a resposta ao diálogo Entrar

A resposta, que pode ser conectar-se ou cancelar, retorna um objeto authResponse ao retorno de chamada especificado quando você fez a chamada FB.login(). Esta resposta pode ser detectada e tratada dentro da chamada FB.login().

Exemplo de chamada

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. Desconecte uma pessoa

Desconecte uma pessoa de sua página anexando a função do SDK para JavaScript FB.logout() a um botão ou link.

Exemplo de chamada

FB.logout(function(response) {
   // Person is now logged out
});

Nota: essa chamada da função também pode desconectar a pessoa do Facebook.

Situações a considerar

1. Uma pessoa faz login no Facebook e, depois, em sua página da web. Ao sair do aplicativo, a pessoa continua conectada ao Facebook.
2. Uma pessoa faz login em sua página da web e no Facebook como parte do fluxo de login do seu aplicativo. Depois de sair do seu aplicativo, o usuário também é desconectada do Facebook.
3. Uma pessoa faz login no Facebook e em outra página da web como parte do fluxo de login dessa outra página. Depois, ela faz login em sua página da web. Ao sair de qualquer uma das páginas da web, a pessoa é desconectada do Facebook.

Além disso, sair da sua página da web não revoga as permissões concedidas pela pessoa ao fazer login em sua página. É necessário revogar permissões separadamente. Compile sua página da web de maneira que uma pessoa que sair de sua página não veja o diálogo Entrar quando fizer login novamente.

Exemplo de código completo

Esse código carrega e inicializa o SDK para JavaScript em sua página HTML. Substitua {app-id} pelo ID do aplicativo e {api-version} pela versão da Graph API a ser utilizada. Exceto quando você tiver um motivo específico para usar uma versão mais antiga, especifique a versão mais recente: v5.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    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'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


//  The JS SDK Login Button 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>

Recursos adicionais

• Documentação do botão Login
• Referência de FB.login()
• Referência de FB.getLoginStatus()
• Referência do SDK do JavaScript