domingo, 26 de abril de 2015

Android - Login com Facebook no Eclipse - PARTE 2 (Final)

E aí galera! Estamos aqui outra vez e vamos dar continuidade à primeira parte deste tutorial. Se você não seguiu a primeira parte deste tutorial, clique aqui.

Então, sem mais delongas, vamos ao passo-a-passo!

No final da parte 1 deste tutorial eu peço pra que você copie o "facebook.jar" de dentro da pasta "bin" do projeto do FacebookSDK para a pasta "/libs/" do seu projeto, porém, nesta segunda parte do tutorial eu tentei de todas as formas concluí-la utilizando tal "facebook.jar" mas não consegui e nem descobri o "porque". Sendo assim, vamos apagá-lo da pasta "/libs/" e vamos referenciar a biblioteca como um todo:

Clique com o botão direito do mouse em seu projeto e selecione properties:





No menu da esquerda selecione Android e clique em Add no fim da janela:





Selecione o projeto referente ao FacebookSDK e clique em OK:





Pronto, agora vamos à utilização!

1) Vamos modificar o arquivo AndroidManifest.xml referente ao seu projeto adicionando duas permissões e o ApplicationID referente à aplicação que criamos no site developers do Facebook na primeira parte deste tutorial. Para isso, acima da tag Application do arquivo, fora da mesma, adicione o seguinte trecho de código:

   
   <uses-permission android:name="android.permission.INTERNET"/>  
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  

Agora DENTRO da tag Application vamos vincular nosso aplicativo à aplicação criada no site developers do Facebook adicionar o seguinte trecho de código:

   
     <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>  


Note que o valor não está diretamente no arquivo AndroidManifest.xml, e sim está referenciando a chave facebook_app_id no arquivo strings.xml. Abra o arquivo /values/strings.xml de seu projeto e adicione o seguinte trecho de código dentro da tag <resources>:

   
   <string name="facebook_app_id">SEU_APP_ID_CRIADO_NO_FACEBOOK_DEVELOPERS</string>  


Caso você não tenha guardado tal chave, acesse o site do Facebook para Desenvolvedores, faça login e na aba My Apps selecione o seu aplicativo antes criado e você terá acesso à sua chave. Substitua o valor acima e seu arquivo AndroidManifest.xml estará totalmente configurado (lembrando que na primeira parte deste tutorial já adicionamos a Activity do Facebook no mesmo).

2) Vamos utilizar o componente LoginButton (já mencionado na primeira parte deste tutorial) que é um componente visual já disponibilizado pelo Facebook para possibilitar o login com o mesmo.

Para isso, primeiramente vamos adicionar o componente ao nosso arquivo de layout onde queremos que o mesmo esteja visível. O componente é o seguinte:

   
   <com.facebook.login.widget.LoginButton  
     android:id="@+id/login_button_facebook"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"/>  

Feito isso, agora iremos trabalhar com tal botão em nossa Activity.

3) Em nossa Activity precisaremos de 3 propriedades:
* com.facebook.login.widget.LoginButton ao qual referenciará o botão que incluímos em nosso layout no passo 2.
* java.util.List de Strings que conterá as permissões que usaremos para recuperar dados do usuário definidos no Facebook.
*com.facebook.CallbackManager que será responsável por gerenciar as ações em suas aplicações após o retorno das chamadas ao FacebookSDK.

Sendo assim, crie três variáveis globais em sua Activity:

        
      private LoginButton buttonFacebook;  
      private List<String> facebookPermitions;  
      private CallbackManager callbackManager;  
        

Em sua Activity, no método onCreate, ANTES DE CONFIGURAR O XML DE LAYOUT COM O MÉTODO setContentView precisamos inicializar o FacebookSDK e fazemos isso adicionando o seguinte trecho de código:

   
   FacebookSdk.sdkInitialize(this);  
   ...  
   setContentView(R.layout.activity_login);  
   

Se você estiver utilizando o botão do facebook dentro de um Fragment ao invés de uma Activity então troque a chave this por getApplicationContext().

Após configurar o xml de layout de sua Activity com o método setContentView iniciamos o nosso CallbackManager com a seguinte instrução:

   
    setContentView(R.layout...);
    ...
    callbackManager = CallbackManager.Factory.create();  
   


Agora vamos inicializar nossa lista com as permissões que queremos para recuperar os dados necessários à nossa aplicação diretamente dos dados cadastrados no Facebook do usuário. Para este primeiro teste, utilizaremos apenas algumas permissões básicas, porém você pode adicionar ou remover permissões conforme sua necessidade. Inicialize a lista da seguinte forma:

   
   facebookPermitions = Arrays.asList("email", "public_profile", "user_friends");  
             

Vincule seu objeto LogginButton com o botão de logar com Facebook antes adicionado ao seu xml de layout:

   
   buttonFacebook = (LoginButton)findViewById(R.id.login_button_facebook);  
   

Configure no LogginButton as permissões que definimos anteriormente:

   
   buttonFacebook.setReadPermissions(facebookPermitions);  
   

E agora registramos nosso CallbackManager através do método registerCallback do LoginButton que recebe como parâmetro o nosso callbackManager responsável por encapsular nosso callback e nosso callback responsável por tratar os eventos e respostas enviadas pelo FacebookSDK ao concluir o login:

   
    buttonFacebook.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {            
        @Override  
        public void onSuccess(LoginResult arg0) {  
             Toast.makeText(mContext, "SUCESSO!", Toast.LENGTH_LONG).show();  
        }  
                  
        @Override  
        public void onError(FacebookException arg0) {  
             Toast.makeText(mContext, "ERROR!", Toast.LENGTH_LONG).show();  
        }  
                  
        @Override  
        public void onCancel() {  
             Toast.makeText(mContext, "CANCEL!", Toast.LENGTH_LONG).show();  
        }  
    });  



Estamos quase prontos para fazer nosso primeiro teste.

4) Agora devemos copiar a nossa Key Hash que já configuramos na primeira parte deste tutorial para o campo de Key Hashs de nosso aplicativo. Para isso, navegue ate o site do Facebook para Desenvolvedores, faça login, clique na sua imagem no canto superior direito do site e selecione Developer Settings:





Selecione a aba Sample App e copie o código que está no campo Android Key Hash conforme mostra a imagem:





No menu superior posicione o mouse em My Apps e selecione o seu aplicativo:





Na tela que se segue, no menu da esquerda selecione Settings e no campo Key Hashs cole o código copiado:




5) Faça o teste de sua aplicação e veja se até aqui tudo está funcionando (não estranhe por nenhum dos Toasts que colocamos no FacebookCallback pois o mesmo ainda não será executado).

6) Agora vamos "brincar" com o nosso CallbackManager e com nosso FacebookCallback definidos anteriormente para conseguirmos recuperar os dados que precisamos em nossa aplicação direto dos dados do usuário guardados na base do Facebook.

Ao clicar no botão de logar com o Facebook você deve ter percebido que uma nova Activity é inicializada pedindo ao usuário as permissões que você configurou. Essa Activity é inicializada automaticamente com o método startActivityForResult ao invés do startActivity, ou seja, para recuperarmos o seu retorno devemos sobrescrever o método onActivityResult de nossa Activity como o seguinte código:

   
   @Override  
   protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
      super.onActivityResult(requestCode, resultCode, data);  
      callbackManager.onActivityResult(requestCode, resultCode, data);  
   }  
   

A partir deste momento, o nosso FacebookCallback será executado. :)

7) Ao chegar no método onSuccess de nosso FacebookCallback teremos no parâmetro LoginResult a lista de permissões que foram aceitas pelo usuário assim como a lista de permissões que foram negadas. Se temos agora a permissão do usuário para acessar seus dados então podemos fazer uma requisição e acessar tais dados.

Dentro do método onSuccess criamos uma requisição com o objeto GraphRequest através do método newMeRequest passando como parâmetro o AccessToken contendo a lista de permissões aceitas e um novo GraphJSONObjectCallback que trata o retorno da requisição com o seguinte código:

 
    GraphRequest request = GraphRequest.newMeRequest(arg0.getAccessToken(), new GraphJSONObjectCallback() {  
        @Override  
         public void onCompleted(JSONObject object, GraphResponse response) {  
             System.out.println(object.toString());  
         }  
    });  
                       
    request.executeAsync();  


No método onCompleted o JSONObject object contém os dados que queremos. No código acima eu apenas imprimo no log os dados recuperados.

É isso aí! Agora é só adicionar/remover permissões de nossa lista de permissões de acordo com os dados que sua aplicação necessita e tratar tais dados no método onCompleted conforme necessidade de sua aplicação!

Caso haja alguma crítica/sugestão, por favor deixe abaixo nos comentários para que possamos melhorar cada vez mais.

Até a próxima pessoal!

segunda-feira, 6 de abril de 2015

Política de Privacidade

"Política de Privacidade"

"Este site pode utilizar cookies e/ou web beacons quando um usuário tem acesso às páginas. Os cookies que podem ser utilizados associam-se (se for o caso) unicamente com o navegador de um determinado computador.
Os cookies que são utilizados neste site podem ser instalados pelo mesmo, os quais são originados dos distintos servidores operados por este, ou a partir dos servidores de terceiros que prestam serviços e instalam cookies e/ou web beacons (por exemplo, os cookies que são empregados para prover serviços de publicidade ou certos conteúdos através dos quais o usuário visualiza a publicidade ou conteúdos em tempo pré determinados). O usuário poderá pesquisar o disco rígido de seu computador conforme instruções do próprio navegador. O Google, como fornecedor de terceiros, utiliza cookies para exibir anúncios no Passoapassodascoisas.
Com o cookie DART, o Google pode exibir anúncios para seus usuários com base nas visitas feitas a este site.
Você pode desativar o cookie DART visitando a Política de privacidade da rede de conteúdo e dos anúncios do Google.
Usuário tem a possibilidade de configurar seu navegador para ser avisado, na tela do computador, sobre a recepção dos cookies e para impedir a sua instalação no disco rígido. As informações pertinentes a esta configuração estão disponíveis em instruções e manuais do próprio navegador".


Este site respeita e procura responder todos os e-mails enviados.


Após a leitura este site apaga todos os endereços de e-mail enviados.


Este site afirma que não utiliza e-mails para políticas de Spam ou de envio de e-mails indesejados.


Este site não se responsabiliza pelo conteúdo, promessas e veracidade de informações dos banners colocados pelos seus patrocinadores. Toda a responsabilidade é dos anunciantes.

domingo, 5 de abril de 2015

Android - Login com Facebook no Eclipse PARTE 1



Como fazer login na minha aplicação utilizando o Facebook? Quais as possíveis formas de fazer isso?


Sem mais enrolação, vamos ao passo-a-passo!

Existem duas formas de você fazer login na sua aplicação utilizando o Facebook. A primeira, utilizando a classe LoginButton que fornece um componente de botão para você incluir na sua tela e a segunda é utilizando a classe LoginManager que não disponibiliza componentes visuais.


Como pré-requisito você precisa ter:

* Facebook App configurado e lincado à sua aplicação;
* Facebook SDK adicionado à sua aplicação;
* Facebook App ID configurado e lincado à sua aplicação;
* Android Key Hash configurado e adicionado ao seu perfil de desenvolvedor;
* Facebook Activity incluso ao seu arquivo AndroidManifest.xml.

Calma, não se desespere ainda! Iremos fazer tudo isso passo-a-passo!

1) Pré-requesitos
1.1) Faça login no site do Facebook para desenvolvedores com sua conta do Facebook.

1.2) Na aba "My Apps" clique em Register as a Developer como mostra a figura abaixo:





A seguinte janela irá abrir. Aceite os termos e clique em cadastre-se:



1.3) Na tela que irá abrir, selecione Android, digite o nome da sua aplicação e clique em Create New Facebook App ID.



Na próxima tela escolha a categoria da sua aplicação e prossiga.

Faça o download do Facebook SDK for Android e guarde-o, iremos utilizá-lo nas próximas sessões.

No fim da página você precisará informar o pacote e a Activity principal da sua aplicação. O package você irá recuperar do arquivo AndroidManifest.xml na sua aplicação. Para o campo da Activity usaremos o caminho completo da Activity que é executada ao abrir sua aplicação. Segue imagens.





Clique em Avançar.

1.4) No próximo passo iremos gerar o Android Key Hash. Não é uma tarefa difícil, apenas execute o seguinte comando:

MAC:

 
  keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64  


WINDOWS:

 
  keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64  


Se ao executar o comando você se deparar com o erro "'openssl' is not recognized as an internal or external command, operable program or batch file." faça o download do openssl aqui, instale-o e execute o comando novamente substituindo "openssl" pelo caminho de instalação do mesmo. Desta forma:



 
  keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | "C:\OpenSSL-Win64\bin\openssl.exe" sha1 -binary | "C:\OpenSSL-Win64\bin\openssl.exe" base64


Caso seja solicitado alguma senha apenas dê enter. Copie o código base64 que é mostrado para a area do cadastro Facebook Developers que pede o código Hash







Clique em Avançar.


1.5) Vamos importar o Facebook SDK que baixamos no passo 1.3 para dentro de nossa aplicação.

DESCOMPACTE-O DENTRO DO WORKSPACEDO SEU PROJETO.

Crie um arquivo com nome local e com extensão ".properties" (local.properties) com o seguinte conteúdo: (substituindo "C:/Eclipse Android/sdk/" pelo caminho do seu SDK).

 
  sdk.dir = C:/Eclipse Android/sdk/
  

Salve o arquivo dento da pasta do Facebook SDK que baixamos.
Ainda dentro da pasta, abra o arquivo "settings.gradle" e adicione duas barras ( // ) no início das linhas que contém o seguinte conteúdo:

 
 //include 'tests'  
 //project(':tests').projectDir = new File('facebook/tests')  
   
 //include 'junitTests'  
 //project(':junitTests').projectDir = new File('facebook/junitTests') 
 

Salve o arquivo.

Agora, no project explorer da sua aplicação clique com o botão direito do mouse e selecione import. Expanda a pasta Gradle, selecione Gradle Project e clique em Next.







As dependências do Facebook SDK são gerenciadas pelo Gradle, se você está usando o Android Studio então não terá problemas, porém, se você está utilizando o Eclipse você precisa ter o plugin do Gradle instalado em seu Eclipse para que as dependências do Facebook SDK sejam resolvidas. Para instalar o plugin do Gradle, em seu eclipse clique em help -> Install New Software..., adicione o repositório http://dist.springsource.com/release/TOOLS/update/e4.2 e instale apenas a opção Core / Eclipse Integration for Gradle

Aponte para a pasta descompactada do Facebook SDK, Clique em Build Model, selecione apenas o projeto facebook e clique em finish.



Se ao compilar o projeto, você se deparar com esse erro:


 
[2015-04-04 22:21:21 - facebook] /facebook/gen already exists but is not a source folder. Convert to a source folder or rename it.
  

Clique com o botão direito do mouse na pasta "gen" e selecione "Build Path -> Use as Source Folder".

Se ao compilar novamente você se deparar com esse erro:



 [2015-04-04 22:25:27 - facebook] D:\facebook-android-sdk-4.0.1\facebook\res\values\messenger_button_styles.xml:66: error: Error: No resource found that matches the given name: attr 'android:textAllCaps'.
  

Comente a linha com o erro e compile o projeto.

Clique com o botão direito do mouse na pasta "src" e selecione "Build Path -> Use as Source Folder".

Clique com o botão direito do mouse no projeto facebook referente ao SDK e selecione "Android Tools -> Add Support Library". Aceite o termos e clique em "Install".

1.5.2) Clique com o botão direito do mouse no projeto facebook referente ao SDK e clique em Properties. Selecione Java Compiler no menu esquerdo e mude todos os "combos" para 1.7. Ainda nesta janela, selecione Android no menu da esquerda e marque a opção Android 4.4W ou superior. Caso não tenha essa opção (ou superior), atualize suas APIs no Android SDK Manager.

Se o seu projeto ainda contiver erros relacionados ao "bolts" baixe aqui o projeto "bolts" direto do GitHub, descompacte-o e importe-o como projeto Android para dentro do eclipse.

Repita o passo 1.5.2 acima no projeto "bolts" que acabamos de baixar.  Depois disso, ainda que o projeto "bolts" esteja com erro, provavelmente o arquivo "bolts.jar" já deverá ter sido gerado dentro da pasta "Bolts/bin/" e é apenas dele que precisamos. Copie o "bolts.jar" para dentro da pasta libs do projeto referente ao Facebook SDK e compile novamente o projeto.

Estamos quase lá!

Clique com o botão direito do mouse no projeto referente ao Facebook SDK e clique em Properties. Na janela que se seque, selecione Android no menu da esquerda e marque a opção "Is Library". Feito isso, compile novamente o projeto referente ao Facebook SDK e o arquivo facebook.jar será gerado dentro da pasta "/bin/". Copie este ".jar" para a pasta "/libs/" da sua aplicação e estaremos prontos para utilizar o Facebook SDK em nosso projeto!

 1.6) Adicione a seguinte declaração de Activity no seu arquivo AndroidManifest.xml:

 
...  
 <activity   
       android:name="com.facebook.FacebookActivity"  
       android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"  
       android:theme="@android:style/Theme.Translucent.NoTitleBar"  
       android:label="@string/app_name">  
 </activity>  
...  


Pessoal, pra essa primeira parte (a mais difícil) ficaremos por aqui. No próximo tutorial aprendemos de fato a fazer login com o Fcebook e como recuperar dados de perfil do usuário.

Clique aqui para acessar a parte 2 deste tutorial.

Até a próxima! :)