Programação / jQuery

Efetuando Login Social com Facebook

Crie sua própria estrutura para efetuar o login no facebook e resgatar informações do perfil público do usuário.

Por Gustavo Web

Publicado por Gustavo Web
em 24/01/2018 às 18h00

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Salve salve developers, bora aprender como efetuar o login no Facebook e resgatar as informações do usuário para criar a sessão no seu sistema?

Base de Estudos:

Documentação:

Como de praxe, vou deixar aqui toda a documentação que utilizamos para montar essa estrutura de login com o facebook. A documentação do facebook é muito top! Vários exemplos de como utilizar, rica em informação e toda em português.

Aqui você vai acessar a a central Facebook for Developers, tudo o que você precisar toda a parte tecnica estará aqui dentro!

Nesse link você tem um Explorador da API Graph, que eu mostro também como trabalhar! Auxilia muito no processo de debug.

O seu Painel de Aplicativos lista todos os seus Apps e as informações relevantes de cada um deles.

São vários outros links que eu vou mostrando no decorrer da aula. Basicamente é seguir o passo a passo que é sucesso!

Repositórios:

Abordando os repositórios, novamente nesse caso temos dois diretórios! Um diretório de início de projeto com _initial, totalmente limpo, sem gatilhos... E o outro já todo parametrizado (sem o meu id de app é claro) com o _full no final.

Para acessar e efetuar o download, é só clicar aqui!

E você já sabe né? Se está acessando os repositórios da Up, clica na estrelinha e no zóinho, me segue, segue a Up, segue o tio Rob... Assim você sempre serão notificados :)

Projeto:

Eu já construi uma interface bem simples para que possamos focar somente em codificar! Já está com flexbox e já está responsiva... Mas nada de muito luxo! Simplesmente usei as mesmas cores do facebook para dar uma interface mais amigável :)

A aplicação já tem uma folha de estilos, um pacote de ícone, um front-controller básico e um controlador ajax. Se for você implementar dentro do seu sistema, basicamente o que você terá que modificar é o controllerAjax.php para adequar de acordo com a sua necessidade e adicionar os recursos necessários.

Como dica, eu diria para seguir esses passos:

Lembrando que esses passos é o que tenho em mente e não validei eles. Estou colocando esses pontos somente de acordo com a abstração de dados que tive!

Daí você pode se perguntar, mas como vou usar isso para fazer login no meu sistema? Hora, se você recebeu o e-mail do facebook, significa que a pessoa do outro lado da telinha tem acesso ao facebook com a senha correta e concedeu permissão para que você possa resgatar as informações...

Com isso, basta você verificar na sua base se já existe um usuário com esse e-mail e criar a sessão baseado no ID dele; e todo nível de permissão que precisa ser concedido, você faz relacionado a esse ID.

API Javascript:

Trabalhamos com o javascript aqui por seguir simplesmente a documentação com o tutorial rápido que consta na documentação. Mas é claro que você pode e deve explorar as API's principalmente do PHP para que você possa construir uma classe com a responsabilidade clara para resolver esse tipo de problema.

Uma vez a classe feita, você pode replicar para outros projetos para implementar esse mesmo recurso.

Feedback:

Me conta aqui nos comentários o que você achou, se implementou e se vai colocar para rodar num projeto! Vou estar de olho nos comentários :)

Compartilhe:

Em Programação:

Deixe seu comentário: