Tuesday, 10 January 2017

Simple Android Tutorial Login Using Facebook Account

Now days, much of application work with required create an account, there are lot of way to create an account to the apps : Using valid email, Facebook  and etc.

Generally, those who develop an apps using Facebook and Google as the way to register beside the valid email.


The information that taken from Google and Facebook generally are name of account, email, profile picture and other public information.

Beside that, you also can post something to your Facebook home from your android application. I will post this topic soon. Interesting right?

Android Login Using Facebook Account


First thing that you have to do is create an Facebook account. But i think you all already have Facebook account, right?

To integrate you application and Facebook, you have to generate your  APP ID. To get your APP ID, first you have to find your HASHKEY.

See also : Simple Android Tutorial Login Using Google Account

Generate HashKey


Use the code below, and running your application, you will see the result on your console/logcat.

The result look like the Following image :



Create APP ID


Now create your APP ID, by open Facebook.Developer. You will redirect to the page where you can create your apps

Figure 1

You can create new apps or use the existing application. If you create new application, then name it


Figure 2

Guidelines  of Figure 2 :

  1. Give a name for your application
  2. Write your email address
  3. Click the button create

Figure 3

Guidelines Figure 3 :
  1. Click menu setting of the left side
  2. Click button add platform

Figure 4

Guidelines of Figure 4 :
  1. Choose platform Android

Figure 5

Guidelines of Figure 5 :
  1. Write package name of your project
  2. Write you java class name where you hosting the Facebook login
  3. Paste your HashKey
  4. Turn On Single Sign ON
  5. Save Changes

Figure 6

Guidelines of Figure 6 :
  1. Click menu Overview Application
  2. Turn on the accessible that make your app be a public.

Copy the Application ID. The ID will define on AndroidManifest. Now time to continue develop the application. 

Let's start the coding ....


1. Compile the following Facebook SDK in your build.gradle(app:Module):

 compile 'com.facebook.android:facebook-android-sdk:4.5.0' // this line for facebook SDK  
2. In your build.gradle(Project : YourProjectName), add mavenCentral() inside repositories :

 allprojects {  
   repositories {  
     mavenCentral()//add this line for facebook    
   }  
 }  
3. Modify your AndroidManifest.xml so look like the following code :

4. Add the following code on your styles.xml. This style used to hide the default progress bar when start login to Facebook.

5. In your facebook login layout (whatever its name), paste the following code, in this project i gave name as activity_facebook_login.xml

On code above, the facebook button login place inside FrameLayout, it because i need to create a custom button, not use the default button. The visibility of that button is gone

6. Last, the code of MainActivity.java (The facebook login code).

In OnCreate(), you have to define

 FacebookSdk.sdkInitialize(getApplicationContext());  
above

 setContentView(R.layout.activity_facebook_login);   
Create CallBackManager look like :

 callBackManager = CallbackManager.Factory.create();  
If your application require to get the new access token, you can do like the following code of Access token tracker :

 accessTokenTracker= new AccessTokenTracker() {  
   @Override    
   protected void onCurrentAccessTokenChanged(AccessToken oldToken, AccessToken newToken{  
    //TO DO  
   }  
 };  
Get Profile information of your facebook account using Profile Tracker

 profileTracker = new ProfileTracker() {  
   @Override    
   protected void onCurrentProfileChanged(Profile oldProfile, Profile newProfile) {  
     updateUI(newProfile);  
   }  
 };  
Because we place the loginButton inside the FrameLayout, so we have to do all buttonLogin activity also inside the framelayout (inside frameLayout's onclick)

 frameLayoutLoginFacebook.setOnClickListener(new View.OnClickListener() {  
   @Override    
   public void onClick(View view) {  
     progressDialog.show();  
     btnLoginFacebook.setSoundEffectsEnabled(false);  
     btnLoginFacebook.performClick();  
     btnLoginFacebook.setPressed(true);  
     btnLoginFacebook.invalidate();  
     btnLoginFacebook.registerCallback(callBackManager, callBack);  
   }  
 });  
For the detail, here is the full java code of Facebook login :

Done! run your project. Hope it works well. If any suggestion or question, just write down at the comment column. Thank you.

Download the project from the following button


EmoticonEmoticon