Aprenda a adicionar o Facebook Login no seu site usando JavaScript ou PHP

Por Sérgio Oliveira

O Facebook é hoje a rede social mais popular do mundo. Essa popularidade, no entanto, não está relacionada apenas à quantidade de usuários, tráfego de dados e/ou tempo de permanência das pessoas no site social, pelo contrário. Além de tudo isso, há outros fatores que colaboraram e continuam colaborando para o fortalecimento da marca criada por Mark Zuckerberg, sendo sua API e SDK um dos dois mais importantes.

Com esses dois recursos, desenvolvedores de todos os cantos do mundo podem criar aplicações integradas ao Facebook, tomando proveito, principalmente, dos dados e informações que lá estão. Ademais, graças a esses recursos, o próprio Facebook consegue oferecer alguns pequenos apps que podem ser incorporados prontamente em alguns sites, sendo um dos mais populares o sistema de autenticação baseado na rede social.

Se o seu site ou sistema exige que os usuários se autentiquem para poder utilizá-lo, uma boa dica é "socializar" esta etapa do processo e integrá-la ao Facebook. O próprio Facebook explica como tudo isso funciona num documento para desenvolvedores PHP e JavaScript. Mesmo assim, nós faremos um passo a passo para orientá-lo melhor sobre como fazer isso.

Criando um app no Facebook

Antes de mais nada, é preciso criar um novo app no Facebook. Dessa forma, temos uma "porta de entrada" para solicitar os dados dos usuários que se autenticarão no sistema usando a rede social.

Para isso, vá até a área de desenvolvedores do site e faça o login com sua conta do FB. Depois disso, acesse o link "Apps" na parte superior e clique no botão "Criar Novo Aplicativo" (ou "Add a New App", em inglês).

Acesse a página Facebook Developers para iniciar a criação de um novo app para a rede social

Acesse a página Facebook Developers para iniciar a criação de um novo app para a rede social (Imagem: Captura de tela / Sergio Oliveira)

Logo após clicar no botão, o site perguntará para qual plataforma você criará o novo app. Como queremos incorporar um sistema de autenticação a um site/sistema web, aqui escolheremos a opção "Site".

Nesta etapa, indique sua aplicação serão usada em um site web escolhendo a última opção

Nesta etapa, indique sua aplicação serão usada em um site web escolhendo a última opção (Imagem: Captura de tela / Sergio Oliveira)

Logo em seguida, o Facebook lhe guiará através de um Wizard, que perguntará informações como nome do aplicativo e a categoria a que ele pertence. Para este exemplo, o nome escolhido foi "Teste Autenticação Canaltech" e a categoria "Aplicativos para Páginas". Ao término, confirme a criação clicando em "Create App Id" conforme indicado na imagem abaixo.

Nomeie o seu aplicativo e indique a categoria a que ele pertence nesta parte do processo de criação

Nomeie o seu aplicativo e indique a categoria a que ele pertence nesta parte do processo de criação (Imagem: Captura de tela / Sergio Oliveira)

Após a confirmação, o Facebook exibirá uma tela de configuração rápida com algumas instruções sobre como desenvolver e incorporar sua aplicação. Aqui, role a página até a parte inferior onde pede para que você informe as URLs do seu site. Forneça-as e clique em avançar.

Indique o endereço do site que utilizará o aplicativo e se ele possui uma URL exclusiva para dispositivos móveis

Indique o endereço do site que utilizará o aplicativo, se ele possui uma URL exclusiva para dispositivos móveis e clique em avançar (Imagem: Captura de tela / Sergio Oliveira)

Na sequência, será exibida uma caixa com instruções para você testar sua integração com o Facebook e outra chamada "Próximas etapas". Nesta última, o site quer saber basicamente como o seu app se integrará com a rede social. No nosso caso, podemos selecionar "Fazer login" e então seremos redirecionados para uma página que explica praticamente todos os passos necessários para implementar a funcionalidade.

Aqui, você poderá clicar em

Aqui, você poderá clicar em "Fazer login" para ser direcionado a uma documentação que explica como realizar a implementação ou em "Skip to Developer Dashboard" para ser direcionado à central de configuração do app (Imagem: Captura de tela / Sergio Oliveira)

Já ao clicar em "Skip to Developer Dashboard", você será levado à central de configuração do seu aplicativo. É lá que você visualizará dados importantes como o seu App ID e App Secret. Copie e os deixe guardados para posterior utilização.

Na dashboard do app você visualiza não só o App ID e o App Secret da sua aplicação, como também configura outras opções como quem participa da criação dele, privacidade etc

Na dashboard do app você visualiza não só o App ID e o App Secret da sua aplicação, como também configura outras opções como quem participa da criação dele, privacidade etc (Imagem: Captura de tela / Sergio Oliveira)

Embora ajude muito, o passo a passo oferecido pelo Facebook explica, basicamente, apenas a utilizar o SDK em JavaScript. Contudo, essa não é a única forma: além dela, é possível fazer essa implementação via PHP e de uma forma personalizada utilizando etapas feitas por você mesmo. Vamos a cada uma delas.

Implementando o Facebook Login com o SDK JavaScript

Adicionar o botão de autenticação do Facebook utilizando o SDK JavaScript é a forma mais simples de todas. O próprio Facebook disponibiliza um passo a passo rápido para a configuração desta forma, além de oferecer detalhes explicando como tudo funciona.

Para começar, é preciso carregar e inicializar o SDK JavaScript na sua página. O código abaixo é um exemplo de uma página com isso já feito.

Exemplo de código para implementação usando SDK JavaScript

Atenção especial para a porção destacada em vermelho, que indica o local onde você deve inserir o seu App ID exibido anteriormente na dashboard da aplicação criada.

Pronto, após executar esta etapa seu site conseguirá fazer com que os usuários se autentiquem usando suas contas ao entrar no Facebook. Cada vez que um login for feito, você conseguirá identificar os usuários logados e poderá tratar o conteúdo do site de forma diferenciada para cada um deles.

Implementando o Login do Facebook com o SDK PHP

A principal diferença entre usar o SDK JavaScript e SDK PHP é que com este último você tem acesso a um conjunto maior de funcionalidades server-side para acessar a API do Facebook pelo lado do servidor. Com isso, é possível manter o código da aplicação mais seguro e protegido do que quando se usa JavaScript. Além disso, também é possível executar chamadas usando o Graph API ou a Facebook Query Language (FQL).

Se você optou por esse caminho, o primeiro passo a ser dado é baixar o SDK PHP do Facebook aqui. Lá, procure pelo botão para fazer o download do ZIP na coluna à direita da página.

Baixe o arquivo e o descompacte para ver alguns arquivos e pastas. Embora haja uma quantidade imensa de arquivos, aqui você só precisará usar dois para implementar a autenticação via Facebook usando o SDK PHP: o base_facebook.php e facebook.php, ambos na pasta /src.

Com o SDK PHP baixado, você precisará fazer o upload destes dois arquivos para o seu servidor web

Com o SDK PHP baixado, você precisará fazer o upload destes dois arquivos para o seu servidor web (Imagem: Captura de tela / Sergio Oliveira)

Agora que você já tem os arquivos, é necessário criar uma estrutura mínima de diretórios para organizar os arquivos do SDK e do seu site. Uma boa sugestão é que os arquivos do SDK sejam colocados numa pasta chamada /sdk-facebook e que esta pasta esteja no mesmo diretório do arquivo de exemplo que você fará.

Seguindo a sugestão, a estruturação das pastas ficaria da seguinte forma:

  • ./site/exemplo.php
  • ./site/sdk-facebook/facebook.php
  • ./site/sdk-facebook/base_facebook.php

Abaixo, o exemplo demonstra como utilizar o SDK PHP para implementar o Facebook login em uma página.

Exemplo de implementação usando SDK PHP

Atenção especial para a porção destacada em vermelho, que indica o local onde você deve inserir o seu App ID e App Secret exibidos anteriormente na dashboard da aplicação criada.

Embora o exemplo acima restrinja a implementação usando apenas o SDK PHP, também é possível mesclar ambos os SDKs (JavaScript e PHP) para otimizar o processo e torná-lo mais eficiente no seu site. Como isso varia de site para site, recomendamos estudar a documentação de cada um dos SDKs para ajustá-los à sua necessidade.

Ainda sobre o exemplo, ele utiliza o Facebook Query Language (FQL) para capturar os dados do usuário. É possível realizar a mesma tarefa utilizando a Graph API, mas o FQL se integra melhor com o PHP e facilita o acesso a muitos dados que a rede social oferece para consulta. Quem está acostumado com a sintaxe SQL não encontrará dificuldades em utilizar o FQL.

Caso você queira saber um pouco mais sobre o FQL, o site de desenvolvedores do Facebook oferece uma documentação bastante completa aqui. O mesmo existe para a Graph API. Também há uma ferramenta bastante útil para testar chamadas via Graph API ou FQL, o Graph API Explorer. Nela, você pode digitar a instrução no campo respectivo e visualizar o resultado ali mesmo - bastante útil para quem quer mergulhar de cabeça no assunto.

Implementando o Login do Facebook com etapas personalizadas

Embora as duas formas acima atendam as necessidades de grande parte dos desenvolvedores, há quem queira desenvolver seu próprio passo a passo utilizando o login do Facebook. E é aí que entra a personalização das etapas de login. Como esta forma varia de acordo com a necessidade de cada um, procuraremos fazer uma demonstração básica, cabendo a você personalizar a coisa como um todo.

Dito isto, imagine que você quer obter algumas informações preliminares do usuário antes que ele faça o cadastro no seu site. Portanto, o botão login do Facebook serviria para capturar dados como e-mail, nome e id do usuário e foto do Facebook. Depois disso, o usuário seria redirecionado para uma página /cadastro.php onde ele completará a inserção das informações.

Para fazer algo nesse estilo, basta adicionar o seguinte código HTML à sua página:

Perceba que temos três parâmetros aqui. Vamos detalhá-los:

  • client_id: substitua o "YOUR_APP_ID" pelo App ID que é exibido na dashboard de configuração do seu app no Facebook;
  • redirect_url: aqui, você deve colocar a mesma URL digitada nas configurações do app. Como estamos trabalhando com uma URL de retorno de informações, neste exemplo teríamos que substituir "http://www.canaltech.com.br" para algo como "http://www.canaltech.com.br/cadastro.php" lá e aqui;
  • Scope: neste último parâmetro você especifica as permissões adicionais que seu site precisa, separando-as por vírgula. Por padrão, o Facebook disponibiliza o id do usuário, nome, sexo e foto do perfil. Para obter outros dados ou saber quais os parâmetros que podem ser passados aqui, recomendados a leitura desta documentação.

Depois de terminar isso, você pode salvar o arquivo e testar o botão no seu navegador. Ao clicar nele, você será perguntado se deseja compartilhar as informações com o app. Ao confirmar o acesso, você será levado de volta para a URL forneceida no parâmetro redirect_url.

Nesta página, você poderá acessar e manipular os dados recebidos do Facebook para tanto preencher um formulário de cadastro quanto para validar o login do usuário e redirecioná-lo para outra página. Esta segunda etapa poderia ser feita ao comparar o id do usuário e e-mail obtidos do Facebook com o cadastrado previamente numa base de dados, por exemplo.

Abaixo, um exemplo de código PHP que serve de pontapé inicial para tudo isso:

Exemplo de implementação personalizada

Perceba que todos os dados do usuário que foram solicitados vêm em um Array Object $user. Caso tenha dúvidas sobre como estão organizados os dados, basta fazer o seguinte:

Pronto, você implementou o login do Facebook num passo a passo personalizado. Claro que há inúmeras maneiras de usar esses dados, mas cabe a você dar um destino a eles de acordo com sua necessidade. Coloque a cuca para funcionar!

Ativando o app para o público

Depois de todo esse trabalho, agora você tornar a sua aplicação pública para que todo mundo possa acessar e utilizá-la. Para isso, vá até a dashboard do app, acesse o menu "Settings" (configurações, em português) e insira um endereço de e-mail válido no campo "Contact Email" (E-mail para contato). Depois disso, no botão "Save Changes" na parte inferior direita da página.

Antes de tornar sua aplicação público é preciso fornecer um e-mail de contato válido

Antes de tornar sua aplicação público é preciso fornecer um e-mail de contato válido (Imagem: Captura de tela / Sergio Oliveira)

Depois que as alterações forem salvas, acesse o menu "Status and Review" e altere a opção que pergunta se você quer tornar seu aplicativo público para "Yes" (Sim).

Somente após definir um e-mail de contato é que é possível retirar a aplicação do modo de desenvolvimento e disponibilizá-la para o uso geral

Somente após definir um e-mail de contato é que é possível retirar a aplicação do modo de desenvolvimento e disponibilizá-la para o uso geral (Imagem: Captura de tela / Sergio Oliveira)

Feito isso, sua aplicação estará pública e todos que acessarem o seu site poderão usufruir dela.

Instagram do Canaltech

Acompanhe nossos bastidores e fique por dentro das novidades que estão por vir no CT.