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!