Facebook App: Trabalhando com Login através do sdk para javascript

Posted on agosto 30, 2012. Filed under: Facebook, JavaScript | Tags:, , |

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:

Make a Comment

Deixe uma resposta para Vagner Cancelar resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

16 Respostas to “Facebook App: Trabalhando com Login através do sdk para javascript”

RSS Feed for Pasqua Tecnologia Comments RSS Feed

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.

Tentei com lightbox ou somente pop up e nenhum funcionou 😦

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!

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

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!

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

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

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

Olá Victor,

Para tentar resolver o problema com autorização, identifique a seguinte linha no código php:

// usuario nao logado, solicitar autenticacao
$loginUrl = $facebook->getLoginUrl();
echo "<a href=\"$loginUrl\">Facebook Login</a><br />";
echo "<strong><em>Voc&ecirc; n&atilde;o esta conectado..</em></strong>";

Por

// usuario nao logado, solicitar autenticacao
$loginUrl = $facebook->getLoginUrl();
header("Location: " . $loginUrl);
exit;

Veja se ajuda! Boa sorte!

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

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!

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.

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?

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!

Obrigado pela dica


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d blogueiros gostam disto: