Facebook App: Trabalhando com Login através do sdk para javascript
Introdução
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. As funções em javascript foram úteis quando precisei incluir uma app própria dentro de um Page Tab do facebook. O Page Tab pode ser acessado dentro de uma fanpage e o tamanho máximo de largura deve ser 810px. Devido a essa restrição, fazer a requisição de permissões da app pela api do php não funciona dentro do Page Tab, devido a limitação do tamanho de tela. À alternativa foi fazer o processo de login/autorização usando o sdk para javascript, que abre uma nova janela para permitir o ingresso na aplicação. Dessa forma, conseguimos trabalhar dentro do limite estabelecido para o Page Tab.
Processo
Antes de mais nada, é necessário ter uma aplicação do facebook criada. Para saber como criar uma app para facebook, clique aqui.
Para iniciar, é preciso incluir a lib javascript do facebook dentro da sua página:
<script src="http://connect.facebook.net/en_US/all.js"></script>
O próximo passo é inicializar a sdk do facebook, informando o APPID da sua aplicação.
FB.init({
appId : '<SEU APPID>',
status: true, cookie: false, xfbml: false
});
Pode manter os options da forma acima. Para saber mais sobre as opções, clique aqui.
Vamos criar uma função javascript que será responsável por inicializar a tela de login do facebook, e solicitar para o usuário a ingressão dele na app:
function loginFacebook() {
FB.login(function(response) {
if (response.authResponse) {
window.location.replace("URL_TO_REDIRECT");
}
}, {scope: 'email,publish_stream,user_photos,friends_about_me' });
}
O interessante observar aqui, é que você altere o texto URL_TO_REDIRECT para um URL que será aberto após o usuário realizar o login no facebook. Outro ponto interessante à observar é a linha que contém:
{scope: 'email,publish_stream,user_photos,friends_about_me' }
O parâmetro scope, define quais são as permissões que a app irá solicitar para o usuário. Para maiores informações acesse a página do facebook que fala sobre as possíveis permissões, clicando aqui. Mais detalhes tamém no meu outro artigo.
Para completar nosso artigo, vamos criar uma nova função que verifica se o usuário já ingressou e/ou esta autorizado em nossa app. Nesse ponto, saberemos se há necessidade de chamar a função de login do facebook ou não. Não há necessidade de chamar a função de login caso o usuário já esteja logado e já tenha autorizado as permissões solicitadas pela app.
function statusFacebook() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location.replace("URL_TO_REDIRECT");
} else if (response.status === 'not_authorized') {
loginFacebook(); // nao autorizado, solicitar login
} else {
loginFacebook(); // nao autorizado, solicitar login
}})
}
No código acima, informe a URL para qual o usuário deve ser redirecionado caso já esteja logado e autorizado pela app. É só trocar o lugar onde esta o texto URL_TO_REDIRECT. Normalmente, deve ser o mesmo link que você usou na função de login anterior.
Juntando as peças, temos o código final:
<html>
<head>
<title>Teste de Login Facebook</title>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '<SEU APPID>',
status: true, cookie: false, xfbml: false, oauth: true
});
function statusFacebook() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location.replace("URL_TO_REDIRECT");
} else if (response.status === 'not_authorized') {
loginFacebook(); // nao autorizado, solicitar login
} else {
loginFacebook(); // nao autorizado, solicitar login
}})
}
function loginFacebook() {
FB.login(function(response) {
if (response.authResponse) {
window.location.replace("URL_TO_REDIRECT");
}
}, {scope: 'email,publish_stream,user_photos,friends_about_me' });
}
</script>
</head>
<body>
<a href="#" onClick="statusFacebook();">Continuar na APP</a>
</body>
</html>
Exemplo da tela de login criada usando sdk para javascript. A tela será aberta em um popup após clicar no link Continuar na APP:
Olá tudo bem? Parabéns pelos tutoriais e por compartilhar seu conhecimento.
Tentei fazer aqui e dentro da tab não funcionou, acessando a URL externa, funciona quando clica no link. :S
Teria como fazer a verificação e entrar na tela a caixa de login? e então após autorizar, exibir o conteúdo da aba?
Obrigado.
Henrique
fevereiro 21, 2013
Tentei com lightbox ou somente pop up e nenhum funcionou 😦
Henrique
fevereiro 21, 2013
Olá Henrique, Normalmente quando o usuário chega na sua aplicação através da Tab na fan page, ele provavelmente já esta logado no facebook.
Portanto, o FB.getLoginStatus provavelmente irá retornar “connected”! A melhor solução seria se você pudesse checar pelo sdk do javascript, se o usuário aceitou as permissões necessárias.
Caso o usuário não tenha aceito, solicitar o login novamente com a permissão desejada.
Veja um exemplo:
FB.api({ method: 'fql.query', query: 'SELECT publish_stream FROM permissions WHERE uid=me()' }, function(resp) { for(var key in resp[0]) { if(resp[0][key] == 1) { // usuario possui a permissao } else { // usuario nao possui a permissao, solicitar: FB.login(function(response) { if (response.authResponse) { // aqui o usuario pode ter aceito ou nao as permissoes no popup // portanto, verificar novamente aqui se o usuario aceitou // a permissao. // caso nao tenha aceito pode redireciona-lo para // outra pagina } }, {scope: 'publish_stream' }); } } });O código acima, verifica se o usuário aceitou a permissão publish_stream. Caso não tenha aceito, será solicitado a permissão através de um popup !
Esse código pode ser chamado após o status ter retornado ‘connected’!
Boa sorte!
pasquati
fevereiro 21, 2013
Como eu faço para integrar esse código com o php? Quero resgatar os dados do usuário com o php e pedir permissão com o javascript. Tem como?
Parabéns pelo job. 🙂
Victor
fevereiro 21, 2013
Olá Victor!
Sim, é possível integrar o app com javascript e php! Toda requisição que você fizer para o php vindo do html/javascript, estará na mesma sessão do facebook. No php, lembre-se de importar o sdk do facebook e instanciar a app usando o APP_ID e SECRET. Usar o mesmo APP_ID que você configurou no javascript.
Já desenvolvi apps que fazem o login e solicitam as permissões por javascript, e na hora de publicar uma foto no mural, chama um script php! Funciona normalmente.
Boa sorte!
pasquati
fevereiro 21, 2013
Consegui integrar com o php, está dando um erro as vezes “Fatal error: Uncaught OAuthException: An active access token must be used to query information about the current user. thrown in” e também sempre que eu saio do facebook e entro novamente vou no app, o usuário fica como 0 e então aparece a mensagem para autorizar o app. Meu app não consegui verificar a sessão do facebook logo de cara, sabe qual é o problema?
obrigado
victor
fevereiro 25, 2013
Olá Victor, me parece um problema de autorização do usuário.
Aconselho a fazer o seguinte. Primeiro, Vá em Configurações da Conta -> Aplicativos! Identifique a sua aplicação e remova ela da lista. Faça um logout do facebook, feche o navegador. O objetivo é eliminar qualquer sessão que esteja conflitando. Abra o navegador novamente, logue no facebook e teste a aplicação novamente.
Caso o problema continue, me envie o código php para dar uma olhada.
Boa sorte!
pasquati
fevereiro 26, 2013
Pasquati, consegui resolver o problema do erro colocando try antes de iniciar a aplicação e um catch pedindo para autorizar o app caso ainda não tenha sido feito. O problema é que dessa forma quando eu saio e entro no facebook ele se torna uma excessão e então tenho que autorizar o app novamente. Você sabe como resolver esse problema? Tentei colocar offline_access no array de permissão mas não funcionou.
Obrigado pelas ajudas.
victor
fevereiro 26, 2013
Só mais um detalhe. Caso eu já tenha autorizad o o app, saia do facebook e entre novamente, ele aparece pedindo para autorizar novamente. Se eu der refresh na página ele aparece as informações (não aparece pedindo para autorizar). Tem como fazer essa verificação com o php ao entrar na página?
Obrigado mais uma vez (:
victor
fevereiro 26, 2013
Olá Victor,
Para tentar resolver o problema com autorização, identifique a seguinte linha no código php:
Por
// usuario nao logado, solicitar autenticacao $loginUrl = $facebook->getLoginUrl(); header("Location: " . $loginUrl); exit;Veja se ajuda! Boa sorte!
pasquati
março 1, 2013
Uma dúvida. Quero pegar os e-mails dos clientes para depois poder usar em minha empresa (vulgo span). Tem como colocar essa permissão estendida? Aonde o usuário poderá escolher ou não me passar o e-mail para esse fim? E também, notei que alguns app tem textos explicando na própria requisição (“Este aplicativo está coletando seu e-mail para enviar span”). Sabe como faço isso?
Obrigado pela ajuda
Pedro
março 6, 2013
Olá Pedro,
Sim, é possível solicitar a permissão para obter o email do usuário. A permissão chama-se ‘email’. Veja em:
http://developers.facebook.com/docs/reference/login/email-permissions/
Tem um outro artigo meu que ensina como solicitar permissões. Veja:
Facebook App: Requisitando permissões pela API do PHP
Na hora que o usuário ingressar na sua app, a app irá perguntar se o usuário deseja fornecer o email. Além disso, na página inicial da sua aplicação você pode colocar uma nota dizendo os motivos para qual o aplicativo esta solicitando o email.
Boa sorte!
pasquati
março 6, 2013
Obrigado pela sua resposta.
Como no seu exemplo a solicitação de “publicar em meu nome (publish_stream)” aparece numa segunda janela (na janela de permissão estendida). Nessa janela que eu gostaria de colocar o e-mail.
Se eu pedir permissão somente com o “email” ele aparece na primeira janela, aonde aparece todas as outras permissões. Entendeu?
Obrigado pela ajuda mais uma vez.
Pedro
março 7, 2013
Parabens pelo artigo, ajudou muito na parte web.
Mas e para conectar um aplicativo movel? Tenho um app desenvolvido em js+phonegap, como informo a url de retorno se estou num app?
Vagner
maio 13, 2013
Olá Vagner,
Caso ainda não conheça, aconselho verificar os links abaixo para ajudar a integração do phonegap com o facebook:
https://github.com/phonegap/phonegap-facebook-plugin
http://phonegap.com/blog/2013/04/18/pg-facebook-plugin/
Ainda não tive o prazer de trabalhar com o phonegap. Acredito que os links acima possam te ajudar. Lembre-se que o conceito de desenvolvimento para facebook é independente de plataforma ou sdk.
Boa sorte!
pasquati
maio 14, 2013
Obrigado pela dica
Vagner
maio 16, 2013