Android Facebook Login

Prologue

After doing a few android projects, we found ourselves doing the same thing over and over again. Almost in every other project, we need some sort of user authentication system for our users to log in and signup, and almost always we need to integrate Facebook or Google OAuth APIs.

This tutorial is a part of a series where we develop such bootstrap projects, which we can later use as boilerplate code or startup templates in our other future projects.

In this part, we are going to implement Facebook Authentication, so without any ado lets dive straight into it.

Getting Started

First, we need to create an android project by launching Android Studio

Create Android Project

We would be naming our project as ‘Facebook Registration’ and the activity as ‘LoginActivity’ which would also be our Launcher Activity. Let’s initialize our project as a Git repository. You can do it through the command line or directly from the android studio as well.

Initialize git repo from Android Studio

Initialize Git in Android Studio

Perform an initial commit to the repository

Commit in Android Studio

Initialize git repo from command line

git init
git add .
git commit -m 'Initial Commit'

Facebook SDK Integration

Now, let’s head over to https://developers.facebook.com/docs/facebook-login/android to implement the SDK in our project. Read the docs and come back, I’ll patiently wait for you like a good friend.

Step one is to create an app on Facebook’s platform through which Facebook” would give credentials to use their SDK. I already have one test app created, which I would be using for this project.

Once we have selected that, the second step is to have Facebook installed on the android device where we’d be running our apps because to log in through Facebook, one must have Facebook, Duh!

Step three is to integrate Facebook SDK in our application, we would be using maven.

So lets follow the docs like responsible citizens (read developers), add

jcenter()

into your_app > Gradle Scripts > build.gradle (Project) if it’s not there and

implementation 'com.facebook.android:facebook-login:[4,5)'

into your_app > Gradle Scripts > build.gradle (Module: app)

Integrate FB SDK in Android

You might get an error on com.android.support:appcompat-v7 in your gradle due to the use of two different support libraries. To fix this, we changed our compileSdkVersion, targetSdkVersion and Support library from 28 to 27.

Support library conflict

Once the build is finished, let’s commit our code.

Github octacat

I am going to use Github’s cute little octacat to remind you to commit your code/project but the choice is yours honestly, I can not force you to become a responsible developer, that’s up to you.

Let’s Make Project (shortcut Ctrl+F9) so the SDK is downloaded in our project. We are just innocently following the docs here, so the next step is to edit the resources and manifest.

Edit Resources

Now, Associate Your Package Name and Default Class with Your App. Write your package names, for the default activity, we would add the LoginActivity for now. If you get an error, saying the package was not found, ignore it and just save the package name. Of course, the package name would not be found on the play store, you don’t even have a functional facebook login yet, how would your app be on PlayStore at this stage.

Generate a key hash

Next, Facebook wants us to generate a key hash. For Linux, its simple, I just have to execute the following command, give a key store password and voila.

For Development key, use ‘android’ as the keystore password.

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

If you are on a different platform (please don’t say windows), you are on your own and you are thinking about giving up as you are losing your motivation to do wonders in this world. Nah! You are smarter than that, you can just follow the FB dev docs, right mate?

Add your key hash, enable single sign-on and jump to step 8 already, let’s copy the code for the facebook button and add it to our LoginActivity layout file and assign an id TO the ‘textview’, we will use it to display messages.

Insert FB Login Button


Github octacat

To register a callback for the button to work, we need to add some code after which, our LoginActivity.java would look something like this.


public class LoginActivity extends AppCompatActivity { private CallbackManager callbackManager; private static final String EMAIL = "email"; private LoginButton loginButton; private TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); callbackManager = CallbackManager.Factory.create(); loginButton = (LoginButton) findViewById(R.id.login_button); textView = (TextView) findViewById(R.id.textView); loginButton.setReadPermissions(Arrays.asList(EMAIL)); // Callback registration loginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { // App code textView.setText("Logged IN"); } @Override public void onCancel() { // App code textView.setText("Cancled"); } @Override public void onError(FacebookException exception) { // App code textView.setText("Opps! Failed"); } }); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { callbackManager.onActivityResult(requestCode, resultCode, data); super.onActivityResult(requestCode, resultCode, data); } }

Closing Remarks

Final result of part one

This lay downs the basic structure for us, which we will use in our next few tutorials in order to create a complete user registration system. Next we would want to customize this facebook button with our liking, then let users login/register through their emails as well and for that we would have to develop some backend APIs as well.So we still need to some work before we can safely pretend to use this as our backbone to other projects. See you in the next part of this series, till then, Sayonara!

Source code for this part could be downloaded by clicking on our Github octacat

Leave a Comment

Your email address will not be published. Required fields are marked *