facebook-sdk

Based on my experience, here is a step by step guide for implementing Facebook login in your app using Facebook SDK v4.0

With the advancement in technology research. New SDK’s are getting periodically released, while older ones get deprecated. This is the sole reason why, inspite of a lot many tutorials and blogs out there, I have decided to write yet another tutorial which serves the same purpose but with a major difference – This is based on my own experience as an Android developer and I’ve provided a detailed and updated description on how to implement FB login while using their latest SDK. Adding Facebook login in your apps is even simpler with the new SDK than with the last although the first time around, it can be hard, thanks to the lack of a proper updated guides/tutorials.

Be advised, this tutorial quite rudimentary and is intended for those who have a hard time following the official Facebook documentation.

Prerequisites:

Before we move further with this tutorial, you need to make sure the following are taken care of:

  1. Facebook App – Configured and linked to your app, with Single Sign On enabled.
  2. Facebook SDK – Added to your project. This is pretty easy if you are using Android Studio and Gradle. See Getting Started, Facebook Android SDK for the complete guide.
  3. Facebook App ID – Configure and link this to your Android app. To configure your app in the Facebook developer console, see Android Getting Started, Add Facebook App ID
  4. Android Key Hash – Generate a developer key hash and add it to your developer profile
  5. Also, remember to generate a Release Key hash using the same keystore used to sign your apk before publishing in the play store.
  6. Facebook Activity – Include this in AndroidManifest.xml

Adding Facebook Login:

Facebook Login can be added by using either of the following methods:

  1. The LoginButton class – Which provides a button you can add to your UI (inserting in the xml). It follows the current access token and can log people in and out. This is the easiest way to implement Facebook login and is readily available in the Facebook SDK. The LoginButton class is nothing but a custom implementation of a Button.
  2. LoginManager class – To initiate login without using a UI element.

In this tutorial, I will only be demonstrating the use of the LoginButton Class. As I’ve mentioned above, this is the easiest and most effective way of implementing Facebook login as the LoginButton Class takes care of the login/logout status of the user.

Step 1:

Add the Facebook LoginButton widget to your xml layout:

<com.facebook.login.widget.LoginButton
android:id=”@+id/fb_sample_login_button”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_horizontal”
/>

You can customize the properties of Login button and register a callback in your onCreateView()method. Properties you can customize include LoginBehavior, DefaultAudience, ToolTipPopup.Style and permissions on the LoginButton.

Permissions Review:

When implementing Facebook Login, your app can optionally ask the user for permissions on a subset of that his/her data. If your app asks for more than public_profile, email and user_friends, Facebook must review it before you release it. See the Facebook Review Guidelines .for more details.

If your app uses a backend server to populate data and requires a login, Facebook login provides an easy and secure way to verify a user using his Facebook account by use of Access Tokens. For those of you who don’t have a good idea of what the Access token is used for, let me explain; when a user connects with an app using Facebook Login, the app will be able to obtain an “access token” which provides temporary, secure accessto Facebook APIs. An access token is an opaque string that identifies a user, app, or page and can be used by the app to make graph API calls.

Once the access token is received in your app, you can send that over to your server, where the necessary verification can be done and provide login access on successful verification of the user.

Now that we have a clear understanding of how Facebook login can be used in tandem with your backend server, let’s see how we can obtain the Access Token once the user has successfully logged in.

For simplicity, in this tutorial, I will be using the LoginButton inside an activity and will only be using the “public_profile” and “email” permissions for the LoginButton.

Once the LoginButton Widget is added to your Layout XML, build your project if need be and in the Activity where you intend to use Facebook Login,

Step 2:

add the following code to your LoginActivity:

private LoginButton fbLoginButton;

public CallbackManager callbackManager;

public String facebook_accessToken;

The object of the CallbackManager class is used to handle all the results from the login response. We will see how to use this soon. Use a simple string to store the user’s FB Access Token.

Insert the following code in the activity’s onCreate method:

//Facebook sdk initialization before setContentView

FacebookSdk.sdkInitialize(getApplicationContext());

//initializing the CallbackManager object

callbackManager = CallbackManager.Factory.create();

//obtaining reference for the LoginButton widget in the layout xml

fbLoginButton = (LoginButton) findViewById(R.id.facebook_login_button);

/*setting read permissions for the LoginButton. public_profile will give access to the user’s public information and “email” will give access to his/her registered email id*/

fbLoginButton.setReadPermissions(Arrays.asList(“public_profile”, “email”));

//registering the CallbackManager with the LoginButton class

fbLoginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {

@Override

public void onSuccess(LoginResult loginResult) {

Log.d(TAG, “success!!! “+loginResult.getAccessToken().getToken().toString());

Toast.makeText(LoginActivity.this, “Login Success!”, Toast.LENGTH_SHORT).show();

//obtaining the access token on Successful fb login

facebook_accessToken = loginResult.getAccessToken().getToken().toString();

//Async Task to perform login at the server.

MyAsyncTask login = new MyAsyncTask(LoginActivity.this, facebook_accessToken.toString());

login.execute();

}

@Override

public void onCancel() {

Toast.makeText(LoginActivity.this, “User cancelled facebook login”, Toast.LENGTH_SHORT).show();

// App code if you want to handle this event

}

@Override

public void onError(FacebookException exception) {

Toast.makeText(LoginActivity.this, “Oops! Something went wrong. Please try again later.”,

Toast.LENGTH_SHORT).show();

// App code if you want to handle this event

}

});

The onSuccess method is invoked when the the user successfully logs in using his facebook account. The onCancel method is invoked if the user cancels the facebook login. OnError is invoked if the facebook login fails.

Now, In the onActivityResult, include the following code:

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

callbackManager.onActivityResult(requestCode, resultCode, data);

}

If you are using multiple Social networking SDK’s like twitter, google+ etc, the result from each callback method can be filtered by using the correct requestCode inside a swicth() statement.

Kevin1

Kevin2

 

Kevin3

Kevin4

Now you can see why using the Facebook login is pretty straight forward. Hope this tutorial was helpful. The facebook SDK provides various permissions and allows access to a user’s facebook profile using the graph API. The graph API is a whole tutorial in itself and I will help you to tackle this in the tutorials to come.

Kevin Christie