Facebook App: Trabalhando com Login através do sdk para javascript - Pasqua Tecnologia
Home » Facebook • JavaScript » Facebook App: Trabalhando com Login através do sdk para javascript
Posted in Facebook, JavaScript By Douglas V. Pasqua On August 30, 2012
Este artigo esta atualizado e testado de acordo com a versão mais recente da Graph API. Última Atualização: 27/09/2015
Neste artigo vamos mostrar como fazer gerenciamento de Login do facebook através da API de javascript. Nos artigos anteriores vimos como fazer o procedimento através da API do facebook para PHP. O Login via javascript pode ser bastante útil principalmente em aplicações do Facebook integradas via Page Tab ou Canvas.
Para iniciar, vamos incluir o código abaixo logo após a tag <body> do nosso html. Esse script irá inicializar o SDK do Facebook para Javascript de forma assíncrona. Isso significa que não irá bloquear o carregamento de outros elementos na página.
Veja que é importante parametrizar o APP_ID do seu App do Facebook na linha 4. Outro ponto importante a observar é que estamos carregando o SDK do javascript no idioma pt_BR (Linha 15).
appId      : '<APP_ID>', // seu APP ID
cookie     : true, // habilita cookies para permitir o servidor acessar a sessao
xfbml      : true, // processa plugins sociais nessa pagina
version    : 'v2.4' // versao da Graph API usada
Vamos incluir em nossa página o botão de Login do Facebook, usando o Plugin Social de Login já pronto. Basta incluir a linha abaixo em sua página, no lugar onde deseja que o botão seja exibido:
<!-- plugin social de Login -->
scope="email,publish_actions" onlogin="checkLoginState();">
Para que o plugin social funcione corretamente foi necessário habilitar o parâmetro xfbml no momento da inicialização do SDK.
Veja que no plugin do Login, estamos informando que desejamos solicitar as permissões email e publish_actions através do parâmetro scope. Caso queira entender mais sobre permissões, sugiro ler o artigo Facebook App: Requisitando permissões pela API do PHP
Ao clicar no botão de Login, o usuário será redirecionado para o Login do Facebook que irá solicitar usuário e senha, caso não esteja logado, e posteriormente solicitar que o usuário aceite o aplicativo e suas respectivas permissões. Após esse processo, o usuário será redirecionado de volta para a página e será chamada a função checkLoginState(). A função checkLoginState() irá verificar se o usuário aceitou devidamente o aplicativo e a partir daí você pode redirecioná-lo para a próxima parte do seu site:
// funcao sera chamada quando usuario finalizar o processo executado
// pelo botao de Login
function checkLoginState()
// usuario logado no facebook e com o app aceito
// Usuario logado no facebook, mas nao aceitou o App
// Usuario nao logado no facebook
<title>Basic Facebook Login</title>
<fb:login-button scope="email,publish_actions" onlogin="checkLoginState();"></fb:login-button>
Selecionei abaixo algumas funções extras que podem ajudar ao trabalhar com o SDK do Facebook para Javascript.
Em algum momento é interessante saber se o usuário aceitou determinada permissão para poder realizar alguma operação que dependa dela. Exemplo:
// verifica permissios aceitas
if(entry.status == 'granted') {
permissions.push(entry.permission);
// verifica permissao
if(permissions.indexOf('publish_actions') >= 0) {
// usuario aceitou publish_actions
Você pode querer a qualquer momento dentro da página do seu aplicativo solicitar uma determinada permissão, ou forçar o usuário a aceitar uma permissão para poder continuar naquela etapa. A função abaixo solicita o login e as permissões, sem você precisar usar o Plugin Social de Login.
// chama Login do Facebook com as devidas permissoes
function callFacebookLogin ()
// usuario aceitou o app
scope: 'email, publish_actions'
Integrando com SDK do Facebook para PHP
Após realizar o Login do Facebook via Javascript é possível compartilhar a sessão criada com o PHP de forma simples, principalmente depois da versão 5 do SDK para PHP.
Um ponto importante é habilitar a opção cookie na hora de inicializar o SDK para Javascript, como vimos no início deste artigo. Para mais informações sobre a integração, sugiro ler o seguinte texto, https://developers.facebook.com/docs/php/howto/example_access_token_from_javascript/5.0.0
Tentei com lightbox ou somente pop up e nenhum funcionou 🙁
Muito bem, amigo! Meu app tava enfrentando problemas para postar no facebook, somente eu conseguia. Obrigado!
Sim, é possível solicitar a permissão para obter o email do usuário. A permissão chama-se 'email'. Veja em:
não sei se fiz algo incorreto, mas somente tenho acesso a aplicação quando estou com o usuário do facebook onde criei o app.
Olá Helsen,
Provavelmente o modo sandbox do seu aplicativo esta ativado.
Verifique o item 1 do artigo abaixo para localizar onde fica a opção do sandbox e desative a opção (para o seu caso):
http://www.douglaspasqua.com/2013/04/18/dicas-para-testar-aplicativos-para-facebook-durante-o-desenvolvimento/
Bom dia Douglas. Era exatamente isso mesmo. Nem deu tempo de vir comunicar que deu certo, vc já tinha respondido! Parabéns pelo post e pela atenção e agilidade nas respostas. Seu post foi essencial para conclusão em um módulo que estava trabalhando. Abraço!
Olá tudo bem Douglas,
Gosto muito dos seus tutoriais e da atenção que vc dar aos leitores, aproveitando desta ferramenta, gostaria de saber como fazer a interação de solicitando permissão publish_stream para postar mensagens no mural do usuário, uma vez que uso uma Page Tab, e eu uso o método através do sdk para javascript para longar na page tab.
Tipo assim quero entrar na Page Tab usando sdk para javascript, e solicitar permissão publish_stream para postar mensagens no mural do usuário.
Olá Joel! Satisfação que esta sendo útil! Grato!
Veja abaixo um exemplo de como solicitar permissões publish_stream pela api de javascript. Veja que se o usuário já concedeu as permissões, não será solicitado novamente.
// response.perms é a lista de permissões que o usuário concedeu
// usuário logado porém não aceitou nenhuma permissão
// usuário não esta logado
Não sei o que acontece, mas ele entra na função statusFacebook mas não entra no FB.getLoginStatus. Sendo assim não ocorre nada quando clico no botão. Nem erro. Alguém pode me ajudar?
Você configurou corretamente o APP_ID na linha 8 do script ? Tente verificar algum erro de javascript no console de debug do navegador.
Parabéns pelos posts e pela atenção que da ao pessoal aqui. Gostaria de saber o seguinte, estou tentando postar em uma fan page, porem só me retorna que não tenho acesso para postar na página, estou usando o To e From para tentar fazer o app postar na página esta correto? ou o que eu posso fazer ?
Para fazer postagem na fan page é necessário solicitar a permissão "manage_pages" caso você for o administrador da sua própria fanpage. Caso esteja postando em uma fanpage qualquer, é necessário solicitar a permissão "publish_stream" somente. No link abaixo exemplifico como fazer a postagem em uma fan page no qual você é o administrador:
By José Fagundes
Olá, não manjo quase nada de JS, mas como vou utilizar meu app em uma tab do face preciso descobrir como faço para após realizar a verificação de login e permissões verificar se o usuário já curtiu determinada fan page e só então liberar o acesso as informações do app.
Já li seu outro artigo: http://www.douglaspasqua.com/2013/01/11/facebook-verificando-se-usuario-curtiu-fan-page/ mas não estou conseguindo unir aquele com este.
Ola Jose Fagundes,
Para verificar se o usuario curtiu a fanpage, e se solicitou as permissoes devidas, dentro de uma aba de fanpage, e necessário que a pagina que esta criando, esteja dentro dos padrões exigidos pelo facebook (810px de largura?)..
por isso a necessidade de trabalhar com a solicitação de permissões usando o SDK de javascript.
somente depois de trabalhar com as permissões em javascript, sera possível verificar se o usuário curtiu ou não a fanpage.
Este artigo: http://www.douglaspasqua.com/2012/08/30/facebook-app-trabalhando-com-login-atraves-do-sdk-para-javascript
ira ensinar como solicitar as permissões em javascript.
esse outro artigo: http://www.douglaspasqua.com/2013/01/11/facebook-verificando-se-usuario-curtiu-fan-page/
ira mostrar como verificar se o usuario curtiu ou não a fanpage..
outra opaco, que acho que pode complementar, eh o artigo introdutório de como criar app para facebook:
http://www.douglaspasqua.com/2012/06/07/criando-aplicativos-para-facebook-usando-sdk-do-php/
By freezeavenger
Olá douglas, estou precisando criar um APP bem simples, vai solicitar os dados das pessoas e depois que elas logarem, elas serão redirecionadas para um link…
Como eu faço para que logo ao abrir o site já apareca o pop up pedindo para a pessoa logar com o facebook (sem ela precisar clicar em "Continuar na APP")?
Acredito que pode resolver colocando no onLoad da tag body. Ex:
<body onLoad="statusFacebook();">
OK… esse codigo eu coloco na pagina que farei o login… Por exemplo, Login.php.
e na pagina que seria acessada somente para o usuário que já estiver conectado, o que tenho que colocar?
Olá Flavio, na página acessada somente pelo usuário logado, você poderia criar praticamente a mesma estrutura, porem modificando a função statusFacebook(). Se cair em 'not_authorized' redireciona para a página anterior.
By Vinícius Alfonso
Olá Douglas, estou integrando o Facebook ao meu site, consigo fazer o login e quando chamo a função /me, somente me retorna o id e o nome do usuário, eu peço a permissão de email e public_profile, não sei o que pode estar faltando. Quando uso me/permissions aparece estas permissões que citei acima.
Olá Vinícius, você esta fazendo corretamente. Porem nas últimas versões da graph api é necessário informar quais os campos você deseja consultar. Ex: /me?fields=id,name,email,gender. Você pode se informar sobre o nome dos campos no link https://developers.facebook.com/docs/graph-api/reference/user. Boa sorte!
Gostaria de saber como e em qual trecho fazer esse redirecionamento/solicitação Ajax, pois com o que tentei, não deu muito certo. Agradeço a ajuda. Parabéns pelo trabalho.
Isso na integração com o PHP, pois na documentação diz que se precisa fazer um redirecionamento ou solicitação AJAX ao arquivo .php.
Olá Laercio, para fazer a integração com o PHP não há obrigatoriedade de fazer com ajax. Pode ser um redirecionamento de página ou ajax, tanto faz. Por exemplo, Após o usuário ter logado callFacebookLogin(), linha 6, você pode enviá-lo para uma página php. Ex: window.location='http://example.net/pagina.php'. No lado do PHP, usando o SDK v5 do facebook, utilize o getJavaScriptHelper. Veja um exemplo neste link: https://developers.facebook.com/docs/php/howto/example_access_token_from_javascript. O que faz possível essa integração, é o parâmetro cookie: true na inicialização do sdk javascript.