[ Usabilidade ]

Home » Usabilidade » Logando no seu site utilizando api do Facebook
Inscreva-se em nosso canal no Youtube Daviwp


Logando no seu site utilizando api do Facebook

09/04/2013 Usabilidade (8) comentários

Olá, galera! Hoje veremos um artigo rápido, direto e definitivo para você poder definitivamente efetuar um login com Facebook em seu site. Vamos lá?

Primeiramente, sugiro verificar a documentação da SDK tanto PHP, como para Javascript neste link: https://developers.facebook.com/ e assim ter uma base de funcionamento dessa biblioteca.

Antes de tudo, vamos Criar um App no Facebook para seu site, para podermos ter uma “porta” de entrada para solicitar dados de usuários ao Facebook. Para criar uma Aplicativo, é muito fácil, basta ir neste link: https://developers.facebook.com/ e fazer login com sua conta normal do Facebook. Após isso, vá no link Apps na barra superior e clique no botão Criar Novo Aplicativo.

Logo após clicar no botão, irá aparecer a tela abaixo para digitar o nome de seu aplicativo (sugiro o nome do seu site) e, no campo abaixo serve para caso queira adicionar parâmetros adicionais ao seu aplicativo, no nosso caso, vamos deixar em branco. O Check pergunta se você deseja hospedar seu aplicativo no servidor da Heroku (Leia mais sobre Heroku aqui), também vamos deixar desmarcado este Check e clicamos em Continuar.

Login utilizando facebook

Login utilizando facebook

Depois irá aparecer o campo Captcha e vamos prosseguir. Depois de tudo, temos nosso aplicativo já criado e já com os parâmetros App ID e App Secret que são os códigos criptografados que só seu app tem para ter acesso ao Facebook. Veja a tela abaixo:

Login utilizando facebook

Login utilizando facebook

Bom, essa é a tela de configurações de seu aplicativo, nas tarjas vermelhas ficam a App ID e a App Secret que iremos utilizar elas depois. Navegando nos demais links à esquerda, podemos notar mais funções como Permissões, que falaremos depois, Pagamentos, Detalhes do Aplicativo que você poderá adicionar fotos, descrições, links para seu termos de uso de seu site, termos de privacidade que é importante. Bom, não feche essa tela ainda, abaixo você vai ver essa imagem:

Login utilizando api do facebook

Login utilizando api do facebook

Nessas opções (fica na mesma tela que citei acima) o Facebook pergunta como você quer utilizar este aplicativo. Vamos selecionar a primeira Opção (Website with Facebook Login) no qual aparece um campo para você digitar a URL de retorno.

Vou explicar: Nessa parte, você vai digitar a URL que você quer que o Facebook traga o usuário de volta caso ele esteja deslogado do Facebook. Por exemplo: Vamos imaginar que você tem um site com uma página de cadastro (www.seusite.com.br/cadastro.php) e nessa página “Cadastro.php tem o devido formulário para que o usuário digite os dados manualmente.

Como vamos obter esses dados pelo Facebook (e-mail, nome do usuario, foto ou até publicar no mural dele), apenas nesse campo digite a URL (www.seusite.com.br/cadastro.php) porque assim, quando o usuário quiser efetuar login com Facebook em seu site e nesse campo tiver a URL da página inicial do seu site, quando o usuário logar no Facebook ele mandará os dados para a página inicial, que é o que não queremos!

Clicamos em Salvar alterações e vamos começar a codar!!!

(aposto que vocês estavam com os dedos coçando heim?? rsrsrsr)…

Para efetuar alguns testes, programei esses mesmos códigos daqui no meu próprio servidor, e caso vocês queiram ver funcionando, cliquem aqui!

Bom, primeiro adicione esse código HTML na sua página:

 

<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>

Agora vou explicar todos os parâmetros dessa anchor para você intender:

Client_id: Nesse parâmetro, você vai substituir o “YOUR_APP_ID” pelo o App ID que mencionei lá em cima, se encontra nas configurações do seu App logo na página inicial.
redirect_uri: Neste, tem que ser a mesma URL que você digitou lá nas configurações do App ( Website with Facebook Login) também que expliquei para você, que se chama a URL de retorno. Substitua o “YOUR_REDIRECT_URI” pelo link que você colocou lá.
Scope: Nesse último parâmetro, você vai especificar separadas por virgula as permissões adicionais que seu site precisa. Por Default (padrão) o Facebook disponibiliza o Id do usuário, nome, sexo e localidade.

Veja abaixo a mesma URL só que preenchida com os devidos dados do app:

&lt;a href="https://www.facebook.com/dialog/oauth?client_id=<b>104463303035318</b>&amp;scope=<b>email,user_website,user_location</b>&amp;redirect_uri=<b>https://fb.matheusafonso.com/</b>"&gt;Entrar com Facebook&lt;/a&gt;

Perceba, que solicitei as permissões: e-mail, user_website e user_location adicionais.

Agora, clique no link e você será redirecionado para fazer login no Facebook e verá a seguinte tela:

Login utilizando api do facebook

Login utilizando api do facebook


Nesta tela, o Facebook pergunta se você deseja compartilhar suas informações com o seu próprio aplicativo. Confirmando o acesso, você será levado de volta para o seu site informando no campo que você preencheu (Site URL).

Na sua página, adicione o seguinte código PHP (preferencialmente no inicio):

<?php
session_start();
if($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['code'])){
 
  // Informe o seu App ID abaixo
  $appId = '29048572934875';
 
  // Digite o App Secret do seu aplicativo abaixo:
  $appSecret = '123456789';
 
  // Url informada no campo "Site URL"
  $redirectUri = urlencode('https://fb.matheusafonso.com/');
 
  // Obtém o código da query string
  $code = $_GET['code'];
 
  // Monta a url para obter o token de acesso e assim obter os dados do usuário
  $token_url = "https://graph.facebook.com/oauth/access_token?"
  . "client_id=" . $appId . "&redirect_uri=" . $redirectUri
  . "&client_secret=" . $appSecret . "&code=" . $code;
 
  //pega os dados
  $response = @file_get_contents($token_url);
  if($response){
    $params = null;
    parse_str($response, $params);
    if(isset($params['access_token']) && $params['access_token']){
      $graph_url = "https://graph.facebook.com/me?access_token="
      . $params['access_token'];
      $user = json_decode(file_get_contents($graph_url));
 
    // nesse IF verificamos se veio os dados corretamente
      if(isset($user->email) && $user->email){
 
    /*
    *Apartir daqui, você já tem acesso aos dados usuario, podendo armazená-los
    *em sessão, cookie ou já pode inserir em seu banco de dados para efetuar
    *autenticação.
    *No meu caso, solicitei todos os dados abaixo e guardei em sessões.
    */
 
        $_SESSION['email'] = $user->email;
        $_SESSION['nome'] = $user->name;
        $_SESSION['localizacao'] = $user->location->name;
        $_SESSION['uid_facebook'] = $user->id;
        $_SESSION['user_facebook'] = $user->username;
        $_SESSION['link_facebook'] = $user->link;
      }
    }else{
      echo "Erro de conexão com Facebook";
      exit(0);
    }
 
  }else{
    echo "Erro de conexão com Facebook";
    exit(0);
  }
}else if($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['error'])){
  echo 'Permissão não concedida';
}
?>

Acho que nem preciso explicar este código né? Bem simples e comentado.

No caso, todos os dados solicitados do usuário vem em Array Object. Para você ver todos os dados apenas adicione:

<?php
echo "<br><br><div>";
print_r($user);
echo "</div>";
?>

Pronto! Seu login está funcionando perfeitamente! Seja criativo. Caso queira ver como funciona, acesse: https://fb.matheusafonso.com/

Obrigado e qualquer dúvida, comente aí.

Até mais galera, um grande abraço.

Post: Matheus Afonso

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

  • Guest

    Ele me retorna Erro de conexão com Facebook

  • edu115dudu115

    Valeu cara consegui criar o botão para minha rede social olha https://intagrao.webs.com/

    • daviwp

      Muito bom Edu!

  • Leonardo

    muito legal esse post, parabéns!

    • daviwp

      Obrigado Leonardo!

  • Felipe Furlan

    Deu certo comigo ! Parabens !

    • daviwp

      Obrigado Felipe!

  • daviwp

    Fala Jeferson, desculpa ai cara, tenho demorado responder mesmo as duvida da galera, vida de programador e diretor web não é fácil estou fazendo o máximo para responder todos, depois mim ensina esse lance de concatenar, eu faço tudo de graça aqui nesse blog compartilhar conhecimento é sempre importante.

Facebook

Publicidade