Estou com um problema de usabilidade na hora de requisitar de permissões extras no Facebook.
Conforme documentação do Facebook a função FB.login
só deve ser chamada depois de um click pois a maioria dos navegadores bloqueia pop-ups abertas por qualquer outro meio.
O problema ocorre quando estou utilizando a função FB.login
no meio da minha aplicação com o intuito de requisitar permissões extras para postar uma imagem (conforme melhores práticas do Facebook deixo para requisitar essa permissão no último momento).
Antes de requisitar a permissão eu verifico se o usuário já não a concedeu anteriormente. O que me levou à seguinte construção:
Função para checagem de permissões:
function checkPermissions(perms, callback, failCallback) {
FB.api('/me/permissions', function (response) {
var fbPerms = response.data[0];
var haveAllPermissions = true;
if (typeof perms === 'string') {
perms = [ perms ];
}
for (var i in perms) {
if (fbPerms[perms[i]] == null) {
haveAllPermissions = false;
break;
}
}
if (haveAllPermissions) {
callback();
} else {
failCallback();
}
});
}
A versão "quebrada"
Usa a seguinte construção (ativada por um clique em um botão):
// Verifica permissões
checkPermissions("publish_actions",
// Em caso de sucesso cria o request
generateRequest,
// Em caso de fracasso
function () {
// requisita a permissão
FB.login(function () {
// Verifica a permissão novamente
checkPermissions("publish_actions",
// Em caso de sucesso cria o request
generateRequest,
// Em caso de fracasso notifica o usuário
function () {
alert("Permissão negada");
// Reativa o botão para postar colagens
$("#gerarColagem").one('click', enviaColagem);
});
}, {scope: "publish_actions"});
});
Vocês podem ver o código em ação http://sfcb.7rtc.com (clicando no botão Postar).
O problema
Como estou checando pela permissão publish_actions
a pop-up não está diretamente atrelada ao click. Mesmo sendo um click que ativa o fluxo, a chamada para FB.login
está na verdade atrelada a um callback
. Resultado: Navegadores estão bloqueando a pop-up de login.
A solução não desejável
Eu posso pular a primeira checagem por permissões e forçar um fluxo de login
sempre (se o usuário já atribuiu a permissão tudo ocorre silenciosamente):
FB.login(function () {
// Verifica a permissão novamente
checkPermissions("publish_actions",
// Em caso de sucesso cria o request
generateRequest,
// Em caso de fracasso notifica o usuário
function () {
alert("Permissão negada");
// Reativa o botão para postar colagens
$("#gerarColagem").one('click', enviaColagem);
});
}, {scope: "publish_actions"});
Nesse caso (pulando a primeira checagem de permissões) a pop-up abre normalmente uma vez que o método FB.login
está respondendo diretamente ao click. O aspecto negativo é que ela está chamando o método de login todas as vezes, fazendo com que usuários que já garantiram a permissão anteriormente lidem com um overhead desnecessário e recorrente.
No cenário feliz o usuário concederá a permissão logo na primeira vez que clicar em "Postar". A versão "quebrada" garante que esses usuários não passem por um fluxo de login desnecessariamente; tudo funciona corretamente depois da primeira autorização.
Dessa forma, minha pergunta é: Como estruturar minhas chamadas para fazer e requisição de permissão com FB.login
sem que o navegador bloqueie a pop-up do Facebook? Existe alguma maneira de checar as permissões antes de chamar o FB.login
sem que o navegador bloqueie a pop-up?
Cenário Perfeito
- O usuário clica em Postar
- A aplicação verifica que o usuário possui a permissão
publish_actions
- A aplicação publica a foto (sem requisitar o login com permissão extra)
Cenário alternativo:
- O usuário clica em Postar
- b) A aplicação verifica que o usuário não possui a permissão
publish_actions
- A aplicação requisita novo login com permissão (essa janela não é bloqueada pelo navegador)
- O usuário autoriza a permissão
- A aplicação publica a foto