Login do Facebook

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:

Exemplo básico de login automático

A amostra de código a seguir mostra como adicionar o SDK do Facebook para JavaScript ao seu site, inicializar o SDK, além de exibir seu nome e seu email caso você tenha feito login no Facebook. Se você não tiver feito login, uma janela pop-up com o diálogo Entrar será exibida automaticamente.

A permissão public_profile , que possibilita o acesso a informações disponíveis publicamente (como nome e foto do perfil), e a permissão email não exigem a análise do app e são concedidas de forma automática a todos os apps com o Login do Facebook. 

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (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')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. Habilite o SDK para JavaScript para o Login do Facebook

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

Altere a opção Login com o SDK para JavaScript para "sim" se quiser indicar que você está usando esse SDK. Depois, insira o domínio da sua página que hospeda o SDK na lista Domínios permitidos para o SDK para JavaScript. Isso garante que os tokens de acesso façam o retorno de chamada apenas em domínios autorizados. Somente páginas HTTPS têm suporte para ações de autenticação com o SDK do Facebook para JavaScript.

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 JSON

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

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

Tipo de StatusDescrição

connected

A pessoa está conectada ao Facebook e fez login na sua página da web.

not_authorized

A pessoa está conectada ao Facebook, mas não fez login na sua página da web.

unknown

A pessoa não está conectada ao Facebook, portanto não se sabe se ela fez login na sua página da web. Ou FB.logout() foi chamado antes e, portanto, não pode se conectar ao Facebook.

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

Parâmetros authResponseValor

accessToken

Um token de acesso para a pessoa que está acessando a página da web.

expiresIn

Um carimbo UNIX de data/hora quando o token expirar. Quando o token expirar, a pessoa precisará fazer login novamente.

reauthorize_required_in

O tempo restante em segundos até o login expirar e a pessoa precisar fazer login novamente.

signedRequest

Um parâmetro assinado, contendo informações sobre a pessoa que está acessando sua página da web.

userID

O número de identificação da pessoa acessando sua página da web.

O SDK para JavaScript detecta o status de login automaticamente. Portanto, nenhuma ação é necessária para habilitar esse comportamento.

3. Conecte uma pessoa

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

Existem duas maneiras de conectar uma pessoa:

A. Conectar usando o botão Entrar

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

Configurador de plugin

Width
Tamanho do botão
Texto do botão
Forma do layout do botão
[?]
Receber código

B. Conectar usando 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 a página da web acesse os dados dela. Para ser usado por usuários externos, o Login do Facebook exige a permissão avançada public_profile.

Exemplo de chamada

Este exemplo pergunta se a página tem permissão para acessar o perfil público e o email de uma pessoa que está fazendo login na 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ê chamou FB.login(). Essa resposta pode ser detectada e gerenciada 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 da 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
});

Observação: 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, na sua página da web. Ao sair do app, a pessoa continua conectada ao Facebook.
  2. Uma pessoa faz login na sua página da web e no Facebook como parte do fluxo de login do seu app. Depois de sair do seu app, o usuário também é desconectado 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 na 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 na sua página. É necessário revogar permissões separadamente. Compile sua página da web de maneira que uma pessoa que sair da 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 na sua página HTML. Substitua {app-id} pelo ID do app 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: v21.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 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>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

Recursos adicionais