domingo, 25 de março de 2012

Login via Facebook

Com essa moda de Rede Social, também virou moda fazer login utilizando as redes sociais. Fora a história do modismo, este procedimento possui muitas vantagens. No nosso caso, a maior vantagem é que podemos associar um perfil de um "ser humano ou empresa" a um usuário em nosso sistema. Ser humano ou empresa? Sim!! O Facebook possui uma grande preocupação em ter apenas seres humanos reais, não fake, ou no máximo uma empresa real como seu usuário. Então qualquer preocupação que possamos ter em identificar pessoas reais, não fakes,  compartilhamos com o Facebook.

Para realizar login no facebook utilizamos um procedimento muito simples via ajax e redirecionamento para uma página que compreende o retorno do facebook. Segue o código abaixo:

//begin-code
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head>
  <title>AccessManager - Login</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
  <script type="text/javascript">
    //variaveis de configuração
  var appID = 'APP-ID';
  var redirect_url = "APP-FACEBOOK-CALLBACK";
  var scope = 'scope=email,read_stream';
  //construção da url de login pelo facebook
  var facebookurl = 'https://www.facebook.com/dialog/oauth?client_id=' +
  encodeURIComponent(redirect_url) + '&' +
  scope;
  //atribuir a url botão de login pelo facebook
  $(document).ready(function(){
  $("#faceboklogin").attr("href", facebookurl);
  });
  </script>
</head>
<body>
  <a id="faceboklogin" > Login via facebook</a> 
</body>
</html>
//end-code

Para que possa fazer esse código funcionar você precisa cadastrar sua aplicação no Facebook e substituir o APP-ID e APP-FACEBOOK-CALLBACK pelos valores do AppID gerado pelo facebook ao cadastrar sua aplicação e com a url para onde o facebook deverá redirecionar ao ter sucesso no login via facebook.

Mais informações, acesse: developers-facebook-authentication

Nenhum comentário:

Postar um comentário

Pesquise aqui!