Fala galera, beleza? Vocês já viram sistema de autenticação pelo Facebook em algum site? Sabe o que é?

Nesse post irei explicar como incluir login com Facebook (autenticação OAuth) em seu site usando PHP (portanto, server side). É bem fácil, vamos ao tutorial.

Primeira coisa que precisamos é criar uma App no Facebook Developers, para isso, você deve ter um cadastro no Facebook (isso é fácil rs). Acesse o link http://developers.facebook.com, clique em "Entrar" e digite seu email e senha do Facebook. Se ele pedir a senha novamente, digite mais uma vez, é por segurança.

Após o login, estaremos na página inicial do Facebook Developers, agora podemos criar nossa App. Clique em "Create New App", digite o nome da sua aplicação em "App Name" (eu colocaria algo como "Meu site - login") e clique em "Continue". Digite o código mostrado na imagem e pronto, sua app estará criada e você será redirecionado para página de configuração dela.

Estando tudo certo, agora você deve selecionar como sua aplicação se integrará com o Facebook, para isso, bastar marcar "Website with Facebook login", digitar o endereço do seu site que o Facebook irá redirecionar após fazer o login no campo "Site URL" e clicar em "Save Changes".

O campo "Site URL" deve ser preenchido com um domínio válido (algo como http://glaucocustodio.com), portanto você não pode inserir endereços como "http://localhost" ou "127.0.0.1" (endereços referentes à máquina local).

Mas como irei fazer isso se preciso testar em desenvolvimento (em sua máquina e não no servidor de hospedagem) primeiro antes de subir em produção (online)?

Essa é a pergunta que você pode estar se fazendo agora. Para resolver isso, você terá que criar um redirecionamento em seu arquivo hosts (em caso de Windows).

Abra um editor de texto como o bloco de notas como administrador, vá no menu Arquivo -> Abrir, acesse esse endereço C:\Windows\System32\drivers\etc e clique para abrir o arquivo hosts, feito isso, adicione 127.0.0.1 meusitedev.com.br (sem aspas) na última linha e salve o arquivo.

Agora abra o navegador e digite o endereço digitado acima (meusitedev.com.br) na barra de endereços e você deverá ver o conteúdo da pasta www do Apache, basta clicar na pasta do seu projeto e pronto, agora você pode desenvolver usando uma url como "http://meusitedev.com.br" invés de "http://localhost/meusite". Caso isso não funcione, procure por "hosts Windows" e "Virtual hosts Apache" no Google que você obterá ajuda fácil.

Após configurarmos nossa app no Facebook, já podemos começar a codificar.. Primeira coisa que devemos fazer é adicionar um link para o endereço de autenticação do Facebook:

<a href="https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URI&scope=COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES">Entrar com Facebook</a>

Substitua YOUR_APP_ID pelo id da sua aplicação e YOUR_REDIRECT_URI pelo endereço digitado no campo "Site URL" (aquele que deve ser um domínio válido). Ambos dados são encontrados na página de configuração de sua aplicação no Facebook Developers.

O parâmetro scope do link acima, diz para o Facebook quais são as permissões adicionais que seu site precisa para acessar dados dos usuários. Por padrão, o Facebook disponibiliza id, nome, sexo e localidade (locale) dos usuários, se você precisar de mais dados, como por exemplo o email (que também iremos precisar), você deve informar nesse parâmetro scope separado por vírgulas (ex: scope=email, user_website). Então substitua COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES pelas permissões que você precisará ou remova scope e seu valor caso não precise de permissões adicionais.

Você deve ficar com um link como abaixo após as respectivas substituições.

<a href="https://www.facebook.com/dialog/oauth?client_id=104463303035318&scope=email&redirect_uri=<?php echo urlencode('http://projetos.com/glauco-blog-tutorials/Login%20com%20Facebook/') ?>">Entrar com Facebook</a>

Se você clicar nele, será redirecionado para uma tela onde o Facebook solicita permissão para os itens definidos na variável scope acima e/ou apenas às informações básicas.

Clique em "Go to App" para conceder acesso e continuar. Feito isso, você verá que foi redirecionado para a url informada no campo "Site URL" e que agora ela possui uma variável chamada code na url. Nessa mesma página, iremos incluir o código PHP abaixo (no começo da página) para conseguirmos o token de acesso (acess token) e depois obtermos os dados do usuário.

<?php

// Verifica o tipo de requisição e se tem a variável 'code' na url
if($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['code'])){
  // Informe o id da app
  $appId = '104463303035318';
  // Senha da app
  $appSecret = 'sua_app_secret';
  // Url informada no campo "Site URL"
  $redirectUri = urlencode('http://projetos.com/glauco-blog-tutorials/Login%20com%20Facebook/');
  // Obtém o código da query string
  $code = $_GET['code'];
  
  // Monta a url para obter o token de acesso
  $token_url = "https://graph.facebook.com/oauth/access_token?"
  . "client_id=" . $appId . "&redirect_uri=" . $redirectUri
  . "&client_secret=" . $appSecret . "&code=" . $code;
  
  // Requisita token de acesso
  $response = @file_get_contents($token_url);
  
  if($response){
    $params = null;
    parse_str($response, $params);
    
    // Se veio o token de acesso
    if(isset($params['access_token']) && $params['access_token']){
      $graph_url = "https://graph.facebook.com/me?access_token="
      . $params['access_token'];
      
      // Obtém dados através do token de acesso
      $user = json_decode(file_get_contents($graph_url));
      
      // Se obteve os dados necessários
      if(isset($user->email) && $user->email){
        
        /*
        * Autenticação feita com sucesso. 
        * Loga usuário na sessão. Substitua as linhas abaixo pelo seu código de registro de usuários logados
        */
        $_SESSION['user_data']['email'] = $user->email;
        $_SESSION['user_data']['name'] = $user->name;
        
        /*
        * Aqui você pode adicionar um código que cadastra o email do usuário no banco de dados
        * A cada requisição feita em páginas de área restrita você verifica se o email
        * que está na sessão é um email cadastrado no banco
        */
      }
      
    }else{
      $_SESSION['fb_login_error'] = 'Falha ao logar no Facebook';
    }

  }else{
    $_SESSION['fb_login_error'] = 'Falha ao logar no Facebook';
  }
  
}else if($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['error'])){
  $_SESSION['fb_login_error'] = 'Permissão não concedida';
}
?>

Pronto! Agora você já tem seu sistema de login e senha com autenticação pelo Facebook. Você pode conferir o código completo desse exemplo em meu GitHub.

O que você achou? Gostou?

Até mais.